search

博客列表 >仿今日头条首页

仿今日头条首页

汉邦
汉邦原创
2023年03月24日 12:50:53289浏览

首页整体分为三个部分：页面，主体，页脚.

页眉代码：

  1. 分别引用外部CSS文件：

    1. <link rel="stylesheet" href="static/css/reset.css">
    2.  <link rel="stylesheet" href="static/css/header.css">
    3.  <link rel="stylesheet" href="static/css/footer.css">
    4.  <link rel="stylesheet" href="static/css/main.css">
    5.  <link rel="stylesheet" href="static/font_icon/iconfont.css">

    其中 reset.css 初始化代码如下：

    1. .footer {
    2.  /* 绝对定位 */
    3.  position: fixed;
    4.  left: 0;
    5.  right: 0;
    6.  bottom: 0;
    7.  background-color: #efefef;
    8.  display: flex;
    9.  /* 分散对齐 */
    10.  place-content: space-around;
    11.  z-index: 999;
    12. }
    13. .footer a {
    14.  /* 垂直排列，居中对齐 */
    15.  display: grid;
    16.  place-items: center;
    17.  font-size: x-small;
    18. }
    19. /* 图标放大 */
    20. .footer a .iconfont {
    21.  font-size: x-large;
    22. }
    23. /* 激活样式 */
    24. .footer a.active {
    25.  color: red;
    26. }

  2. 页眉代码：

    1. <!-- 页眉   -->
    2. <div class="header">
    3.  <!-- 1.搜索框 -->
    4.  <div class="search">
    5.  <!-- 1.1关键字输入框 left -->
    6.  <div class="keys">
    7.      <!-- 放大镜：字体图标    -->
    8.      <span class="iconfont icon-fangdajing"></span>
    9.      <!-- 关键字-预置的 -->  
    10.      <span>“天网2023”行动启动</span>
    11.  </div>
    13.  <!-- 1.2 发布按钮，right     -->
    14.  <div class="publish">
    15.      <!-- 字体图标 -->
    16.      <span class="iconfont icon-jiahao"></span>
    17.      <span>发布</span>   
    18.  </div>
    19.  </div>
    20.  <!-- 2.导航组 -->
    21.  <div class="navs">
    22.    <a href="">关注</a>
    23.    <a href="" class="active">推荐</a>
    24.      <!-- 高亮 -->
    25.      <a href="">热榜</a>
    26.      <a href="">发现</a>
    27.      <a href="">视频</a> 
    28.      <a href="">防疫</a>
    29.      <div class="key">
    30.      <span class="iconfont icon-zhuanfa"></span>
    31.      </div>
    32.  </div>
    33. </div>

css代码：

  1. .header {
  2.     /* 固定定位： */
  3.     position: fixed;
  4.     left: 0;
  5.     top: 0;
  6.     right: 0;
  7.     /* 给导航栏设置下划线 */
  8.     border-bottom: 1px solid #ccc;
  9.     /* 设置层级，确保永远在最前面，不会被覆盖 */
  10.     z-index: 999;
  11.     background-color: #fff;
  12. }
  14. /* 搜索栏 */
  15. .header .search {
  16.     background-color: red;
  17.     /* 布局格式 */
  18.     display: grid;
  19.     grid-template-columns: 1fr 0.5rem;
  20.     /* 内边距 */
  21.     padding: 0.1rem 0.13rem;
  22. }
  24. /* 搜索框 */
  25. .header .search .keys {
  26.     background-color: #fff;
  27.     border-radius: 1.5rem;
  28.     display: flex;
  29.     place-items: center;
  30.     padding-left: 0.15rem;
  31. }
  33. /* 发布按钮 */
  34. .header .search .publish {
  35.     color: #fff;
  36.     display: grid;
  37.     place-items: center;
  38.     font-size: large;
  39. }
  40. /* 字体图标加号放大 */
  41. .header .search .publish .icon-jiahao {
  42.     font-size: x-large;
  43. }
  44. /* 列表 */
  45. .header .navs {
  46.     /* 弹性布局 */
  47.     display: flex;
  48.     /* 分散对齐 */
  49.     place-content: space-around;
  50.     /* 给导航栏下划线加间距 下边0.05rem*/
  51.     padding: 0.1rem 0 0.05rem;
  52. }
  54. .header .navs .key .icon_zhuanfa {
  55.     display: flex;
  56.     position: fixed;
  57.     font-size: xx-large;
  58.     right: 0;
  59.     width: 0.35rem;
  60.     height: 0.25rem;
  61.     place-content: center;
  62.     color: #ccc;
  63. }
  65. /* 激活状态 */
  66. .header .navs a.active {
  67.     color: red;
  68. }
  70. /* 添加激活状态下的下划线，利用伪元素 */
  71. /* 伪元素前面使用双冒号：::before/::after */
  72. .header .navs a.active::after {
  73.     content:'';
  74.     /* 绝对定位 */
  75.     position: absolute;
  76.     left: 0;
  77.     width: 0.3rem;
  78.     height: 0.03rem;
  79.     background-color: red;
  80.     bottom: -0.03rem;
  81. }
  83. /* 宿主元素a作为绝对定位的父级 */
  84. .header .navs a {
  85.     position: relative;
  86. }

