Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > [实践] 使用flex弹性布局仿写苏宁易购移动端首页
Blogger Information
Blog 10
fans 0
comment 0
visits 9535
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
[实践] 使用flex弹性布局仿写苏宁易购移动端首页
Tyrrell
Original
930 people have browsed it

使用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. }

仿写效果：



Correcting teacher：天蓬老师天蓬老师

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