search

博客列表 >仿今日头条首页

仿今日头条首页

一个好人
一个好人原创
2023年03月22日 16:47:22641浏览
  1. <div class="header">
  2.         <div class="search">
  3.             <div class="keys">
  4.                 <span class="iconfont icon-sousuo">&nbsp;&nbsp;</span>
  5.                 <span>习主席访问俄罗斯</span>
  6.             </div>
  7.             <div class="publish">
  8.                 <span class="iconfont icon-jiahao"></span>
  9.                 <span class="desc">发布</span>
  10.             </div>
  11.         </div>
  12.         <div class="navs0">
  13.             <div class="navs">
  14.                 <a href="">关注</a>
  15.                 <a href="" class="active">推荐</a>
  16.                 <a href="">热榜</a>
  17.                 <a href="">发现</a>
  18.                 <a href="">视频</a>
  19.                 <a href="">防疫</a>
  20.                 <a href="">图片</a>
  21.             </div>
  22.             <span class="iconfont icon-zhuanfa"></span>
  23.         </div>
  24.     </div>
  26.     <div class="main">
  27.         <div class="rec-list">
  28.             <a href="" class="item">
  29.                 <span class="title">习近平同俄罗斯总统普京举行会谈</span>
  30.                 <div class="desc">
  31.                     <span class="tag">置顶</span>
  32.                     <div class="other">
  33.                         <span>已关注</span>
  34.                         <span>央视新闻</span>
  35.                         <span>235条评论</span>
  36.                     </div>
  37.                 </div>
  38.             </a>
  39.         </div>
  40.         <div class="img1-list">
  41.             <a href="" class="item">
  42.                 <div class="left">
  43.                     <div class="title">泽连斯基恐提前逃亡！4万乌军陷入包围圈</div>
  44.                     <div class="desc">
  45.                         <span class="author">航航观历史</span>
  46.                         <span class="replay-num">100条评论</span>
  47.                         <span class="time">17小时前</span>
  48.                     </div>
  49.                 </div>
  50.                 <img src="static/images/img1.png" class="right">
  51.             </a>
  52.         </div>
  54.         <div class="img2-list">
  55.             <a href="" class="item">
  56.                 <div class="title">泽连斯基恐提前逃亡！4万乌军陷入包围圈</div>
  57.                 <div class="imgs">
  58.                     <img src="static/images/img1.png" alt="">
  59.                     <img src="static/images/img1.png" alt="">
  60.                     <img src="static/images/img1.png" alt="">
  61.                 </div>
  62.             </a>
  63.         </div>
  64.         <div class="video-list">
  65.             <a href="" class="item">
  66.                 <div class="title">古筝：小雨沙沙</div>
  67.                 <video src="static/video/video.mp4" controls></video>
  68.             </a>
  69.         </div>
  70.     </div>
  72.     <div class="footer">
  73.         <a href="" class="active">
  74.             <span class="iconfont icon-zhuye"></span>
  75.             <span>首页</span>
  76.         </a>
  77.         <a href="" class="">
  78.             <span class="iconfont icon-24gl-play"></span>
  79.             <span>视频</span>
  80.         </a>
  81.         <a href="" class="">
  82.             <span class="iconfont icon-liuyan"></span>
  83.             <span>留言</span>
  84.         </a>
  85.         <a href="" class="">
  86.             <span class="iconfont icon-yonghu"></span>
  87.             <span>登录</span>
  88.         </a>
  89.     </div>
  1. 页眉
  2. .header{
  3.     position: fixed;
  4.     left: 0;
  5.     right: 0;
  6.     top: 0;
  7.     border-bottom: 1px solid #efefef;
  8. /* 确保页眉在顶层 */
  9.     z-index: 888;
  10.     background-color: #fff;
  11. }
  13. .header .search{
  14.     background-color: rgb(247, 73, 73);
  15.     padding: 0.08rem 0rem 0.08rem 0.15rem;
  16.     display: grid;
  17.     grid-template-columns: 1fr 0.6rem;
  18. }
  20. .header .search .keys{
  21.     height: 0.45rem;
  22.     background-color: #fff;
  23.     border-radius: 1.5rem;
  24.     padding-left: 0.18rem;
  25.     display: flex;
  26.     place-items: center;
  27. }
  28. .header .search .publish{
  29.     display: grid;
  30.     place-items: center;
  31.     color: #fff;
  32.     font-size: 0.01rem;
  33. }
  34. .icon-jiahao{
  35.     font-size: 0.25rem !important
  36. }
  38. .header .navs0{
  39.     display: grid;
  40.     grid-template-columns: 1fr 0.2rem;
  41.     padding: 0.05rem 0.02rem 0.25rem;
  42. }
  43. .header .navs0 .navs{
  44.     display: flex;
  45.     place-content: space-around;
  46.     position: fixed;
  47.     left: 0;
  48.     right: 0;
  49. }
  50. .header .navs0 .icon-zhuanfa{
  51.     display: flex;
  52.     position: fixed;
  53.     right: 0;
  54.     /* padding-right: 0.1rem; */
  55.     width: 0.35rem;
  56.     height: 0.25rem;
  57.     background-color: #fff;
  58.     place-content: center;
  59.     color: #ccc;
  60. }
  61. .header .navs0 .navs a.active{
  62.     color: rgb(247, 73, 73);
  63. }
  64. .header .navs0 .navs a{
  65.     position: relative;
  66. }
  67. .header .navs0 .navs a.active::after{
  68.     content: '';
  69.     position: absolute;
  70.     left: 0.05rem;
  71.     width: 0.22rem;
  72.     height: 0.03rem;
  73.     bottom: -0.04rem;
  74.     background-color: rgb(247, 73, 73);
  75. }
  77. .footer {
  78.     position: fixed;
  79.     left: 0;
  80.     bottom: 0;
  81.     right: 0;
  82.     background-color: #efefef;
  83.     display: flex;
  84.     place-content: space-around;
  85. }
  86. 页脚
  87. .footer a{
  88.     display: grid;
  89.     place-items: center;
  91.     font-size: 0.12rem;
  92. }
  93. .footer a .iconfont{
  94.     font-size: 0.25rem;
  95. }
  96. .footer a.active{
  97.     color: rgb(247, 73, 73);
  98. }
  99. main部分：
  100. .main{
  101.     min-height: 2000px;
  102.     /* border: 1px solid #000; */
  104.     position: relative;
  105.     top: 1rem;
  106.     /* padding-bottom: 0.6rem; */
  107. }
  108. .main .rec-list .item{
  109.     display: block;
  110.     margin-top: 0.05rem;
  111. }
  112. .main .rec-list .item .desc{
  113.     display: flex;
  114.     font-size: 0.12rem;
  115.     gap: 0.1rem;
  116. }
  117. .main .rec-list .item .desc .tag{
  118.     color: rgb(247, 73, 73);
  119. }
  120. .main .rec-list .item .desc .other{
  121.     color: #ccc;
  122.     gap: 0.1rem;
  123. }
  124. /* 左边文字+右边图片 */
  125. .main .img1-list .item{
  126.     display: grid;
  127.     grid-template-columns: 1fr 1.3rem;
  128.     gap: 0.2rem;
  129.     margin-top: 0.1rem;
  130. }
  131. .main .img1-list .item .left{
  132.     display: grid;
  133.     place-content: space-between;
  134. }
  136. .main .img1-list .item .left .desc{
  137.     font-size: 0.12rem;
  138.     color: #ccc;
  139. }
  141. /* 文本+三张图片 */
  142. .main .img2-list .item{
  143.     display: block;
  144.     margin-top: 0.1rem;
  145. }
  147. .main .img2-list .item .imgs{
  148.     display: grid;
  149.     grid-template-columns: repeat(3, 1fr);
  150.     gap: 0.05rem;
  151. }
  153. /* 文字+视频 */
  154. .main .video-list .item{
  155.     display: block;
  156.     margin-top: 0.1rem;
  157. }
  158. 重置部分：
  159. *{
  160.     margin: 0;
  161.     padding: 0;
  162.     box-sizing: border-box;
  163. }
  164. a{
  165.     text-decoration: none;
  166.     color: #555;
  167. }
  168. /* 适应设备宽度 */
  169. html{
  170.     font-size: calc(100vw / 3.75);
  171. }
  172. /* 字号重置 */
  173. body{
  174.     font-size: 0.16rem;
  176.     color: #333;
  178.     background-color: #fff;
  179.     /* 页面水平居中 */
  180.     margin: 0 auto;
  181.     padding: 0 0.15rem;
  182. }
  184. /* 外部资源适应屏幕宽度 */
  185. body img,
  186. body video{
  187.     width: 100%;
  188. }
  190. /* 媒体查询 可选 */
  191. @media (max-width:320px) {
  192.     html{
  193.         font-size: 85px;
  194.     }
  195. }
  196. @media (min-width:640px) {
  197.     html{
  198.         font-size: 170px;
  199.     }
  200. }

效果图1
效果图2

总结：

完成了一个比较完整的手机网页，边看视频边做还好，如果完全自己去恐怕要很久，导航栏的右边悬浮了一个小图标，老师没介绍，自己弄做了好久。

上一条：官方QQ/微信交流群（php中文网）下一条：仿头条首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多