search

博客列表 >[实践] 使用flex弹性布局仿写苏宁易购移动端首页

[实践] 使用flex弹性布局仿写苏宁易购移动端首页

Tyrrell
Tyrrell原创
2021年04月05日 01:27:19927浏览

使用flex弹性布局仿写苏宁易购移动端首页

  • index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>苏宁易购(suning.com)</title>
  8.     <link rel="stylesheet" href="css/css Pre format.css" />
  9.     <link rel="stylesheet" href="css/index.css" />
  10.     <link rel="stylesheet" href="icon-font/iconfont.css" />
  11.     <link rel="stylesheet" href="css/header.css" />
  12.     <link rel="stylesheet" href="css/main.css" />
  13.     <link rel="stylesheet" href="css/footer.css" />
  14.   </head>
  15.   <body>
  16.     <header>
  17.       <div class="ss">
  18.         <a href=""><img src="images/ss/fl.png" alt="" class="ss_1" /></a>
  19.         <a href=""><img src="images/ss/161734725987957105.gif" alt="" class="ss_2" /></a>
  20.         <a href=""><img src="images/ss/dl.png" alt="" class="ss_3" /></a>
  21.       </div>
  22.     </header>
  23.     <main>
  24.       <!-- 搜索 -->
  25.       <div class="magnifier">
  26.         <div>
  27.           <p class="iconfont icon-search"></p>
  28.           <input type="text" value="家电生活，踏青春游记" />
  29.         </div>
  30.       </div>
  31.       <!-- banner图 -->
  32.       <div class="banner">
  33.         <img src="images/ss/7859b5310cdf431497a9b9fee0110d8a.png" alt="" />
  34.       </div>
  35.       <!-- 秒杀区 -->
  36.       <div class="ms">
  37.         <ul>
  38.           <li>
  39.             <a href=""> <img src="images/ms/ms_1.png  " alt="" /> </a>
  40.             <a href="">苏宁秒杀</a>
  41.           </li>
  42.           <li>
  43.             <a href=""> <img src="images/ms/ms_2.png  " alt="" /> </a>
  44.             <a href="">苏宁超市</a>
  45.           </li>
  46.           <li>
  47.             <a href=""> <img src="images/ms/ms_3.png  " alt="" /> </a>
  48.             <a href="">苏宁拼购</a>
  49.           </li>
  50.           <li>
  51.             <a href=""> <img src="images/ms/ms_4.png  " alt="" /> </a>
  52.             <a href="">手机数码</a>
  53.           </li>
  54.           <li>
  55.             <a href=""> <img src="images/ms/ms_5.png  " alt="" /> </a>
  56.             <a href="">苏宁家电</a>
  57.           </li>
  58.           <li>
  59.             <a href=""> <img src="images/ms/ms_6.png  " alt="" /> </a>
  60.             <a href="">免费水果</a>
  61.           </li>
  62.           <li>
  63.             <a href=""> <img src="images/ms/ms_7.png  " alt="" /> </a>
  64.             <a href="">super会员</a>
  65.           </li>
  66.           <li>
  67.             <a href=""> <img src="images/ms/ms_8.png  " alt="" /> </a>
  68.             <a href="">签到有礼</a>
  69.           </li>
  70.           <li>
  71.             <a href=""> <img src="images/ms/ms_9.png" alt="" /> </a>
  72.             <a href="">领券中心</a>
  73.           </li>
  74.           <li>
  75.             <a href=""> <img src="images/ms/ms_10.png" alt="" /> </a>
  76.             <a href="">更多频道</a>
  77.           </li>
  78.         </ul>
  79.       </div>
  80.       <!-- 大礼包 -->
  81.       <div class="dlb">
  82.         <a href="" class="dlb_1"><img src="images/dlb/dlb_1.png" alt="" /> </a>
  83.         <a href="" class="dlb_2"><img src="images/dlb/dlb_2.gif" alt="" /></a>
  84.         <a href="" class="dlb_3"><img src="images/dlb/dlb_3.gif" alt="" /></a>
  85.       </div>
  86.       <div class="xh">
  87.         <div class="cnxh"><img src="images/xh/cnxh.webp" alt="" /></div>
  88.         <div>
  89.           <ul>
  90.             <li>
  91.               <img src="images/xh/xh_01.webp" alt="" />
  92.               <p>小米米家扫地机器人智能家用全自动扫拖一体机激光...</p>
  93.               <div>
  94.                 <img src="images/xh/zy.png" alt="" />
  95.                 <span>大聚惠</span>
  96.               </div>
  97.               <div>
  98.                 <span>1499</span>
  99.                 <span>1900+评价</span>
  100.               </div>
  101.             </li>
  102.             <li>
  103.               <img src="images/xh/xh_02.webp" alt="" />
  104.               <p>苏宁级物益生菌酵素樱花漱口水500ml 清新口气除口...</p>
  105.               <div>
  106.                 <img src="images/xh/zy.png" alt="" />
  107.                 <span>大聚惠</span>
  108.               </div>
  109.               <div>
  110.                 <span>￥15.8</span>
  111.                 <span>1900+评价</span>
  112.               </div>
  113.             </li>
  114.             <li>
  115.               <img src="images/xh/xh_03.webp" alt="" />
  116.               <p>富林(FOLEE)制氧机(器械) SFK-3 便携式氧气....带鱼 段海鲜水产</p>
  117.               <div>
  118.                 <img src="images/xh/zy.png" alt="" />
  119.                 <span>大聚惠</span>
  120.               </div>
  121.               <div>
  122.                 <span>￥14.9</span>
  123.                 <span>1900+评价</span>
  124.               </div>
  125.             </li>
  126.             <li>
  127.               <img src="images/xh/xh_04.webp" alt="" />
  128.               <p>鲜美来东海带鱼600g新鲜带鱼段海鲜水产</p>
  129.               <div>
  130.                 <img src="images/xh/zy.png" alt="" />
  131.                 <span>大聚惠</span>
  132.               </div>
  133.               <div>
  134.                 <span>￥15.9</span>
  135.                 <span>1900+评价</span>
  136.               </div>
  137.             </li>
  138.             <li>
  139.               <img src="images/xh/xh_05.webp" alt="" />
  140.               <p>海信65英寸65A52F悬浮全面屏全金属机身电视</p>
  141.               <div>
  142.                 <img src="images/xh/zy.png" alt="" />
  143.                 <span>大聚惠</span>
  144.               </div>
  145.               <div>
  146.                 <span>￥3699</span>
  147.                 <span>1900+评价</span>
  148.               </div>
  149.             </li>
  150.             <li>
  151.               <img src="images/xh/xh_06.webp" alt="" />
  152.               <p>Ferrero费列罗意大利进口费列罗榛果金莎巧克力T3...</p>
  153.               <div>
  154.                 <img src="images/xh/zy.png" alt="" />
  155.                 <span>大聚惠</span>
  156.               </div>
  157.               <div>
  158.                 <span>￥21.9</span>
  159.                 <span>1900+评价</span>
  160.               </div>
  161.             </li>
  162.           </ul>
  163.         </div>
  164.       </div>
  165.       <div class="snlogo">
  166.         <img src="images/xh/snlogo.png" alt="" />
  167.       </div>
  168.       <div class="bg"></div>
  169.     </main>
  171.     <footer>
  172.       <div>
  173.         <div class="iconfont icon-home"></div>
  174.         <!-- <a href="">首页</a> -->
  175.         <p>首页</p>
  176.       </div>
  177.       <div>
  178.         <div class="iconfont icon-layers"></div>
  179.         <!-- <a href="">分类</a> -->
  180.         <p>分类</p>
  181.       </div>
  182.       <div>
  183.         <div class="iconfont icon-kehuguanli"></div>
  184.         <!-- <a href="">惊喜</a> -->
  185.         <p>排行榜</p>
  186.       </div>
  187.       <div>
  188.         <div class="iconfont icon-shopping-cart"></div>
  189.         <!-- <a href="">购物车</a> -->
  190.         <p>购物车</p>
  191.       </div>
  192.       <div>
  193.         <div class="iconfont icon-user"></div>
  194.         <!-- <a href="">未登录</a> -->
  195.         <p>我的易购</p>
  196.       </div>
  197.     </footer>
  198.   </body>
  199. </html>
  • css Pre format.css
  1. /* css预格式化 */
  2. * {
  3.   padding: 0;
  4.   margin: 0;
  5.   box-sizing: border-box;
  6. }
  7. html {
  8.   font-size: 10px;
  9.   font-family: Microsoft YaHei;
  10. }
  11. body {
  12.   font-size: 1.6rem;
  13.   /* width: 100vw;
  14.   height: 100vh; */
  15. }
  16. /* 去掉标签前面的小点 */
  17. li {
  18.   list-style: none;
  19. }
  20. /* 去掉a链接的下划线 */
  21. /* 给a链接一个灰色(默认蓝色太难看) */
  22. a {
  23.   text-decoration: none;
  24.   color: #7b7b7b;
  25. }
  26. /* 媒体查询，根据屏幕的宽度不同，从而选择不同的样式规则 */
  27. /* 当html到480px的时候 字体变为12px */
  28. @media screen and (min-width: 480px) {
  29.   html {
  30.     font-size: 12px;
  31.   }
  32. }
  33. /* 当html到640px的时候 字体变为14px */
  34. @media screen and (min-width: 640px) {
  35.   html {
  36.     font-size: 14px;
  37.   }
  38. }
  39. /* 当html到720px的时候 字体变为16px */
  40. @media screen and (min-width: 720px) {
  41.   html {
  42.     font-size: 16px;
  43.   }
  44. }
  • footer.css
  1. footer {
  2.   display: flex;
  3.   /* 设置分散对齐 */
  4.   /* justify-content: center; */
  5. }
  6. /* flex支持嵌套布局 */
  7. /* flex的项目可以又是一个flex容器 */
  8. footer > div {
  9.   display: flex;
  10.   /* 水平居中 */
  11.   justify-content: center;
  12.   /* 垂直居中 */
  13.   align-items: center;
  14.   /* 设置排列方式 */
  15.   flex-flow: column nowrap;
  16. }
  17. /* 给icon图标设置大小 */
  18. footer div .iconfont {
  19.   font-size: 2rem;
  20. }
  21. /* 设置字体大小 */
  22. footer div p {
  23.   font-size: 1rem;
  24. }
  25. footer div div {
  26.   margin: 0 3rem;
  27. }
  • header.css
  1. header .ss {
  2.   display: flex;
  3.   align-items: center;
  4.   padding: 0 2rem;
  5. }
  6. .ss a .ss_1,
  7. .ss a .ss_3 {
  8.   margin: 0.5rem 0;
  9.   width: 2.5rem;
  10. }
  11. .ss a .ss_1 {
  12.   margin-right: 5rem;
  13. }
  15. .ss a .ss_2 {
  16.   width: 23rem;
  17.   margin-right: 5rem;
  18. }
  • index.css
  1. /* 头部 */
  2. header {
  3.   background-color: #ffdb47;
  4.   position: fixed;
  5.   top: 0;
  6.   left: 0;
  7.   right: 0;
  8.   height: 6.5vh;
  9. }
  11. /* 主体 */
  12. main {
  13.   /* background-color: #f7f7f7; */
  14.   background-color: #f7f7f7;
  15.   position: absolute;
  16.   top: 6.5vh;
  17.   left: 0;
  18.   right: 0;
  19.   bottom: 8vh;
  20.   min-height: 85.5vh;
  21. }
  22. /* 页尾 */
  23. footer {
  24.   height: 8vh;
  25.   border-top: #ccc 1px solid;
  26.   position: fixed;
  27.   bottom: 0;
  28.   left: 0;
  29.   right: 0;
  30. }

