仿"今日头条"首页

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
仿”今日头条”首页一、页眉结构分析

页面整体分三个部分：页眉、主体、页脚，其中

  • 页眉：固定在顶部，可以采用固定定位来实现
  • 页脚：固定在底部，同样采用固定定位来实现
  • 主体：中间部分，其上部和下部占据了页眉和页脚的文档流位置而被遮挡，可以采用相对定位并设置 top 值解决被页眉遮挡的部分；通过设置 padding-bottom 解决被页脚遮挡的部分
二、HTML 文档结构
  1. <!doctype html>
  2. <html lang="cn-ZH">
  3. <head>
  4.     ......
  5.     <link rel="stylesheet" href="mobile.css">
  6. </head>
  7. <body>
  8. <header>
  9.     <div class="search">
  10.         <div class="keys">
  11.             <span class="iconfont icon-sousuo"></span>
  12.             <span>习近平主席访问俄罗斯</span>
  13.         </div>
  14.         <div class="publish">
  15.             <span class="iconfont icon-jiahao1"></span>
  16.             <span>发布</span>
  17.         </div>
  18.     </div>
  19.     <div class="navs">
  20.         <a href="" class="active">推荐</a>
  21.         <a href="">科技</a>
  22.         <a href="">数码</a>
  23.         <a href="">军事</a>
  24.         <a href="">科技</a>
  25.     </div>
  26. </header>
  28. <main>
  29.     <div class="recList">
  30.         <a href="" class="item">
  31.             <span class="title">习近平主席仿俄第一天，这些信息值得关注</span>
  32.             <div class="desc">
  33.                 <span class="tag">置顶</span>
  34.                 <div class="other">
  35.                     <span>已关注</span>
  36.                     <span>央视新闻</span>
  37.                     <span>1234条评论</span>
  38.                 </div>
  39.             </div>
  40.         </a>
  41.         ......
  42.     </div>
  43.     <div class="img1-list">
  44.         <a href="" class="item">
  45.             <div class="left">
  46.                 <div class="title">中方将会如何推动俄乌实现停火？外交部回应</div>
  47.                 <div class="desc">
  48.                     <span class="author">外交部</span>
  49.                     <span class="reply-num">666条评论</span>
  50.                     <span class="time">10小时前</span>
  51.                 </div>
  52.             </div>
  53.             <img src="img_1.png" alt="" class="right">
  54.         </a>
  55.         ......
  56.     </div>
  57.     <div class="img2-list">
  58.         <a href="" class="item">
  59.             <div class="title">华为何刚揭秘折叠新机黑科技 有三个方面很特殊</div>
  60.             <div class="images">
  61.                 <img src="img_3.png" alt="">
  62.                 <img src="img_2.png" alt="">
  63.                 <img src="img.png" alt="">
  64.             </div>
  65.         </a>
  66.         ......
  67.     </div>
  68. </main>
  70. <footer>
  71.     <a href="" class="active">
  72.         <span class="iconfont icon-zhuye"></span>
  73.         <span>首页</span>
  74.     </a>
  75.     <a href="">
  76.         <span class="iconfont icon-bofang"></span>
  77.         <span>视频</span>
  78.     </a>
  79.     <a href="">
  80.         <span class="iconfont icon-xiaozu"></span>
  81.         <span>小组</span>
  82.     </a>
  83.     <a href="">
  84.         <span class="iconfont icon-31wode"></span>
  85.         <span>我的</span>
  86.     </a>
  87. </footer>
  88. </body>
  89. </html>
