仿头条首页

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
程序实现
  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. }
实现效果

仿头条首页

【文章由韩国大带宽服务器 http://www.558idc.com/lg.html处的文章,转载请说明出处】
更多阅读