仿写课堂的"仿头条"首页.

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

通过3月21晚的实战学习,熟悉了手机端页面的简单布局,按朱老师的实例,制作了一个手机端的”仿头条”首页.

html代码
  1.    /*导入css文件*/
  2.    <link rel="stylesheet" href="static/css/index.css">
  3.    /*代码主体*/
  4.    <!-- 页眉 -->
  5.     <div class="header">
  6.         <div class="search">
  7.             <div class="keywords">  
  8.                 <a href="">
  9.                     <span class="iconfont  icon-fangdajing"></span>
  10.                     <span>习近平:中俄双边合作领域不断扩大</span>
  11.                 </a>
  12.             </div>
  13.             <div class="publish">   
  14.             <a href="">
  15.                 <span class="iconfont icon-fabu"></span>
  16.                 <span class="fabu">发布</span>  
  17.             </a>
  18.             </div>
  19.         </div>
  20.         <nav>
  21.             <a href="" class="active">推荐</a>
  22.             <a href="">热榜</a>
  23.             <a href="">军事</a>
  24.             <a href="">科技</a>
  25.             <a href="">发现</a>
  26.             <a href="">视频</a>
  27.         </nav>
  28.     </div>
  29.     <!-- 主体 -->
  30.     <div class="main">
  31.         <!-- 上纯文本 + 标签 -->
  32.         <div class="rec-list">
  33.            <div class="item">
  34.               <span class="title"><a href="#">习近平会见俄罗斯总理米舒斯京从北京到莫斯科</a></span>
  35.               <div class="desc">
  36.                 <span class="tag">置顶</span>
  37.                 <span class="other">新华社  3098条评论</span>
  38.               </div>
  39.            </div>
  40.         </div>
  41.         <div class="rec-list">
  42.             <div class="item">
  43.                <span class="title">习近平会见俄罗斯总理米舒斯京从北京到莫斯科</span>
  44.                <div class="desc">
  45.                  <span class="tag">置顶</span>
  46.                  <span class="other">新华社</span>
  47.                  <span class="other">3098条评论</span>
  48.                </div>
  49.             </div>
  50.          </div>
  51.         <!-- 上文字 + 下3张图片新闻 -->
  52.         <div class="img1-list">
  53.             <div class="item">
  54.                 <!-- 上面文字 -->
  55.                 <div class="top">未婚不婚者立遗嘱数量首公布 近2成指定朋友等继承</div>
  56.                 <!-- 下面是图片 -->
  57.                 <div class="bottom">
  58.                     <img src="static/images/1.jpeg" alt="">
  59.                     <img src="static/images/1.jpeg" alt="">
  60.                     <img src="static/images/1.jpeg" alt="">
  61.                 </div>
  62.                 <div class="other">
  63.                     <span>新闻源</span>
  64.                     <span>32560条评论</span>
  65.                     <span>3天前</span>
  66.                 </div>
  67.             </div>
  68.         </div>
  69.         <div class="img1-list">
  70.             <div class="item">
  71.                 <!-- 上面文字 -->
  72.                 <div class="top">未婚不婚者立遗嘱数量首公布 近2成指定朋友等继承</div>
  73.                 <!-- 下面是图片 -->
  74.                 <div class="bottom">
  75.                     <img src="static/images/1.jpeg" alt="">
  76.                     <img src="static/images/1.jpeg" alt="">
  77.                     <img src="static/images/1.jpeg" alt="">
  78.                 </div>
  79.                 <div class="other">
  80.                     <span>新闻源</span>
  81.                     <span>32560条评论</span>
  82.                     <span>3天前</span>
  83.                 </div>
  84.             </div>
  85.         </div>
  86.         <!-- 左边文字 + 右边图片 -->
  87.         <div class="img2-list">
  88.             <div class="item">
  89.                 <div class="left">
  90.                     <p>3月20日至3月22日，A股ChatGPT概念持续活跃，但多家借着ChatGPT概念的东风股价飙升。</p>
  91.                     <div class="other">
  92.                         <span>新闻源</span>
  93.                         <span>32560条评论</span>
  94.                         <span>3天前</span>
  95.                     </div>
  96.                 </div>
  97.                 <div class="right">
  98.                     <img src="static/images/2.jpeg" alt="">
  99.                 </div>
  100.             </div>
  101.         </div>
  102.         <div class="img2-list">
  103.             <div class="item">
  104.                 <div class="left">
  105.                     <p>3月20日至3月22日，A股ChatGPT概念持续活跃，但多家借着ChatGPT概念的东风股价飙升。</p>
  106.                     <div class="other">
  107.                         <span>新闻源</span>
  108.                         <span>32560条评论</span>
  109.                         <span>3天前</span>
  110.                     </div>
  111.                 </div>
  112.                 <div class="right">
  113.                     <img src="static/images/2.jpeg" alt="">
  114.                 </div>
  115.             </div>
  116.         </div>
  117.         <!-- 上文字 + 下视频 -->
  118.         <div class="video-list">
  119.             <div class="item">
  120.                 <div class="top">梁朝伟夫妇看展被偶遇，刘嘉玲穿百褶裙秀美腿，梁朝伟抿嘴好害羞
  121.                 </div>
  122.                 <div class="bottom">
  123.                     <video src="static/video/v1.mp4" controls></video>
  124.                     <div class="other">
  125.                         <span>新闻源</span>
  126.                         <span>32560条评论</span>
  127.                         <span>3天前</span>
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.         <div class="video-list">
  133.             <div class="item">
  134.                 <div class="top">梁朝伟夫妇看展被偶遇，刘嘉玲穿百褶裙秀美腿，梁朝伟抿嘴好害羞
  135.                 </div>
  136.                 <div class="bottom">
  137.                     <video src="static/video/v1.mp4" controls></video>
  138.                     <div class="other">
  139.                         <span>新闻源</span>
  140.                         <span>32560条评论</span>
  141.                         <span>3天前</span>
  142.                     </div>
  143.                 </div>
  144.             </div>
  145.         </div>
  146.     </div>
  147.     <!-- 页脚 -->
  148.     <div class="footer">
  149.         <a href="" class="shouye active">
  150.             <span class="iconfont icon-shouye"></span>
  151.             <span>首页</span>
  152.         </a>
  153.         <a href="" class="shipin">
  154.             <span class="iconfont icon-shipin"></span>
  155.             <span>视频</span>
  156.         </a>
  157.         <a href="" class="shangcheng">
  158.             <span class="iconfont icon-dianpu"></span>
  159.             <span>商城</span>
  160.         </a>
  161.         <a href="" class="my">
  162.             <span class="iconfont icon-wode"></span>
  163.             <span>我的</span>
  164.         </a>
  165.     </div>
