仿写今日头条对头部以及底部的实现分析

我采用的实现方法与老师的实现还是有所区别的，我在页眉以及页脚部分，并没有使用定位实现，而是在中间部分使用了区域性滚动。

首先对整体页面进行高度设置以及网格划分。

body {
height: 100vh;
display: grid;
grid-template-rows: 0.88rem 1fr 0.49rem;
}

设置main的css中overflow属性为auto,实现区域部分滚动。

其它方面的实现大同小异，在画分割线使用了不同的做法，具体可以参考代码：

html代码

<body>
 <header>
   <div class="status-bar">
     <div class="input-search">
       <i class="iconfont icon-sousuo"></i>
       <p>习言道｜高标准、高质量建设雄安新区</p>
     </div>
     <div class="publish">
       <i class="iconfont icon-fabu"></i>
       <span>发布</span>
     </div>
   </div>
   <div class="tabbar">
     <a href="">关注</a>
     <a href="" class="active">推荐</a>
     <a href="">热榜</a>
     <a href="">发现</a>
     <a href="">防疫</a>
     <a href="">视频</a>
   </div>
 </header>
 <main>
   <!-- 此处省略 -->
 </main>
 <footer>
   <a href="" class="active">
     <i class="iconfont icon-shouye"></i>
     <span>首页</span>
   </a>
   <a href="">
     <i class="iconfont icon-tubiao_shipin"></i>
     <span>西瓜视频</span>
   </a>
   <a href="">
     <i class="iconfont icon-fangyingji"></i>
     <span>放映厅</span>
   </a>
   <a href="">
     <i class="iconfont icon-wode"></i>
     <span>未登录</span>
   </a>
 </footer>
</body>
<body>
 <header>
   <div class="status-bar">
     <div class="input-search">
       <i class="iconfont icon-sousuo"></i>
       <p>习言道｜高标准、高质量建设雄安新区</p>
     </div>
     <div class="publish">
       <i class="iconfont icon-fabu"></i>
       <span>发布</span>
     </div>
   </div>
   <div class="tabbar">
     <a href="">关注</a>
     <a href="" class="active">推荐</a>
     <a href="">热榜</a>
     <a href="">发现</a>
     <a href="">防疫</a>
     <a href="">视频</a>
   </div>
 </header>
 <main>
   <!-- 此处省略 -->
 </main>
 <footer>
   <a href="" class="active">
     <i class="iconfont icon-shouye"></i>
     <span>首页</span>
   </a>
   <a href="">
     <i class="iconfont icon-tubiao_shipin"></i>
     <span>西瓜视频</span>
   </a>
   <a href="">
     <i class="iconfont icon-fangyingji"></i>
     <span>放映厅</span>
   </a>
   <a href="">
     <i class="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;
background-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: #d4544c;
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
```css
footer {
  padding: 0.05rem 0;
  display: flex;
  place-content: space-around;
  position: relative;
}
footer a {
  display: grid;
  place-items: center;
  font-size: x-small;
}
footer a .iconfont {
  font-size: x-large;
}
footer::after {
  content: "";
  height: 0.02rem;
  width: 100%;
  background-color: #e8e8e8;
  position: absolute;
  top: 0;
}

相关文章