-main.css

  1. main .magnifier {
  2.   display: flex;
  3.   background-color: #ffdb47;
  4.   justify-content: center;
  5.   z-index: 100;
  6.   padding: 1rem 0;
  7. }
  8. main .magnifier div {
  9.   background-color: #fff;
  10.   width: 95vw;
  11.   border-radius: 2rem;
  12.   display: flex;
  13.   padding: 0.8rem 1rem;
  14.   align-items: center;
  15. }
  16. .magnifier div p {
  17.   font-size: 1.9rem;
  18.   color: #ccc;
  19.   padding-right: 0.5rem;
  20. }
  21. .magnifier div input {
  22.   border: none;
  23.   font-size: 1.7rem;
  24.   color: #666;
  25. }
  27. .banner {
  28.   display: flex;
  29.   justify-content: center;
  30.   background: linear-gradient(#ffdb47, #f7f7f7 12rem);
  31. }
  32. .banner img {
  33.   height: 14rem;
  34.   border-radius: 1rem;
  35. }
  36. .ms ul {
  37.   display: flex;
  38.   flex-flow: row wrap;
  39.   justify-content: space-evenly;
  40.   padding: 1rem;
  41. }
  42. .ms ul li {
  43.   flex: 1 1 20%;
  44.   display: flex;
  45.   flex-flow: column nowrap;
  46.   justify-content: center;
  47.   align-items: center;
  48. }
  49. .ms ul li a {
  50.   font-size: 1.2rem;
  51. }
  52. .ms ul li a img {
  53.   height: 5rem;
  54.   width: 5rem;
  55. }
  56. .dlb {
  57.   display: flex;
  58.   padding: 2rem 0;
  59. }
  60. .dlb a {
  61.   margin: 0 0.1rem;
  62. }
  63. .dlb .dlb_1 img {
  64.   width: 50vw;
  65.   height: 18vh;
  66. }
  67. .dlb .dlb_2 img,
  68. .dlb .dlb_3 img {
  69.   width: 25vw;
  70.   height: 18vh;
  71. }
  73. .xh {
  74.   background-color: #f7f7f7;
  75. }
  76. .xh .cnxh {
  77.   display: flex;
  78.   justify-content: center;
  79.   align-items: center;
  80. }
  81. .xh .cnxh img {
  82.   width: 50rem;
  83. }
  84. .xh div ul {
  85.   display: flex;
  86.   flex-flow: row wrap;
  87.   justify-content: center;
  89.   /* align-items: center; */
  90. }
  91. .xh div ul li {
  92.   margin: 0.5rem;
  93.   display: flex;
  94.   flex-flow: column wrap;
  95.   background-color: #ffffff;
  96.   width: 45vw;
  97. }
  99. .xh div ul li img {
  100.   border-radius: 1rem;
  101.   width: 45vw;
  102. }
  104. .xh div ul li P {
  105.   font-size: 1.5rem;
  106.   padding: 0.5rem;
  107. }
  109. .xh div ul li div {
  110.   display: flex;
  111.   align-items: center;
  112.   flex-flow: row nowrap;
  113.   margin-bottom: 1rem;
  114. }
  116. .xh div ul li div:first-of-type img {
  117.   margin: 0rem 0.5rem;
  118.   width: 3rem;
  119.   height: 1.5rem;
  120. }
  121. .xh div ul li div:first-of-type span {
  122.   font-size: 1rem;
  123.   padding: 0 0.5rem;
  124.   border: solid 1px #000;
  125.   border-radius: 0.5rem;
  126. }
  127. .xh div ul li div:last-of-type {
  128.   position: absolute;
  129. }
  130. .xh div ul li div:last-of-type span:first-of-type {
  131.   font-weight: bolder;
  132.   font-size: 1.7rem;
  133.   color: red;
  134.   padding: 0 0.5rem;
  135. }
  137. .xh div ul li div:last-of-type span:last-of-type {
  138.   font-size: 1rem;
  139.   color: #999;
  140. }
  142. .snlogo img {
  143.   width: 100%;
  144. }
  145. .bg {
  146.   height: 8vh;
  147. }

仿写效果：



上一条：求解磁盘结构损坏且无法读取咋找回???下一条：手机端首页仿写
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多