css代码在index.css中导入其他模块的css文件
  1. /* 导入css模块 */
  2. @import url(reset.css);
  3. @import url(header.css);
  4. @import url(main.css);
  5. @import url(footer.css);
  6. @import url(../font_icon/iconfont.css);
reset.css
  1. /* 重置css */
  2. *{
  3.     padding: 0px;
  4.     margin: 0px;
  5.     box-sizing: border-box;
  6. }
  7. html{
  8.     /* rem随着设备宽度自适应 */
  9.     font-size: calc(100vw / 3.75);
  10. }
  11. a{
  12.     text-decoration: none;
  13.     color:#555;
  14. }
  15. body{
  16.     /* 移动端禁止使用px */
  17.     /* font-size: 设置为0.16rem=.16px; */
  18.     font-size: 0.16rem;
  19.     color: #333;
  20.     background-color: #fff;
  21.     margin: 0 auto;
  22.     padding: 0 0.15rem;
  23. }
  24. /* 外部资源自适应 */
  25. body img,body video{
  26.     width: 100%;
  27. }
header.css
  1. .header{
  2.     position: fixed;
  3.     top:0;
  4.     left:0;
  5.     right:0;
  6.     z-index: 888;
  7.     background-color: #fff;
  8. }
  9. .search{
  10.     background-color: red;
  11.     padding: 10px 20px 10px;
  12.     display: grid;
  13.     grid-template-columns: 1fr 40px;
  14.     place-items: center;
  16. }
  17. .keywords{
  18.     background-color: #fff;
  19.     padding: 10px;
  20.     border-radius: 120px;
  21. }
  22. .header .search .publish a{
  23.    display: grid;
  24.    /* place-content: center; */ 
  25.    place-items: center; 
  26.    color: #fff;
  27.    padding: 0.05rem 0;
  28. }
  29. .header .search .publish .icon-fabu{
  30.     font-size: large;
  31.     padding-bottom: 0.05rem;
  32. }
  33. .header .search .publish .fabu{
  34.     font-size: small;
  35. }
  36. .header nav{
  37.     display: flex;
  38.     place-content: space-evenly;
  39.     padding: 0.1rem 0;
  40.     border-bottom: 0.01rem solid #ccc;
  41. }
  42. .header nav a:hover{
  43.     cursor: pointer;
  44. }
  45. .header nav a.active{
  46.     color: red;
  47.     position: relative;
  49. }
  50. /* 激活状态下才会显示的伪元素 */
  51. /* 伪元素,html中看不到的,通过css添加的 */
  52. /* 伪元素的前面使用双冒号,::after,::before */
  53. .header nav a.active::after{
  54.     content: '';
  55.     position: absolute;
  56.     width: 0.3rem;
  57.     height:0.03rem;
  58.    background-color:red;
  59.    left: 0;
  60.    bottom: -0.05rem;
  61. }
