grid布局实例

grid布局实例

html代码

<!--右侧信息栏-->
<div class="right">
    <!-- 个人信息 -->
    <div class="user">
        <!-- 图片 -->
        <div class="picture"><img width="20px" src="static/images/user-pic.jpeg" alt=""></div>
        <!-- 名字 -->
        <div class="name">Wu.Ang</div>
        <!-- P豆 -->
        <div class="p_bean">P豆:25</div>
        <!-- 我的学习 -->
        <div class="btn"><a href="">我的学习</a></div>
    </div>
    <!-- 问答社区 -->
    <div class="community">
        <div class="wenda">
            <span>问答社区</span>
            <a href="">答疑</a>
        </div>
        <div class="dh">
            <div class="dh-left">
                <div>
                    <span>头条</span>
                    <a href="">国产API管理神器 Apifox 好用吗？</a>
                </div>
                <div>
                    <span>福利</span>
                    <a href="">限时折扣>></a>
                </div>
                <div>
                    <span>新班</span>
                    <a href="">PHP阶段报名了</a>
                </div>
                <div>
                    <span>招募</span>
                    <a href="">课程合作计划</a>
                </div>
                <div>
                    <span>公告</span>
                    <a href="">APP上线啦</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--底部公众号-->
<!-- 公众号 -->
<div class="bottom-right">
    <div class="weixin">
        <img src="static/images/tlbb.png" alt="">
    </div>
    <div class="qq">
        <img src="static/images/ynxj.png" alt="">
    </div>
    <div><a href="">官方公众号</a></div>
    <div><a href="">官方QQ号</a></div>
</div>

css代码部分

/* `````````````右侧信息```````````````````````` */
/* 个人信息 */
main .navs .right .user{
  height: 141px;
  border-bottom: 1px solid #eeeeee;
  display: grid;
  padding-top: 20px;
  grid-template-columns: 40px 100px;
  grid-template-rows: 20px 20px 1fr;
  place-items: center;
  place-content: center;
}
main .navs .right .user .name,
main .navs .right .user .p_bean{
  place-self: start;
}
main .navs .right .user .name{
  font-weight: bold;
}
main .navs .right .user .p_bean{
  font-size: 12px;
  color: #999999;
}
main .navs .right .user .picture{
  width: 40px;
  height: 40px;
  grid-row: span 2;
}
main .navs .right .user .picture img{
  width: 100%;
  border-radius: 50%;
}
main .navs .right .user .btn{
  grid-column: span 2;
}
main .navs .right .user .btn a{
  width: 100px;
  height: 50px;
  padding: 10px 40px;
  border-radius: 30px;
  background-color: red;
  color: white;
  font-weight: bold;
  border: 1px solid;
}
/* 问答社区 */
main .navs .community{
  width: 150px;
  margin: auto;
}
main .navs .community .wenda{
  margin-top: 10px;
  display: flex;
}
main .navs .community .wenda a{
  width: 31px;
  color: white;
  background-color: #ff583d;
  text-align: center;
  margin:0 10px;
}
main .navs .community .dh{
  width: 150px;
  height: 240px;
  margin-top: 20px;
}
main .navs .community .dh .dh-left > div{
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-auto-rows: 40px;
  overflow: hidden;
}
main .navs .community .dh .dh-left > div > a{
  color: #b6b6b6;
  margin-left: 20px;
}
main .navs .community .dh .dh-left > div > a:hover{
  color: red;
}
/* ````````````````````````````````````````` */
/* ``````````````````底部公众号``````````````````````` */
main .navs .bottom-right{
  display: grid;
  grid-template-columns: 70px 70px;
  grid-template-rows: 50px 20px;
  place-content: center;
  place-items: center;
}
main .navs .bottom-right .weixin img,
main .navs .bottom-right .qq img{
  width: 30px;
  border-radius: 50%;
}
main .navs .bottom-right div a,
main .navs .bottom-right div a{
  font-size: 12px;
}
/* ```````````````````````````````````````````` */

项目中的不足

1. 对多行多列的grid布局运用的不好
2. flex布局没有用到