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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

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

  • 首先对整体页面进行高度设置以及网格划分。
    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. }
【转自：美国多ip服务器 http://www.558idc.com/mgzq.html 欢迎留下您的宝贵建议】
更多阅读