仿php中文网部分

                <div class="right">
                    <div class="top">
                        <a href="">
                            <img src="static/images/user-pic.jpeg" width="100" alt="" /></a>
                        <a href="">朱老师</a>
                        <a href="">p豆 99999</a>
                    </div>
                    <div class="xuexi">
                        <a href="">我的学习</a>
                    </div>
                    <br />
                    <div style="border-bottom: 1px solid #eeeeee; margin-top: 10px"></div>
                    <div class="wenda">
                        <a href="">问答社区</a>
                        <a href="" class="dayi"> 答疑</a>
                    </div>
                    <div class="kuaijie">
                        <div class="toutiao">
                            <a href="">头条</a>
                            <a href="" class="yanse">php学习之路</a>
                        </div>
                        <div class="fuli">
                            <a href="">福利</a>
                            <a href="" class="yanse"> 限制折扣</a>
                        </div>
                        <div class="xinban">
                            <a href="">新班</a>
                            <a href="" class="yanse"> 20期php线上班</a>
                        </div>
                        <div class="zhaomu">
                            <a href="">招募</a>
                            <a href="" class="yanse">课程计划合作</a>
                        </div>
                        <div class="gonggao">
                            <a href="">公告</a>
                            <a href="" class="yanse"> APP上线啦</a>
                        </div>
                    </div>
                </div>
                <div class="bottom-left">
                    <div class="desc">
                        <div class="title">学习路径</div>
                        <span>全部7个&gt;</span>
                    </div>
                    <ul class="detail">
                        <li onclick="">
                            <img src="static/images/dgjj.png" alt="" />
                            <a href="">独孤九贱</a>
                            <span>9门课程</span>
                        </li>
                        <li onclick="">
                            <img src="static/images/ynxj.png" alt="" />
                            <a href="">独孤九贱</a>
                            <span>9门课程</span>
                        </li>
                        <li onclick="">
                            <img src="static/images/tlbb.png" alt="" />
                            <a href="">独孤九贱</a>
                            <span>9门课程</span>
                        </li>
                        <li onclick="">
                            <img src="static/images/phpkjkf.png" alt="" />
                            <a href="">独孤九贱</a>
                            <span>9门课程</span>
                        </li>
                        <li onclick="">
                            <img src="static/images/phpksrm.png" alt="" />
                            <a href="">独孤九贱</a>
                            <span>9门课程</span>
                        </li>
                    </ul>
                </div>
        <div class="bottom-right">
          <div class="weixin">
                   <a href="" class="iconfont icon-weixin"></a>
               </div>
               <span class="wx">微信公众号</span>
               <div class="qq">
                   <a href="" class="iconfont icon-QQ"></a>
               </div>
               <span class="guanfang">官方QQ群</span>
       </div>
          </div>
        </div>
            </div>
        </main>
    </body>
</html>

---

css代码

@import url(reset.css);
body {
  background-color: #f3f5f7;
}
main .navs .right .top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-row: 1 / span 2;
}
main .navs .right .top a:nth-of-type(1) {
  grid-row: 1/ 3;
  padding: 10px 15px;
}
main .navs .right .top a:nth-of-type(2) {
  place-self: center start;
}
main .navs .right .top img {
  border-radius: 100px;
  width: 50px;
}
main .navs .right .top a:nth-of-type(3) {
  color: #999999;
}
main .navs .right .xuexi {
  display: flex;
  color: #fff;
  background: red;
  place-content: center;
  width: 150px;
  padding: 10px;
  border-radius: 50px/50px;
  margin: auto;
}
main .navs .right .xuexi > a {
  color: #fff;
}
main .navs .right .wenda {
  display: flex;
  width: 150px;
  padding: 10px 15px;
}
main .navs .right .wenda > a.dayi {
  background-color: #ff583d;
  color: #fff;
  margin: auto;
}
main .navs .right .kuaijie {
  display: grid;
  padding: 10px;
  gap: 22px;
}
main .navs .right .kuaijie .yanse {
  color: #999999;
}
main .navs .bottom-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
}
main .navs .bottom-right .wx {
  grid-area: 2;
}
main .navs .bottom-right .weixin :nth-of-type(1) {
  color: green;
}
main .navs .bottom-right .qq :nth-of-type(1) {
  color: lightskyblue;
}