Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿今日头条首页
Blogger Information
Blog 11
fans 0
comment 0
visits 3150
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
342 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="static/css/index.css">
  9.     <link rel="stylesheet" href="static/font_icon/iconfont.css">
  10. </head>
  11. <body>
  12.     <div class="header">
  13.         <!-- 搜索框 -->
  14.         <div class="search">
  15.             <div class="keys">
  16.                 <span class="iconfont icon-fangdajing"></span>
  17.                 <span>习近平主席访问俄罗斯</span>
  18.             </div>
  19.             <!-- 发布按钮 -->
  20.             <div class="publish">
  21.                 <span class="iconfont icon-jiahao"></span>
  22.                 <span>发布</span>
  23.             </div>
  24.         </div>
  25.         <!-- 导航条 -->
  26.         <div class="navs">
  27.             <a href="" class="active">推荐</a>
  28.             <a href="">科技</a>
  29.             <a href="">军事</a>
  30.             <a href="">两性</a>
  31.             <a href="">明星</a>
  32.         </div>
  33.     </div>
  35.     <!-- 主体 -->
  36.     <div class="main">
  37.         <div class="rec-list">
  38.             <a href="" class="item">
  39.                 <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  40.                 <div class="desc">
  41.                     <span class="tag">置顶</span>
  42.                     <div class="other">
  43.                         <span>已关注</span>
  44.                         <span>澎湃新闻</span>
  45.                         <span>122条评论</span>
  46.                     </div>
  47.                 </div>
  48.             </a>
  49.             <a href="" class="item">
  50.                 <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  51.                 <div class="desc">
  52.                     <span class="tag">置顶</span>
  53.                     <div class="other">
  54.                         <span>已关注</span>
  55.                         <span>澎湃新闻</span>
  56.                         <span>122条评论</span>
  57.                     </div>
  58.                 </div>
  59.             </a>
  60.             <a href="" class="item">
  61.                 <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  62.                 <div class="desc">
  63.                     <span class="tag">置顶</span>
  64.                     <div class="other">
  65.                         <span>已关注</span>
  66.                         <span>澎湃新闻</span>
  67.                         <span>122条评论</span>
  68.                     </div>
  69.                 </div>
  70.             </a>
  71.             <a href="" class="item">
  72.                 <span class="title">习近平主席访俄第一天,这些信息值得关注</span>
  73.                 <div class="desc">
  74.                     <span class="tag">置顶</span>
  75.                     <div class="other">
  76.                         <span>已关注</span>
  77.                         <span>澎湃新闻</span>
  78.                         <span>122条评论</span>
  79.                     </div>
  80.                 </div>
  81.             </a>
  82.         </div>
  83.         <!-- 左文本+右图片 -->
  84.         <div class="img1-list">
  85.             <a href="" class="item">
  86.                 <!-- 文本 -->
  87.                 <div class="left">
  88.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  89.                     <div class="desc">
  90.                         <span class="author">魂淡君</span>
  91.                         <span class="replay-num">98条评价</span>
  92.                         <span class="time">1小时前</span>
  93.                     </div>
  94.                 </div>
  95.                 <!-- 图片 -->
  96.                 <img src="static/images/1.jpeg" class="right">
  97.             </a>
  98.             <a href="" class="item">
  99.                 <!-- 文本 -->
  100.                 <div class="left">
  101.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  102.                     <div class="desc">
  103.                         <span class="author">魂淡君</span>
  104.                         <span class="replay-num">98条评价</span>
  105.                         <span class="time">1小时前</span>
  106.                     </div>
  107.                 </div>
  108.                 <!-- 图片 -->
  109.                 <img src="static/images/1.jpeg" class="right">
  110.             </a>
  111.             <a href="" class="item">
  112.                 <!-- 文本 -->
  113.                 <div class="left">
  114.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  115.                     <div class="desc">
  116.                         <span class="author">魂淡君</span>
  117.                         <span class="replay-num">98条评价</span>
  118.                         <span class="time">1小时前</span>
  119.                     </div>
  120.                 </div>
  121.                 <!-- 图片 -->
  122.                 <img src="static/images/1.jpeg" class="right">
  123.             </a>
  124.             <a href="" class="item">
  125.                 <!-- 文本 -->
  126.                 <div class="left">
  127.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  128.                     <div class="desc">
  129.                         <span class="author">魂淡君</span>
  130.                         <span class="replay-num">98条评价</span>
  131.                         <span class="time">1小时前</span>
  132.                     </div>
  133.                 </div>
  134.                 <!-- 图片 -->
  135.                 <img src="static/images/1.jpeg" class="right">
  136.             </a>
  137.             <a href="" class="item">
  138.                 <!-- 文本 -->
  139.                 <div class="left">
  140.                     <div class="title">还派什么大使,美图晾了我们14个月,是时候反击了</div>
  141.                     <div class="desc">
  142.                         <span class="author">魂淡君</span>
  143.                         <span class="replay-num">98条评价</span>
  144.                         <span class="time">1小时前</span>
  145.                     </div>
  146.                 </div>
  147.                 <!-- 图片 -->
  148.                 <img src="static/images/1.jpeg" class="right">
  149.             </a>
  150.         </div>
  152.         <div class="img2-list">
  153.             <a href="" class="item">
  154.                 <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇</div>
  155.                 <div class="imgs">
  156.                     <img src="static/images/2.jpeg">
  157.                     <img src="static/images/2.jpeg">
  158.                     <img src="static/images/2.jpeg">
  159.                 </div>
  160.             </a>
  161.             <a href="" class="item">
  162.                 <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇</div>
  163.                 <div class="imgs">
  164.                     <img src="static/images/2.jpeg">
  165.                     <img src="static/images/2.jpeg">
  166.                     <img src="static/images/2.jpeg">
  167.                 </div>
  168.             </a>
  169.             <a href="" class="item">
  170.                 <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇</div>
  171.                 <div class="imgs">
  172.                     <img src="static/images/2.jpeg">
  173.                     <img src="static/images/2.jpeg">
  174.                     <img src="static/images/2.jpeg">
  175.                 </div>
  176.             </a>
  177.             <a href="" class="item">
  178.                 <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇</div>
  179.                 <div class="imgs">
  180.                     <img src="static/images/2.jpeg">
  181.                     <img src="static/images/2.jpeg">
  182.                     <img src="static/images/2.jpeg">
  183.                 </div>
  184.             </a>
  185.         </div>
  187.         <!-- 上面文本，下面视频 -->
  188.         <div class="video-list">
  189.             <a href="" class="item">
  190.                 <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  191.                 <video src="static/images/v1.mp4" controls></video>
  192.             </a>
  193.             <a href="" class="item">
  194.                 <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  195.                 <video src="static/images/v1.mp4" controls></video>
  196.             </a>
  197.             <a href="" class="item">
  198.                 <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  199.                 <video src="static/images/v1.mp4" controls></video>
  200.             </a>
  201.             <a href="" class="item">
  202.                 <div class="title">一生必须要去的5个地方,不要等老了才想来了,就太迟了,带上爱人现在出发</div>
  203.                 <video src="static/images/v1.mp4" controls></video>
  204.             </a>
  205.         </div>
  206.     </div>
  208.     <!-- 页脚部分 -->
  209.     <div class="footer">
  210.         <a href="" class="active">
  211.             <span class="iconfont icon-shouye"></span>
  212.             <span>首页</span>
  213.         </a>
  214.         <a href="" class="active">
  215.             <span class="iconfont icon-24gl-play"></span>
  216.             <span>视频</span>
  217.         </a>
  218.         <a href="" class="active">
  219.             <span class="iconfont icon-yonghuguanli_huaban"></span>
  220.             <span>图片</span>
  221.         </a>
  222.         <a href="" class="active">
  223.             <span class="iconfont icon-yonghu"></span>
  224.             <span>我的</span>
  225.         </a>
  226.     </div>
  227. </body>
  228. </html>
  230. css部分
  231. /* 通用设置 */
  232. * {
  233.     margin: 0;
  234.     padding: 0;
  235.     box-sizing: border-box;
  236. }
  237. a {
  238.  text-decoration: none;
  239.  color: #555;
  240. }
  241. html{
  242.     font-size: calc(100vw / 3.75);
  243. }
  244. body{
  245.     font-size: 0.16rem;
  246.     color: #333;
  247.     background-color: #fff;
  248.     margin: 0 auto;
  249.     padding: 0 0.15rem;
  250. }
  251. body img,
  252. body video{
  253.     width: 100%;
  254. }
  255. @media (max-width:320px) {
  256.     html{
  257.         font-size: 85px;
  258.     }
  259. }
  260. @media (min-width:640px) {
  261.     html{
  262.         font-size: 170px;
  263.     }
  264. }
  266. /* 头部 */
  267. .header {
  268.     /* 使用固定定位 */
  269.     position: fixed;
  270.     left: 0;
  271.     top: 0;
  272.     right: 0;
  273.     border-bottom: 1px solid #ccc;
  274.     /* 确保永远在前面 */
  275.     z-index: 9999;
  276.     background-color: #fff;
  277. }
  278. /* 搜索框 */
  279. .header .search{
  280.     background-color: red;
  281.     padding: 0.08rem 0.15rem;
  282.     /* 左面是输入框,右面是发布按钮,使用grid */
  283.     display: grid;
  284.     grid-template-columns: 1fr 0.5rem;
  285. }
  286. /* 关键字 */
  287. .header .search .keys{
  288.     background-color: #fff;
  289.     border-radius: 1.5rem;
  290.     display: flex;
  291.     place-items: center;
  292.     padding-left: 0.1rem;
  293. }
  294. /* 发布按钮 */
  295. .header .publish{
  296.     color: white;
  297.     display: grid;
  298.     place-items: center;
  299. }
  300. /* 导航条 */
  301. .header .navs{
  302.     display: flex;
  303.     place-content: space-around;
  304.     /* padding: 0.1rem 0 0.5rem; */
  305. }
  306. /* 首个选中 */
  307. .header .navs a.active{
  308.     color: red;
  309. }
  310. /* 选中后下方红条 */
  311. .header .navs a{
  312.     position: relative;
  313. }
  314. .header .navs a.active::after{
  315.     content: '';
  316.     position: absolute;
  317.     left: 0;
  318.     width: 0.3rem;
  319.     height: 0.03rem;
  320.     bottom: -0.04rem;
  321.     background-color: red;
  322. }
  324. /* **********主体部分 ********************/
  325. .main{
  326.     min-height: 2000px;
  327.     position: relative;
  328.     top: 0.8rem;
  329.     padding-bottom: 0.6rem;
  330. }
  331. /* 文本和标签 */
  332. .main .rec-list .item{
  333.     display: block;
  334.     margin-top: 0.1rem;
  335. }
  336. .main .rec-list .item .desc{
  337.     display: flex;
  338.     font-size: xx-small;
  339.     gap: 0.1rem;
  340. }
  341. /* 标签 */
  342. .main .rec-list .item .desc .tag{
  343.     color: red;
  344. }
  345. .main .rec-list .item .desc .other{
  346.     color: #ccc;
  347. }
  348. /* 左文本和右图片 */
  349. .main .img1-list .item{
  350.     margin-top: 0.1rem;
  351.     display: grid;
  352.     grid-template-columns: 1fr 1.3rem;
  353.     gap: 0.2rem;
  354. }
  355. .main .img1-list .item .left{
  356.     display: grid;
  357.     place-content: space-between;
  358. }
  359. .main .img1-list .item .left .desc{
  360.     font-size: xx-small;
  361.     color: #ccc;
  362. }
  363. /* 上面文本和下面图片 */
  364. .main .img2-list .item{
  365.     display: block;
  366.     margin-top: 0.1rem;
  367. }
  368. .main .img2-list .item .imgs{
  369.     display: grid;
  370.     grid-template-columns: repeat(3,1fr);
  371.     gap: 0.05rem;
  372. }
  373. /* 视频部分 */
  374. .main .video-list .item{
  375.     display: block;
  376.     margin-top: 0.1rem;
  377. }
  379. /***************** 底部 ****************/
  380. .footer{
  381.     position: fixed;
  382.     left: 0;
  383.     right: 0;
  384.     bottom: 0;
  385.     background-color: #efefef;
  386.     display: flex;
  387.     place-content: space-around;
  388. }
  389. .footer a{
  390.     display: grid;
  391.     place-items: center;
  392.     font-size: x-small;
  393. }
  394. .footer a .iconfont{
  395.     font-size: xx-small;
  396. }
  397. /* 首个选中 */
  398. .footer a .active{
  399.     color: red;
  400. }

效果图

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