三、CSS 样式
  1. @import url(//at.alicdn.com/t/c/font_3961095_nhhkymnxkm.css);
  3. *{ margin: 0; padding: 0; box-sizing: border-box; }
  5. html{ font-size: calc(100vw / 3.75); }
  7. body{ font-size: 0.16rem; }
  9. header{
  10.     position: fixed;
  11.     top: 0;
  12.     left: 0;
  13.     right: 0;
  14.     z-index: 999;
  15.     border-bottom: 1px solid #ccc;
  16.     background-color: white;
  17. }
  19. header .search{
  20.     background: red;
  21.     display: grid;
  22.     grid-template-columns: 1fr 0.5rem;
  23.     padding: 0.08rem 0.15rem;
  24. }
  26. header .search .keys{
  27.     background: #fff;
  28.     border-radius: 0.5rem;
  29.     display: flex;
  30.     place-items: center;
  31. }
  33. header .search .keys .icon-sousuo{
  34.     font-size: 0.16rem;
  35.     padding-left: 0.08rem;
  36. }
  38. header .search .publish{
  39.     color: white;
  40.     place-self: end;
  41.     display: grid;
  42.     place-items: center;
  43. }
  45. header .search .publish .icon-jiahao1{
  46.     font-size: 0.16rem;
  47. }
  49. header .navs{
  50.     display: flex;
  51.     place-content: space-around;
  52.     padding: 0.1rem 0 0.05rem;
  53. }
  55. header .navs a{
  56.     text-decoration: none;
  57.     color: #030303;
  58.     position: relative;
  59. }
  61. header .navs a.active{
  62.     color: red;
  63. }
  65. header .navs a.active::after{
  66.     content: '';
  67.     position: absolute;
  68.     left: 0;
  69.     bottom: -0.04rem;
  70.     width: 0.32rem;
  71.     height: 0.02rem;
  72.     background-color: red;
  73. }
  75. main{
  76.     position: relative;
  77.     top: 0.9rem;
  78.     margin: 0 0.2rem;
  79.     padding-bottom: 0.6rem;
  80. }
  82. main .recList .item{
  83.     text-decoration: none;
  84.     color: #030303;
  85.     display: block;
  86.     margin-top: 0.1rem;
  87. }
  89. main .recList .item .desc{
  90.     font-size: x-small;
  91.     display: flex;
  92.     gap: 0.1rem;
  93. }
  95. main .recList .item .desc .tag{
  96.     color: red;
  97. }
  99. main .recList .item .desc .other{
  100.     color: #ccc;
  101. }
  103. main .img1-list a{
  104.     text-decoration: none;
  105.     color: #030303;
  106.     margin-top: 0.1rem;
  107. }
  109. main .img1-list .item{
  110.     display: grid;
  111.     grid-template-columns: 1fr 1.3rem;
  112.     gap: 0.2rem;
  113. }
  115. main .img1-list .item .left{
  116.     display: grid;
  117.     place-content: space-between;
  118. }
  120. main .img1-list .item .left .desc{
  121.     font-size: x-small;
  122.     color: #ccc;
  123. }
  125. main .img1-list .item .right{
  126.     width: 100%;
  127. }
  129. main .img2-list .item{
  130.     display: block;
  131.     margin: 0.1rem 0;
  132.     text-decoration: none;
  133.     color: #030303;
  135. }
  137. main .img2-list .item .images{
  138.     display: grid;
  139.     grid-template-columns: repeat(3, 1fr);
  140.     gap: 0.05rem;
  141. }
  143. main .img2-list .item .images img{
  144.     width: 100%;
  145. }
  147. footer{
  148.     position: fixed;
  149.     bottom: 0;
  150.     left: 0;
  151.     right: 0;
  152.     display: flex;
  153.     place-content: space-around;
  154.     background-color: #efefef;
  155.     padding: 0.08rem 0;
  156. }
  158. footer a{
  159.     text-decoration: none;
  160.     display: grid;
  161.     place-items: center;
  162.     font-size: x-small;
  163. }
  165. footer a .iconfont{
  166.     font-size: 0.2rem;
  167. }
  169. footer a.active{
  170.     color: red;
  171. }
四、页面显示效果

【文章原创作者：阿里云代理 http://www.558idc.com/aliyun.html处的文章,转载请说明出处】
更多阅读