3.主体代码：

  1. <div class="main">
  2.     <!-- 1.文本+标签 -->
  3.     <div class="rec-list">
  4.       <a href="" class="item">
  5.         <span class="title">中俄元首克里姆林宫会谈侧记</span>
  6.         <div class="desc">
  7.           <span class="tag">置顶</span>
  8.           <div class="other">
  9.             <span>新华网</span>
  10.             <span>1万评论</span>
  11.           </div>
  12.         </div>
  13.       </a>
  14.       <a href="" class="item">
  15.         <span class="title">在推动构建人类命运共同体的大道上前进</span>
  16.         <div class="desc">
  17.           <span class="tag">置顶</span>
  18.           <div class="other">
  19.             <span>人民日报</span>
  20.             <span>1347评论</span>
  21.           </div>
  22.         </div>
  23.       </a>
  24.       <a href="" class="item">
  25.         <span class="title">春天里的中国色，美到惊艳！</span>
  26.         <div class="desc">
  27.           <span class="tag">置顶</span>
  28.           <div class="other">
  29.             <span>人民日报</span>
  30.             <span>1644评论</span>
  31.           </div>
  32.         </div>
  33.       </a>
  34.       <a href="" class="item">
  35.         <span class="title">"美国人要我们跳，咱不仅问'跳多高',还来个后空翻！"</span>
  36.         <div class="desc">  
  37.           <div class="other">
  38.             <span>环球网</span>
  39.             <span>166评论</span>
  40.           </div>
  41.         </div>
  42.       </a>
  43.       <a href="" class="item">
  44.         <span class="title">健康中国|甲流感染期食养建议</span>
  45.         <div class="desc">  
  46.           <div class="other">
  47.             <span>头条专题</span>
  48.           </div>
  49.         </div>
  50.       </a>
  51.     </div>
  52.     <!-- 2.左边文本+右边图片 -->
  53.     <div class="img1-list">
  54.       <a href="" class="item">
  55.       <!-- 标题文本 -->
  56.         <div class="left">
  57.           <div class="title">还派什么大使，美国晾了我们14个月，是时候反击了</div>
  58.           <div class="desc">
  59.             <span class="author">默默读书君</span>
  60.             <span class="replay-num">88条评论</span>
  61.             <span class="time">10小时前</span>
  62.           </div>
  63.         </div>
  64.       <!-- 图片 -->
  65.         <img src="static/images/1.jpeg" class="right"></img>
  66.       </a> 
  67.       <a href="" class="item">
  68.         <!-- 标题文本 -->
  69.           <div class="left">
  70.             <div class="title">还派什么大使，美国晾了我们14个月，是时候反击了</div>
  71.             <div class="desc">
  72.               <span class="author">默默读书君</span>
  73.               <span class="replay-num">88条评论</span>
  74.               <span class="time">10小时前</span>
  75.             </div>
  76.           </div>
  77.         <!-- 图片 -->
  78.           <img src="static/images/1.jpeg" class="right"></img>
  79.         </a> 
  80.         <a href="" class="item">
  81.           <!-- 标题文本 -->
  82.             <div class="left">
  83.               <div class="title">还派什么大使，美国晾了我们14个月，是时候反击了</div>
  84.               <div class="desc">
  85.                 <span class="author">默默读书君</span>
  86.                 <span class="replay-num">88条评论</span>
  87.                 <span class="time">10小时前</span>
  88.               </div>
  89.             </div>
  90.           <!-- 图片 -->
  91.             <img src="static/images/1.jpeg" class="right"></img>
  92.           </a>       
  93.     </div>
  95.     <!-- 3.上面文本+三张图片 -->
  96.     <div class="img2-list">
  97.       <a href="" class="item">
  98.         <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇，将其私自引渡海牙，下场如何？</div>
  99.         <div class="imgs">
  100.           <img src="static/images/2.jpeg" alt="">
  101.           <img src="static/images/2.jpeg" alt="">
  102.           <img src="static/images/2.jpeg" alt="">
  103.         </div>
  104.       </a>
  105.     </div>
  106.   </div>