main.css
  1. .main{
  2.     /* outline: 1px solid #000; */
  3.     min-height: 1000px;
  4.     /* 相对定位,以自己为参照物 */
  5.     position: relative;
  6.     top: 1.2rem;
  7.     padding-bottom: 1rem;
  8.     /* margin-bottom: 1rem; */
  9. }
  10. /* 上文本+下标签 */
  11. .rec-list .item{
  12.     margin-top: 0.05rem;
  13. }
  14. .rec-list .desc {
  15.     margin-top: 0.05rem;
  16.     font-size: x-small;
  18. }
  19. .rec-list .desc .tag{
  20.     color: red;
  21. }
  22. .rec-list .desc .other{
  23.     color: #bbb;
  24.     padding-left: 0.1rem;
  25. }
  26. /* 上文本+下面3张图片 */
  27. .img1-list{
  28.     margin: 0.1rem 0;
  29. }
  30. .main .img1-list .item .top{
  31.     margin-bottom: 0.05rem;
  32. }
  33. .main .img1-list .item .bottom{
  34.     display: grid;
  35.     grid-template-columns: repeat(3 , 1fr);
  36.     gap: .1rem;
  37. }
  38. .main .img1-list .item .other{
  39.     font-size: x-small;
  40.     margin-top: 0.05rem;
  41.     color: #bbb;
  42. }
  43. .main .img1-list .item .other span{
  44.     padding: 0.05rem;
  45. }
  46. .main .img2-list .item{
  47.     display: grid;
  48.     grid-template-columns: 1fr 1.5rem;
  49. }
  50. .main .img2-list .item .other{
  51.     padding-top: 0.05rem;
  52.     font-size: x-small;
  53.     color: #ccc;
  54. }
  55. .main .img2-list .item .other span{
  56.     padding-left: 0.05rem;
  57. }
  58. .main .video-list .item .top{
  59.     margin:0.1rem 0;
  60. }
  61. .main .video-list .item  .bottom .other{
  62.     color: #bbb;
  63.     font-size: x-small;
  64. }
  65. .main .video-list .item  .bottom .other span{
  66.     padding-left: 0.05rem;
  67. }
footer.css
  1. .footer{
  2.     position: fixed;
  3.     bottom: 0;
  4.     left: 0;
  5.     right: 0;
  6.     padding: 0.05rem 0.2rem;
  7.     display: flex;
  8.     place-content: space-between;
  9.     background-color: #efefef;
  10. }
  11. .footer a{
  12.     /* 因为网格布局默认是一列多行,所以设置成grid后两个元素分上下排列 */
  13.     display: grid;
  14.     place-items: center;
  15.     font-size: x-small;
  16. }
  17. .footer .iconfont{
  18.     font-size: xlarge;
  19. }
  20. .footer a.active{
  21.     color: red;
  22. }
执行效果如下:

【文章转自印度服务器 http://www.558idc.com/yd.html提供，感恩】
更多阅读