Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿今日头条部分代码
Blogger Information
Blog 10
fans 0
comment 0
visits 3553
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
210 people have browsed it

这是一个仿今日头条的项目
我们把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>

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