CSS代码：

  1. .main {
  2.     min-height: 2000px;
  3.     /* border: 1px solid rgb(229, 43, 43); */
  4.     /* 相对定位 */
  5.     position: relative;
  6.     top: 1rem;
  7.     padding-bottom: 0.6rem;
  8. }
  9. /* 下划线 */
  10. .main .rec-list {
  11.     border-bottom: 0.6px solid #ccc;
  12.     padding: 0 0 0.05rem;
  13. }
  14. .main .rec-list .item {
  15.     /* 行内元素转块级元素 */
  16.     display: block;
  17.     margin-top: 0.1rem;
  18. }
  19. .main .rec-list .item .desc {
  20.     display: flex;
  21.     font-size: xx-small;
  22.     gap: 0.1rem;
  23. }
  24. .main .rec-list .item .desc .tag {
  25.     color: red;
  26. }
  27. .main .rec-list .item .desc .other {
  28.     color: #ccc;
  29. }
  30. /* 文本+图片  */
  31. .main .img1-list .item {
  32.     display: grid;
  33.     grid-template-columns: 1fr 1.3rem;
  34.     gap: 0.2rem;
  35.     margin-top: 0.1rem;
  36. }
  37. .main .img1-list .item .left {
  38.     display: grid;
  39.     place-content: space-between;
  40. }
  41. .main .img1-list .item .left .desc {
  42.     color: #ccc;
  43.     font-size: xx-small;
  45. }
  46. /* 上面文本+三张图片 */
  47. .main .img2-list .item .imgs {
  48.     display: grid;
  49.     grid-template-columns: repeat(3,1fr);
  50.     gap:0.05rem;
  51. }

4.页脚

  1. <div class="footer">
  2.     <a href="" class="active">
  3.       <span class="iconfont icon-shouye"></span>
  4.       <span>首页</span>
  5.     </a>
  6.     <a href="">  
  7.       <span class="iconfont icon-24gl-play"></span>
  8.       <span>视频</span>
  9.     </a>
  10.     <a href=""> 
  11.     <span class="iconfont icon-shoucang"></span>
  12.       <span>商城</span>
  13.     </a>
  14.     <a href="">
  15.       <span class="iconfont icon-yonghu"></span>
  16.       <span>我的</span>
  17.     </a>
  18.   </div>

CSS代码：

  1. .footer {
  2.     /* 绝对定位 */
  3.     position: fixed;
  4.     left: 0;
  5.     right: 0;
  6.     bottom: 0;
  7.     background-color: #efefef;
  8.     display: flex;
  9.     /* 分散对齐 */
  10.     place-content: space-around;
  11.     z-index: 999;
  12. }
  13. .footer a {
  14.     /* 垂直排列，居中对齐 */
  15.     display: grid;
  16.     place-items: center;
  17.     font-size: x-small;
  18. }
  19. /* 图标放大 */
  20. .footer a .iconfont {
  21.     font-size: x-large;
  22. }
  23. /* 激活样式 */
  24. .footer a.active {
  25.     color: red;
  26. }

最终效果图：

上一条：JavaScript实例演示：分支与循环结构、解构赋值与应用场景下一条：PHP学习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多