仿今日头条部分代码

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

这是一个仿今日头条的项目
我们把css 进行了模块化
把页面分为了 页眉 主体 页脚
需要注意的是 大型的项目 不能使用@import url(‘reset.css’);的方式引入css
因为@import url(‘reset.css’);方式引入是异步引入 不是同步 异步引入 会 出现加载上的错误 渲染延迟等问题
<link rel="stylesheet" href="./static/css/reset.css">
<link rel="stylesheet" href="./static/css/header.css">
<link rel="stylesheet" href="./static/font/iconfont.css">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3192548_29x74lu5elo.css">
<link rel="stylesheet" href="./static/css/footer.css">
<link rel="stylesheet" href="./static/css/min.css">

  1.     <!-- 页眉 -->
  2. <div class="header">
  3.     <div class="search">
  4.         <div class="keys">
  5.             <span class="iconfont icon-fangdajing"></span>
  6.             <span>习近平访问俄罗斯</span>
  7.         </div>
  8.         <div class="publish">
  9.             <span class="iconfont icon-jiahao"></span>
  10.             <span>发布</span>
  11.         </div>
  12.     </div>
  13.     <div class="nav">
  14.         <a href="" class="active">推荐</a>
  15.         <a href="">科技</a>
  16.         <a href="">数码</a>
  17.         <a href="">军事</a>
  18.         <a href="">科技</a>
  19.     </div>
  20. </div>
  21. <!-- 主体 -->
  22. <div class="main">
  23.     <div class="rec-list">
  24.         <a href="#" class="item">
  25.             <span class="title">习近平访俄罗斯第一天,吃了什么好吃的</span>
  26.         </a>
  27.         <div class="desc">
  28.             <span class="tag">置顶</span>
  29.             <div class="other">
  30.                 <span>已关注</span>
  31.                 <span>央视新闻</span>
  32.                 <span>1899条评论</span>
  33.             </div>
  34.         </div>
  35.     </div>
  36.     <div class="rec-list">
  37.         <a href="#" class="item">
  38.             <span class="title">习近平访俄罗斯第一天,吃了什么好吃的</span>
  39.         </a>
  40.         <div class="desc">
  41.             <span class="tag">置顶</span>
  42.             <div class="other">
  43.                 <span>已关注</span>
  44.                 <span>央视新闻</span>
  45.                 <span>1899条评论</span>
  46.             </div>
  47.         </div>
  48.     </div>
  49.     <div class="rec-list">
  50.         <a href="#" class="item">
  51.             <span class="title">习近平访俄罗斯第一天,吃了什么好吃的</span>
  52.         </a>
  53.         <div class="desc">
  54.             <span class="tag">置顶</span>
  55.             <div class="other">
  56.                 <span>已关注</span>
  57.                 <span>央视新闻</span>
  58.                 <span>1899条评论</span>
  59.             </div>
  60.         </div>
  61.     </div>
  62.     <div class="rec-list">
  63.         <a href="#" class="item">
  64.             <span class="title">习近平访俄罗斯第一天,吃了什么好吃的</span>
  65.         </a>
  66.         <div class="desc">
  67.             <span class="tag">置顶</span>
  68.             <div class="other">
  69.                 <span>已关注</span>
  70.                 <span>央视新闻</span>
  71.                 <span>1899条评论</span>
  72.             </div>
  73.         </div>
  74.     </div>
  75.     <div class="imga-list">
  76.         <a href="" class="item">
  77.             <div class="left">
  78.                 <div class="title">今晚吃什么 今晚吃什么今晚吃什么烤鸡烤鸭</div>
  79.                 <div class="sesc">
  80.                     <span class="author">烤乳猪</span>
  81.                     <span class="replay-num">88条评论</span>
  82.                     <span class="time">10小时前</span>
  83.                 </div>
  84.             </div>
  85.             <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  86.         </a>
  87.         <a href="" class="item">
  88.             <div class="left">
  89.                 <div class="title">今晚吃什么 今晚吃什么今晚吃什么烤鸡烤鸭</div>
  90.                 <div class="sesc">
  91.                     <span class="author">烤乳猪</span>
  92.                     <span class="replay-num">88条评论</span>
  93.                     <span class="time">10小时前</span>
  94.                 </div>
  95.             </div>
  96.             <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  97.         </a>
  98.         <a href="" class="item">
  99.             <div class="left">
  100.                 <div class="title">今晚吃什么 今晚吃什么今晚吃什么烤鸡烤鸭</div>
  101.                 <div class="sesc">
  102.                     <span class="author">烤乳猪</span>
  103.                     <span class="replay-num">88条评论</span>
  104.                     <span class="time">10小时前</span>
  105.                 </div>
  106.             </div>
  107.             <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  108.         </a>
  109.         <a href="" class="item">
  110.             <div class="left">
  111.                 <div class="title">今晚吃什么 今晚吃什么今晚吃什么烤鸡烤鸭</div>
  112.                 <div class="sesc">
  113.                     <span class="author">烤乳猪</span>
  114.                     <span class="replay-num">88条评论</span>
  115.                     <span class="time">10小时前</span>
  116.                 </div>
  117.             </div>
  118.             <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  119.         </a>
  120.     </div>
  121.     <div class="imgato-list">
  122.         <a href="#" class="tiem">
  123.             <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
  124.             <div class="imgs">
  125.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  126.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  127.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  128.             </div>
  129.         </a>
  130.         <a href="#" class="tiem">
  131.             <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
  132.             <div class="imgs">
  133.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  134.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  135.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  136.             </div>
  137.         </a>
  138.         <a href="#" class="tiem">
  139.             <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
  140.             <div class="imgs">
  141.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  142.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  143.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  144.             </div>
  145.         </a>
  146.         <a href="#" class="tiem">
  147.             <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
  148.             <div class="imgs">
  149.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  150.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  151.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  152.             </div>
  153.         </a>
  154.         <a href="#" class="tiem">
  155.             <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
  156.             <div class="imgs">
  157.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  158.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  159.                 <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
  160.             </div>
  161.         </a>
  162.     </div>
  163.     <div class="video-list">
  164.         <a href="#" class="tiem">
  165.             <div class="title"></div>
  166.             <video src=""></video>
  167.         </a>
  168.     </div>
  170. </div>

【本文来源：美国服务器 http://www.558idc.com/mg.html提供，感恩】
更多阅读