亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 10
粉絲 0
評論 0
訪問量 12219
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
[實踐] 使用flex彈性布局仿寫蘇寧易購移動端首頁
Tyrrell
原創(chuàng)
1108人瀏覽過

使用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.       <!-- 秒殺區(qū) -->
  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="">手機(jī)數(shù)碼</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="">免費(fèi)水果</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="">領(lǐng)券中心</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>小米米家掃地機(jī)器人智能家用全自動掃拖一體機(jī)激光...</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)制氧機(jī)(器械) SFK-3 便攜式氧氣....帶魚 段海鮮水產(chǎn)</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新鮮帶魚段海鮮水產(chǎn)</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懸浮全面屏全金屬機(jī)身電視</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費(fèi)列羅意大利進(jìn)口費(fèi)列羅榛果金莎巧克力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預(yù)格式化 */
  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. /* 去掉標(biāo)簽前面的小點 */
  17. li {
  18.   list-style: none;
  19. }
  20. /* 去掉a鏈接的下劃線 */
  21. /* 給a鏈接一個灰色(默認(rèn)藍(lán)色太難看) */
  22. a {
  23.   text-decoration: none;
  24.   color: #7b7b7b;
  25. }
  26. /* 媒體查詢，根據(jù)屏幕的寬度不同，從而選擇不同的樣式規(guī)則 */
  27. /* 當(dāng)html到480px的時候 字體變?yōu)?2px */
  28. @media screen and (min-width: 480px) {
  29.   html {
  30.     font-size: 12px;
  31.   }
  32. }
  33. /* 當(dāng)html到640px的時候 字體變?yōu)?4px */
  34. @media screen and (min-width: 640px) {
  35.   html {
  36.     font-size: 14px;
  37.   }
  38. }
  39. /* 當(dāng)html到720px的時候 字體變?yōu)?6px */
  40. @media screen and (min-width: 720px) {
  41.   html {
  42.     font-size: 16px;
  43.   }
  44. }
  • footer.css
  1. footer {
  2.   display: flex;
  3.   /* 設(shè)置分散對齊 */
  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.   /* 設(shè)置排列方式 */
  15.   flex-flow: column nowrap;
  16. }
  17. /* 給icon圖標(biāo)設(shè)置大小 */
  18. footer div .iconfont {
  19.   font-size: 2rem;
  20. }
  21. /* 設(shè)置字體大小 */
  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. }

仿寫效果：



批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：現(xiàn)在看到這些頁面,是不是有思路了, 不怕了
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)