我采用的实现方法与老师的实现还是有所区别的，我在页眉以及页脚部分，并没有使用定位实现，而是在中间部分使用了区域性滚动。
首先对整体页面进行高度设置以及网格划分。body {height:100vh;display: grid;grid–template–rows:0.88rem1fr0.49rem;} 设置main的css中overflow属性为auto,实现区域部分滚动。其它方面的实现大同小异，在画分割线使用了不同的做法，具体可以参考代码：
html代码<body><header><divclass=“status-bar”><divclass=“input-sea源码网点我wcqh.cnrch”><iclass=“iconfont icon-sousuo”></i><p>习言道｜高标准、高质量建设雄安新区</p></div><divclass=“publish”><iclass=“iconfont icon-fabu”></i><span>发布</span></div></div><divclass=“tabbar”><ahref=“”>关注</a><ahref=“”class=“active”>推荐</a><ahref=“”>热榜</a><ahref=“”>发现</a><ahref=“”>防疫</a><ahref=“”>视频</a></div></header><main>源码网点我wcqh.cn<!– 此处省略 –></main><footer><ahref=“”class=“active”><iclass=“iconfont icon-shouye”></i><span>首页</span></a><ahref=“”><iclass=“iconfont icon-tubiao_shipin”></i><span>西瓜视频</span></a><ahref=“”><iclass=“iconfont icon-fangyingji”></i><span>放映厅</span></a><ahref=“”><iclass=“iconfont icon-wode”></i><span>未登录源码网点我wcqh.cn</span></a></footer></body><body><header><divclass=“status-bar”><divclass=“input-search”><iclass=“iconfont icon-sousuo”></i><p>习言道｜高标准、高质量建设雄安新区</p></div><divclass=“publish”><iclass=“iconfont icon-fabu”></i><span>发布</span></div></div><divclass=“tabbar”><ahref=“”>关注</a><ahref=“”class=“active”>推荐</a><源码网点我wcqh.cnahref=“”>热榜</a><ahref=“”>发现</a><ahref=“”>防疫</a><ahref=“”>视频</a></div></header><main><!– 此处省略 –></main><footer><ahref=“”class=“active”><iclass=“iconfont icon-shouye”></i><span>首页</span></a><ahref=“”><iclass=“iconfont icon-tubiao_shipin”></i><span>西瓜视频</span></a><ahref=“”><iclass=“iconfont icon-fang源码网点我wcqh.cnyingji”></i><span>放映厅</span></a><ahref=“”><iclass=“iconfont icon-wode”></i><span>未登录</span></a></footer></body>头部css代码
“`css
header > .status-bar {
display: grid;
grid-template-columns: 1fr 0.5rem;
background-color: #d4544c;
padding: 0.08rem 0.15rem;
}
.status-bar > .input-search {
border-radius: 1.5rem;
bac源码网点我wcqh.cnkground-color: white;
display: grid;
grid-template-columns: 0.2rem 1fr;
place-items: center;
padding-left: 0.1rem;
overflow: hidden;
}
.status-bar > .input-search p {
white-space: nowrap;
}.status-bar > .publish {
display: grid;
place-items: center;
color: white;
}
.status-bar > .publish span {
font-size: 0.1rem;
/ 顶部导航 /
.tabbar {
display: flex;
place-content: space-around;
height: 0.44rem;
place-items: center;
position: relative;
background-color: white;
}
.tabbar::after {
content: “”;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.02rem;
background-color: #f2f2f2;
transform: scaleY(0.5);
}
.active {
color: #d源码网点我wcqh.cn4544c;
position: relative;
}
.tabbar > .active {
line-height: 0.44rem;
}
.tabbar > .active::after {
display: block;
content: “”;
background-color: #d4544c;
position: absolute;
bottom: 0.02rem;
left: 0;
right: 0;
width: 60%;
height: 0.03rem;
border-radius: 0.02rem;
margin: 0 auto;
} 3.底部css“`cssfooter {padding: 0.05re源码网点我wcqh.cnm 0; display: flex; place-content: space-around; position: relative;}footer a { display: grid; place-items: center;}footer a .iconfont { font-size: x-large;}footer::after { content: “”; height: 0.02rem; width: 100%; background-color: #e8e8e8; position: absolute; top: 0;}
会员专属
暂无评论内容