【案例】仿PHP.CN首页部分

html

        <!-- 添加部分开始 -->
        <div class="right">
          <div class="top">
          <a href=""><img src="static/images/user-pic.jpeg" alt="100px"></a>
          <a href=""><b>猪老师</b></a>
          <a href="">P豆 2065</a>
          </div>
          <div class="xuexi">
            <a href="">我要学习</a>
          </div>
          <div style="border-bottom: 1px solid #eeeeee; margin-top: 10px;"></div>
          <div class="wenda">
            <span>问答社区</span>
            <a href="" class="dayi">答疑</a>
          </div>
          <div class="xia">  
          <div class="toutiao">
            <span>头条</span>
            <a href="" class="huise">试题（附源码级详解）</a>
          </div>
          <div class="fuli">
            <span>福利</span>
            <a href="" class="huise">限时折扣>></a>
          </div>
          <div class="xinban">
            <span>新班</span>
            <a href="" class="huise">20期php线上班</a>
          </div>
          <div class="zhaomu">
            <span>招募</span>
            <a href="" class="huise">课程合作计划</a>
          </div>
          <div class="gonggao">
            <span>公告</span>
            <a href="" class="huise">APP上线啦</a>
          </div>
        </div>
        </div>
        <!-- 添加部分结束 -->

        <!-- 添加部分开始 -->
        <div class="bottom-right">
           <div class="wx">
                    <a href="" class="iconfont icon-weixin"></a>
                </div>
                <span class="weixin">微信公众号</span>
                <div class="qq">
                    <a href="" class="iconfont icon-QQ"></a>
                </div>
                <span class="qqqqun">官方QQ群</span>
        </div>
      <!-- 添加部分结束 -->

CSS

/* 添加部分开始 */
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: 60px;
}
main .navs .right .xuexi{
  display: flex;
  background: #f11717;
  width: 160px;
  padding: 10px;
  margin:0px 15px;
  border-radius: 30px;
  place-content:center;
}
main .navs .right .xuexi > a {
  color: #ffffff;
}
main .navs .right .wenda {
  display: flex;
  width: 190px;
  padding:10px 15px;
}
main .navs .right .wenda a {
  background: #ff583d;
  color:#ffffff;
  border-radius: 1px;
}
main .navs .right .wenda .dayi{
  margin: 0px 10px;
  place-self:top;
}
main .navs .right .xia{
  display: grid;
  padding: 15px;
  gap:20px;
}
main .navs .right .xia .huise{
  color: #ccc;
}
main .navs .bottom-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
}
main .navs .bottom-right .weixin{
  grid-area: 2;
}
/* 添加部分结束 */