简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿写今日头条对头部以及底部的实现分析
Blogger Information
Blog 9
fans 0
comment 0
visits 3924
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿写今日头条对头部以及底部的实现分析
靠近你深拥你
Original
254 people have browsed it

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

  • 首先对整体页面进行高度设置以及网格划分。
    1. body {
    2. height: 100vh;
    3. display: grid;
    4. grid-template-rows: 0.88rem 1fr 0.49rem;
    5. }
  • 设置main的css中overflow属性为auto,实现区域部分滚动。

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

  1. html代码
    1. <body>
    2.  <header>
    3.    <div class="status-bar">
    4.      <div class="input-search">
    5.        <i class="iconfont icon-sousuo"></i>
    6.        <p>习言道｜高标准、高质量建设雄安新区</p>
    7.      </div>
    8.      <div class="publish">
    9.        <i class="iconfont icon-fabu"></i>
    10.        <span>发布</span>
    11.      </div>
    12.    </div>
    13.    <div class="tabbar">
    14.      <a href="">关注</a>
    15.      <a href="" class="active">推荐</a>
    16.      <a href="">热榜</a>
    17.      <a href="">发现</a>
    18.      <a href="">防疫</a>
    19.      <a href="">视频</a>
    20.    </div>
    21.  </header>
    22.  <main>
    23.    <!-- 此处省略 -->
    24.  </main>
    25.  <footer>
    26.    <a href="" class="active">
    27.      <i class="iconfont icon-shouye"></i>
    28.      <span>首页</span>
    29.    </a>
    30.    <a href="">
    31.      <i class="iconfont icon-tubiao_shipin"></i>
    32.      <span>西瓜视频</span>
    33.    </a>
    34.    <a href="">
    35.      <i class="iconfont icon-fangyingji"></i>
    36.      <span>放映厅</span>
    37.    </a>
    38.    <a href="">
    39.      <i class="iconfont icon-wode"></i>
    40.      <span>未登录</span>
    41.    </a>
    42.  </footer>
    43. </body>
    44. <body>
    45.  <header>
    46.    <div class="status-bar">
    47.      <div class="input-search">
    48.        <i class="iconfont icon-sousuo"></i>
    49.        <p>习言道｜高标准、高质量建设雄安新区</p>
    50.      </div>
    51.      <div class="publish">
    52.        <i class="iconfont icon-fabu"></i>
    53.        <span>发布</span>
    54.      </div>
    55.    </div>
    56.    <div class="tabbar">
    57.      <a href="">关注</a>
    58.      <a href="" class="active">推荐</a>
    59.      <a href="">热榜</a>
    60.      <a href="">发现</a>
    61.      <a href="">防疫</a>
    62.      <a href="">视频</a>
    63.    </div>
    64.  </header>
    65.  <main>
    66.    <!-- 此处省略 -->
    67.  </main>
    68.  <footer>
    69.    <a href="" class="active">
    70.      <i class="iconfont icon-shouye"></i>
    71.      <span>首页</span>
    72.    </a>
    73.    <a href="">
    74.      <i class="iconfont icon-tubiao_shipin"></i>
    75.      <span>西瓜视频</span>
    76.    </a>
    77.    <a href="">
    78.      <i class="iconfont icon-fangyingji"></i>
    79.      <span>放映厅</span>
    80.    </a>
    81.    <a href="">
    82.      <i class="iconfont icon-wode"></i>
    83.      <span>未登录</span>
    84.    </a>
    85.  </footer>
    86. </body>
  2. 头部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;
}

  1. 3. 底部css
  2. ```css
  3. footer {
  4.   padding: 0.05rem 0;
  5.   display: flex;
  6.   place-content: space-around;
  7.   position: relative;
  8. }
  9. footer a {
  10.   display: grid;
  11.   place-items: center;
  12.   font-size: x-small;
  13. }
  14. footer a .iconfont {
  15.   font-size: x-large;
  16. }
  17. footer::after {
  18.   content: "";
  19.   height: 0.02rem;
  20.   width: 100%;
  21.   background-color: #e8e8e8;
  22.   position: absolute;
  23.   top: 0;
  24. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！