Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿头条首页
Blogger Information
Blog 12
fans 0
comment 0
visits 3537
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
仿头条首页
len
Original
270 people have browsed it

程序实现

  1. <div class="header">
  2.       <div class="search">
  3.         <div class="keys">
  4.           <span class="iconfont icon-sousuo"></span>
  5.           <span>搜你想看的</span>
  6.         </div>
  7.         <div class="publish">
  8.           <span class="iconfont icon-fabu"></span>
  9.           <span class="text">发布</span>
  10.         </div>
  11.       </div>
  12.       <div class="navs">
  13.         <a href="">关注</a>
  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.     <!-- main -->
  22.     <div class="main">
  23.       <!-- 置顶 -->
  24.       <div class="top-list">
  25.         <a class="top" href="">
  26.           <div class="title">习近平同俄罗斯总统普京举行会谈</div>
  27.           <div class="comment">
  28.             <span class="highlight">置顶</span>
  29.             <span class="focus">已关注</span>
  30.             <span>·</span>
  31.             <span class="source">央视新闻</span>
  32.             <span class="follow">918评论</span>
  33.           </div>
  34.         </a>
  35.       </div>
  36.       <div class="top-list">
  37.         <a class="top" href="">
  38.           <div class="title">
  39.             习近平同俄罗斯总统普京举行会谈，会见总理米舒斯金
  40.           </div>
  41.           <div class="comment">
  42.             <span class="highlight">置顶</span>
  43.             <span class="focus">已关注</span>
  44.             <span>·</span>
  45.             <span class="source">央视新闻</span>
  46.             <span class="follow">918评论</span>
  47.           </div>
  48.         </a>
  49.       </div>
  51.       <!-- 文字+图片 -->
  52.       <div class="miximg-list">
  53.         <a href="" class="miximg">
  54.           <div class="content">
  55.             <div class="title">
  56.               !总台独家专访｜美海军陆战队前队员：“北溪”被炸无限期损害欧洲工业竞争力
  57.             </div>
  58.             <div class="comment">
  59.               <span class="source">国际在线</span>
  60.               <span class="follow">3评论</span>
  61.               <span class="time">1小时前</span>
  62.             </div>
  63.           </div>
  64.           <div class="imgs">
  65.             <img
  66.               src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/TZ6HuHD8suI5cx~noop.image?x-expires=1994821336&x-signature=946ahttTmcXqDBm1GQ6Jn6MmvnU%3D"
  67.               alt=""
  68.             />
  69.           </div>
  70.         </a>
  71.       </div>
  72.       <div class="miximg-lists">
  73.         <a href="" class="miximg">
  74.           <div class="content">
  75.             <div class="title">
  76.               总台独家专访｜美海军陆战队前队员：“北溪”被炸无限期损害欧洲工业竞争力
  77.             </div>
  78.             <div class="comment">
  79.               <span class="source">国际在线</span>
  80.               <span class="follow">3评论</span>
  81.               <span class="time">1小时前</span>
  82.             </div>
  83.           </div>
  84.           <img
  85.             src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/TZ6HuHD8suI5cx~noop.image?x-expires=1994821336&x-signature=946ahttTmcXqDBm1GQ6Jn6MmvnU%3D"
  86.             alt=""
  87.           />
  88.         </a>
  89.       </div>
  91.       <!-- 文字+视频 -->
  92.       <div class="mixvideo">
  93.         <a class="title" href="">夜线约见：高校开设“考公”培训班？</a>
  94.         <video src="static/images/Qi8_eweH.mp4" controls></video>
  95.         <div class="comment">
  96.           <span class="source">看看新闻</span>
  97.           <span class="follow">3评论</span>
  98.           <span class="time">1小时前</span>
  99.         </div>
  100.       </div>
  101.       <div class="mixvideo">
  102.         <a class="title" href=""
  103.           >聊天记录曝光！“女子杀夫藏尸案”亲人曾给被害人发信息怀疑对方不是本人</a
  104.         >
  105.         <video
  106.           src="https://edge.ivideo.sina.com.cn/50328897401.mp4?KID=sina,viask&Expires=1679587200&ssig=oZGhgzRi0w&reqid="
  107.           controls
  108.         ></video>
  109.         <div class="comment">
  110.           <span class="source">新浪新闻</span>
  111.           <span class="follow">15评论</span>
  112.           <span class="time">1天前</span>
  113.         </div>
  114.       </div>
  115.     </div>
  117.     <!-- footer -->
  118.     <div class="foot">
  119.       <a class="item active" href="">
  120.         <span class="iconfont icon-wenjianliebiao2"></span>
  121.         <span class="icontext">首页</span>
  122.       </a>
  123.       <a class="item" href="">
  124.         <span class="iconfont icon-24gl-play"></span>
  125.         <span class="icontext">视频</span>
  126.       </a>
  127.       <a class="item" href="">
  128.         <span class="iconfont icon-dianshi"></span>
  129.         <span class="icontext">放映厅</span>
  130.       </a>
  131.       <a class="item" href="">
  132.         <span class="iconfont icon-wodewo"></span>
  133.         <span class="icontext">我的</span>
  134.       </a>
  135.     </div>
  1. /* header css */
  2. .header {
  3.   position: fixed;
  4.   /* initial css设置了padding，如下设置可以覆盖掉padding，将背景全覆盖 */
  5.   left: 0;
  6.   top: 0;
  7.   right: 0;
  8.   background-color: red;
  9.   z-index: 999;
  10. }
  11. .header .search {
  12.   /* display: flex;
  13.   place-content: space-between; */
  14.   /* 采用grid布局，可以设置两个单元格宽度 */
  15.   display: grid;
  16.   grid-template-columns: 1fr 0.5rem;
  17.   padding: 0.08rem;
  18. }
  19. .header .search .keys {
  20.   background-color: white;
  21.   color: lightgray;
  22.   border-radius: 2rem;
  23.   padding: 0.1rem 0.2rem;
  24. }
  25. .header .search .publish {
  26.   display: grid;
  27.   place-items: center;
  28.   color: white;
  29. }
  30. .header .navs {
  31.   background-color: white;
  32.   display: flex;
  33.   place-content: space-around;
  34.   padding: 0.05rem 0;
  35.   border-bottom: 0.01rem solid lightgray;
  36. }
  37. .header .navs a {
  38.   position: relative;
  39.   color: gray;
  40. }
  41. .header .navs a.active::after {
  42.   position: absolute;
  43.   content: "";
  44.   /* 用bottom而不是margin-top,bottom为a的相对定位底部，left为a的相对定位左边 */
  45.   bottom: -0.04rem;
  46.   left: 0;
  47.   width: 0.32rem;
  48.   height: 0.03rem;
  49.   background-color: red;
  50. }
  52. /* main css */
  53. .main {
  54.   position: absolute;
  55.   /* left: 0;
  56.   right: 0; */
  57.   top: 1rem;
  58.   padding-bottom: 0.5rem;
  59.   background-color: white;
  60.   /* height: 10rem; */
  61. }
  62. .main .comment {
  63.   /* 下边距 */
  64.   display: flex;
  65.   font-size: small;
  66.   color: lightgray;
  67.   gap: 0.1rem;
  68.   /* color: aqua; */
  69. }
  71. /* 1. 置顶 css */
  72. .main .top-list {
  73.   display: block;
  74.   margin-top: 0.1rem;
  75. }
  76. .main .top-list .top .comment .highlight {
  77.   color: red;
  78. }
  79. .main .miximg-list,
  80. .main .miximg-lists {
  81.   margin-top: 0.1rem;
  82. }
  83. /* 1. 文字+图片flex css */
  84. .main .miximg-list .miximg {
  85.   /* 采用grid布局，实现宽度定制 */
  86.   /* display: grid;
  87.   grid-template-columns: 1fr 1.4rem; */
  88.   display: flex;
  89.   flex-flow: row nowrap;
  90.   /* display: block后，padding设置有效; */
  91.   padding: 0.03rem 0.1rem 0 0;
  92.   gap: 0.03rem;
  93. }
  94. .main .miximg-list .miximg .content {
  95.   /* padding-right: 0.1rem; */
  96.   flex: 100;
  97. }
  98. .main .miximg-list .miximg .imgs {
  99.   /* display: block; */
  100.   /* padding-right: 0.1rem; */
  101.   flex: 1.2rem;
  102.   place-self: center;
  103. }
  105. /* 1. 文字+图片grid css */
  106. .main .miximg-lists .miximg {
  107.   /* 采用grid布局，实现宽度定制 */
  108.   display: grid;
  109.   grid-template-columns: 1fr 1.2rem;
  110.   padding: 0.03rem 0.1rem 0 0;
  111.   gap: 0.03rem;
  112. }
  113. .main .miximg-lists .miximg a img {
  114.   padding-right: 0.1rem;
  115. }
  116. .main .mixvideo {
  117.   margin-top: 0.1rem;
  118.   display: block;
  119.   gap: 0.05rem;
  120.   padding: 0 0.1rem 0 0;
  121. }
  122. /* .main .mixvideo {
  123.   display: block;
  124.   gap: 0.1rem;
  125. } */
  126. /* footer css */
  127. .foot {
  128.   /* 固定页脚 */
  129.   position: fixed;
  130.   /* 固定在底部，左右齐边 */
  131.   left: 0;
  132.   right: 0;
  133.   bottom: 0;
  134.   display: flex;
  135.   place-content: space-around;
  136.   background-color: rgb(253, 252, 252);
  137.   z-index: 888;
  138. }
  139. .foot .item {
  140.   color: gray;
  141. }
  142. .foot .item {
  143.   display: grid;
  144.   /* font-size: normal; */
  145.   /* grid->place-items: 单于格水平对齐; */
  146.   place-items: center;
  147.   /* color: red; */
  148. }
  149. .foot .item .iconfont {
  150.   font-size: 0.2rem;
  151. }
  152. .foot .item .icontext {
  153.   font-size: small;
  154. }
  155. /* 有两个class属性的项目，css中两个class name连写 */
  156. .foot .item.active {
  157.   color: red;
  158. }

实现效果

仿头条首页

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