利用flex布局进行仿写移动端苏宁易购首页

  • 完善移动端京东首页 http://easys.ltd/jd/
  • 仿写移动端苏宁首页 http://easys.ltd/sn

首页代码

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>苏宁易购首页</title>
  8.     <link rel="stylesheet" href="css/index.css">
  9. </head>
  11. <body>
  12.     <!-- 下载提示 -->
  13.     <div class="headDown">
  14.         <a href="https://c.m.suning.com/channelwap.htm?appid=1&packnversion=337&channelcode=40156&wap_source=%E6%98%93%E8%B4%AD%E7%AB%99%E5%86%85wap%E9%A6%96%E9%A1%B5%E9%A1%B6%E9%83%A8%E4%B8%8B%E8%BD%BD%E5%A4%B4&wap_medium=40156&wap_content=&wap_term=&wap_campaign=&downflag=0&adTypeCode=1002&adId=https%3A%2F%2Fm.suning.com%2F">
  15.             <span></span>
  16.             <img src="https://image.suning.cn/uimg/cms/img/161275688582112536.jpg" alt="">
  17.         </a>
  18.     </div>
  20.     <!-- 头部菜单 -->
  21.     <div class="sn-nav">
  22.         <div class="nav-bg">
  23.             <img src="https://image1.suning.cn/uimg/cms/img/161243730178975729.png">
  24.         </div>
  25.         <div class="top-type">
  26.             <div class="content-wrap-one">
  27.                 <a href=""><img src="https://image2.suning.cn/uimg/cms/img/157199320847433454.png" alt=""></a>
  28.                 <a href=""><img src="https://image2.suning.cn/uimg/cms/img/161675232602234223.gif" alt=""></a>
  29.                 <a href=""><img src="https://image2.suning.cn/uimg/cms/img/157199321817918653.png" alt=""></a>
  31.             </div>
  32.             <div class="content-wrap-two">
  33.                 <form action="">
  34.                     <span class="iconfont "></span>
  35.                     <input class="searchInput" name="index_none_header_sysc" type="text" placeholder="空调爆款满千减百" autocomplete="off">
  36.                 </form>
  37.             </div>
  39.         </div>
  40.     </div>
  43.     <!-- 主体区域 -->
  44.     <div class="main">
  46.         <!-- 主导航区 -->
  47.         <div class="enter-list">
  48.             <ul class="fix">
  49.                 <li>
  50.                     <a href="#">
  51.                         <img src="https://image2.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile" alt="">
  52.                         <span>苏宁秒杀</span>
  53.                     </a>
  54.                 </li>
  55.                 <li>
  56.                     <a href="#">
  57.                         <img src="https://image1.suning.cn/uimg/cms/img/161293951076282456.png?from=mobile" alt="">
  58.                         <span>苏宁超市</span>
  59.                     </a>
  60.                 </li>
  61.                 <li>
  62.                     <a href="#">
  63.                         <img src="https://image1.suning.cn/uimg/cms/img/161294179334814175.png?from=mobile" alt="">
  64.                         <span>苏宁拼购</span>
  65.                     </a>
  66.                 </li>
  67.                 <li>
  68.                     <a href="#">
  69.                         <img src="https://image2.suning.cn/uimg/cms/img/161293957567317395.png?from=mobile" alt="">
  70.                         <span>手机数码</span>
  71.                     </a>
  72.                 </li>
  73.                 <li>
  74.                     <a href="#">
  75.                         <img src="https://image3.suning.cn/uimg/cms/img/161293958842515136.png?from=mobile" alt="">
  76.                         <span>苏宁家电</span>
  77.                     </a>
  78.                 </li>
  79.                 <li>
  80.                     <a href="#">
  81.                         <img src="https://image1.suning.cn/uimg/cms/img/161293959950045622.png?from=mobile" alt="">
  82.                         <span>免费水果</span>
  83.                     </a>
  84.                 </li>
  85.                 <li>
  86.                     <a href="#">
  87.                         <img src="https://image2.suning.cn/uimg/cms/img/161293961484173843.png?from=mobile" alt="">
  88.                         <span>super会员</span>
  89.                     </a>
  90.                 </li>
  91.                 <li>
  92.                     <a href="#">
  93.                         <img src="https://image1.suning.cn/uimg/cms/img/161293963977525820.png?from=mobile" alt="">
  94.                         <span>签到有礼</span>
  95.                     </a>
  96.                 </li>
  97.                 <li>
  98.                     <a href="#">
  99.                         <img src="https://image2.suning.cn/uimg/cms/img/161293965567020138.png?from=mobile" alt="">
  100.                         <span>领券中心</span>
  101.                     </a>
  102.                 </li>
  103.                 <li>
  104.                     <a href="#">
  105.                         <img src="https://image2.suning.cn/uimg/cms/img/161293968063152286.png?from=mobile" alt="">
  106.                         <span>更多频道</span>
  107.                     </a>
  108.                 </li>
  109.             </ul>
  110.         </div>
  112.         <!-- 新人礼包 -->
  113.         <div class="newImgFloor-content">
  114.             <a href="https://newmem.suning.com/newmem-web/nm/PAGE518604586267131904.htm">
  115.                 <img src="https://image1.suning.cn/uimg/cms/img/160415964665844208.png">
  116.             </a>
  117.             <a href="https://newmem.suning.com/newmem-web/nm/PAGE518604586267131904.htm">
  118.                 <img src="https://image3.suning.cn/uimg/cms/img/160415965447533335.gif">
  119.             </a>
  120.             <a href="https://newmem.suning.com/newmem-web/nm/PAGE518604586267131904.htm">
  121.                 <img src="https://image1.suning.cn/uimg/cms/img/160415966314573447.gif">
  122.             </a>
  123.         </div>
  125.         <!-- 商品列表 -->
  126.         <div class="guessUlike">
  127.             <a class="title" href="https://c.m.suning.com/phbIndex3.html">
  128.                 <img src="https://image3.suning.cn/uimg/cms/img/157793128909842388.png?format=_is_1242w_100h.webp">
  129.             </a>
  130.             <ul>
  131.                 <li class="item">
  132.                     <a href="">
  133.                         <img src="https://imgservice.suning.cn/uimg1/b2c/atmosphere/7rUkk6cK3SCZdMISYTbPSQ.png?format=_is_300w_300h_4e.webp" alt="">
  134.                         <p>伊利 安慕希高端PET酸牛奶原味礼盒装230g*10盒 希腊风味营养学生成人早餐奶酸奶</p>
  135.                         <div class="price">
  136.                             <span class="flag">￥</span>
  137.                             <span class="pre-price">78</span>
  138.                             <span class="price-comments">25万+评价</span>
  139.                         </div>
  140.                     </a>
  141.                 </li>
  142.                 <li class="item">
  143.                     <a href="">
  144.                         <img src="https://imgservice.suning.cn/uimg1/b2c/image/onlVKphMGZSM57CgxO53yg.png?format=_is_300w_300h_4e.webp" alt="">
  145.                         <p>精灵TG_C1D国米定制</p>
  146.                         <div class="price">
  147.                             <span class="flag">￥</span>
  148.                             <span class="pre-price">78</span>
  149.                             <span class="price-comments">25万+评价</span>
  150.                         </div>
  151.                     </a>
  152.                 </li>
  153.                 <li class="item">
  154.                     <a href="">
  155.                         <img src="https://imgservice.suning.cn/uimg1/b2c/image/WHVdqX-XWOrflA07JiOoIw.jpg?format=_is_300w_300h_4e.webp" alt="">
  156.                         <p>中粮 初萃玉米胚芽油5L+400ml 物理压榨 一级桶装玉米油 非转基因 食用油粮油</p>
  157.                         <div class="price">
  158.                             <span class="flag">￥</span>
  159.                             <span class="pre-price">79</span>
  160.                             <span class="price-comments">5.4万+评价</span>
  161.                         </div>
  162.                     </a>
  163.                 </li>
  164.                 <li class="item">
  165.                     <a href="">
  166.                         <img src="https://imgservice.suning.cn/uimg1/b2c/atmosphere/rPmiXMbXtGFr2p4fDG2LcQ.png?format=_is_300w_300h_4e.webp" alt="">
  167.                         <p>雕牌超效加酶洗衣粉3.008kg深层去渍加酶增效无磷环保容量更多生活更美</p>
  168.                         <div class="price">
  169.                             <span class="flag">￥</span>
  170.                             <span class="pre-price">24.8</span>
  171.                             <span class="price-comments">1.6万+评价</span>
  172.                         </div>
  173.                     </a>
  174.                 </li>
  175.                 <li class="item">
  176.                     <a href="">
  177.                         <img src="https://imgservice.suning.cn/uimg1/b2c/atmosphere/7rUkk6cK3SCZdMISYTbPSQ.png?format=_is_300w_300h_4e.webp" alt="">
  178.                         <p>伊利 安慕希高端PET酸牛奶原味礼盒装230g*10盒 希腊风味营养学生成人早餐奶酸奶</p>
  179.                         <div class="price">
  180.                             <span class="flag">￥</span>
  181.                             <span class="pre-price">78</span>
  182.                             <span class="price-comments">25万+评价</span>
  183.                         </div>
  184.                     </a>
  185.                 </li>
  186.                 <li class="item">
  187.                     <a href="">
  188.                         <img src="https://imgservice.suning.cn/uimg1/b2c/image/_Ob1Ce4BkgbQ7Q-sG1sVXQ.jpg?format=_is_300w_300h_4e.webp" alt="">
  189.                         <p>美素佳儿（Friso）儿童配方牛奶粉 4段（3-6岁适用）900克罐装（荷兰原装进口）</p>
  190.                         <div class="price">
  191.                             <span class="flag">￥</span>
  192.                             <span class="pre-price">199</span>
  193.                             <span class="price-comments">12万+评价</span>
  194.                         </div>
  195.                     </a>
  196.                 </li>
  197.                 <li class="item">
  198.                     <a href="">
  199.                         <img src="https://imgservice.suning.cn/uimg1/b2c/image/UuBgXj2X962T1FOLWT8rnA.jpg?format=_is_300w_300h_4e.webp" alt="">
  200.                         <p>苏宁锦鲤礼包AH</p>
  201.                         <div class="price">
  202.                             <span class="flag">￥</span>
  203.                             <span class="pre-price">50</span>
  204.                             <span class="price-comments">30+评价</span>
  205.                         </div>
  206.                     </a>
  207.                 </li>
  208.                 <li class="item">
  209.                     <a href="">
  210.                         <img src="https://uimgproxy.suning.cn/uimg1/pcpv/pcpv/2021/03/27/11/iwoghBannerPicture/YE9dl7Vfhi1616815773607.png?format=_is_300w_300h_4e.webp" alt="">
  211.                         <p>bull公牛开关插座86型G07香槟金墙壁二三插五孔电源插座面板带单控开关空调16A电脑电视插座套餐 错位五孔 G07香槟金</p>
  212.                         <div class="price">
  213.                             <span class="flag">￥</span>
  214.                             <span class="pre-price">13.3</span>
  215.                             <span class="price-comments">1.5万+评价</span>
  216.                         </div>
  217.                     </a>
  218.                 </li>
  219.                 <li class="item">
  220.                     <a href="">
  221.                         <img src="https://uimgproxy.suning.cn/uimg1/pcpv/pcpv/2021/03/27/11/iwoghBannerPicture/bTMkJh8gUP1616816937568.png?format=_is_300w_300h_4e.webp" alt="">
  222.                         <p>伊利 安慕希高端PET酸牛奶原味礼盒装230g*10盒 希腊风味营养学生成人早餐奶酸奶</p>
  223.                         <div class="price">
  224.                             <span class="flag">￥</span>
  225.                             <span class="pre-price">78</span>
  226.                             <span class="price-comments">25万+评价</span>
  227.                         </div>
  228.                     </a>
  229.                 </li>
  230.                 <li class="item">
  231.                     <a href="">
  232.                         <img src="https://imgservice.suning.cn/uimg1/b2c/image/6eHoPUG-NfV4rMf6NpcC2w.jpg?format=_is_300w_300h_4e.webp" alt="">
  233.                         <p>百度小度在家智能屏X8红色8寸高清大屏 影音娱乐智慧屏 向往的生活同款，带屏智能音箱 WiFi/蓝牙音响 平板电脑学习机</p>
  234.                         <div class="price">
  235.                             <span class="flag">￥</span>
  236.                             <span class="pre-price">599</span>
  237.                             <span class="price-comments">600+评价</span>
  238.                         </div>
  239.                     </a>
  240.                 </li>
  241.             </ul>
  242.         </div>
  243.         <img width="100%" src="https://res.suning.cn/project/cmsWeb/suning/wap/v7/images/snlogo.png?from=mobile" alt="">
  244.     </div>
  247.     <!-- 底部提示登录信息 -->
  248.     <div class="to-login">
  249.         <a href="">
  250.             <img src="https://image3.suning.cn/uimg/cms/img/157588645542963955.png">
  251.         </a>
  252.     </div>
  255.     <!-- 底部tab栏 -->
  256.     <div class="footerTab">
  257.         <ul>
  258.             <li class="item">
  259.                 <a href="">
  260.                     <img src="https://image1.suning.cn/uimg/cms/img/157543975265772267.png?from=mobile" alt="">
  261.                     <span>猜你喜欢</span>
  262.                 </a>
  263.             </li>
  264.             <li class="item">
  265.                 <a href="">
  266.                     <img src="https://image1.suning.cn/uimg/cms/img/157562573743964714.png?from=mobile" alt="">
  267.                     <span>分类</span>
  268.                 </a>
  269.             </li>
  270.             <li class="item">
  271.                 <a href="">
  272.                     <img src="https://image2.suning.cn/uimg/cms/img/157543978244974042.png?from=mobile" alt="">
  273.                     <span>排行榜</span>
  274.                 </a>
  275.             </li>
  276.             <li class="item">
  277.                 <a href="">
  278.                     <img src="https://image1.suning.cn/uimg/cms/img/157543979328589256.png?from=mobile" alt="">
  279.                     <span>购物车</span>
  280.                 </a>
  281.             </li>
  282.             <li class="item">
  283.                 <a href="">
  284.                     <img src="https://image2.suning.cn/uimg/cms/img/157543980229048220.png?from=mobile" alt="">
  285.                     <span>我的易购</span>
  286.                 </a>
  287.             </li>
  288.         </ul>
  289.     </div>
  292.     <!-- 侧边漂浮物 -->
  293.     <div class="sidebar">
  294.         <img class="lqwxImg" src="https://image1.suning.cn/uimg/cms/img/160976296805480325.gif" />
  295.         <img class="common-right" src="https://image.suning.cn/uimg/cms/img/160756203309703632.gif" />
  296.     </div>
  297. </body>
  299. </html>

index.css

  1. @import url('reset.css');
  3. /* 下载提示 */
  5. .headDown {
  6.     width: 100%;
  7.     font-size: 0;
  8. }
  10. .headDown img {
  11.     width: 100%;
  12. }
  15. /* 头部菜单 */
  17. .sn-nav {
  18.     height: 3.6rem;
  19.     margin: 0 auto;
  20.     position: relative;
  21.     font-size: 0.48rem;
  22.     line-height: 1.76rem;
  23.     overflow: hidden;
  24. }
  26. .sn-nav .nav-bg {
  27.     position: absolute;
  28.     top: 0;
  29.     left: 0;
  30.     width: 100%;
  31.     height: 3.6rem;
  32.     overflow: hidden;
  33. }
  35. .sn-nav .nav-bg img {
  36.     position: absolute;
  37.     bottom: 0;
  38.     width: 100%;
  39.     height: 5.2rem;
  40. }
  42. .sn-nav .top-type {
  43.     position: relative;
  44.     margin: 0 0.4rem;
  45. }
  47. .sn-nav .top-type .content-wrap-one {
  48.     height: 1.76rem;
  49.     display: flex;
  50.     flex: 1;
  51.     justify-content: space-between;
  52.     align-items: center;
  53. }
  55. .sn-nav .top-type .content-wrap-one img {
  56.     width: 100%;
  57. }
  59. .sn-nav .top-type .content-wrap-one a {
  60.     width: 0.72rem;
  61.     height: 1.52rem;
  62. }
  64. .sn-nav .top-type .content-wrap-one a:nth-of-type(2) {
  65.     flex: 2;
  66.     text-align: center;
  67. }
  69. .sn-nav .top-type .content-wrap-one a:nth-of-type(2) img {
  70.     width: 7.8rem;
  71.     height: 1.52rem;
  72. }
  74. .sn-nav .top-type .content-wrap-two {
  75.     width: 100%;
  76.     height: 1.4rem;
  77.     margin: 0.2rem 0;
  78.     padding: 0 .48rem;
  79.     background-color: #FFF;
  80.     border-radius: 2rem;
  81. }
  83. .sn-nav .top-type .content-wrap-two form {
  84.     height: 1.4rem;
  85.     line-height: 1.4rem;
  86. }
  88. .searchInput {
  89.     margin-left: 1rem;
  90.     border: 0;
  91. }
  94. /* 主体区域 */
  96. .main {
  97.     min-width: 320px;
  98.     max-width: 750px;
  99.     margin: 0 0.4rem 4rem;
  100. }
  103. /* 主导航区  */
  105. .main .enter-list .fix {
  106.     display: flex;
  107.     flex-wrap: wrap;
  108.     justify-content: center;
  109. }
  111. .main .enter-list .fix li {
  112.     flex: 1 1 20%;
  113. }
  115. .main .enter-list .fix li a {
  116.     height: 2.84rem;
  117.     display: flex;
  118.     align-items: center;
  119.     justify-content: flex-end;
  120.     flex-direction: column;
  121. }
  123. .main .enter-list .fix a img {
  124.     width: 1.68rem;
  125.     height: 1.68rem;
  126. }
  128. .main .enter-list .fix a span {
  129.     line-height: .56rem;
  130.     height: .56rem;
  131.     overflow: hidden;
  132.     font-size: .44rem;
  133.     margin-top: .1rem;
  134.     color: #666;
  135.     text-align: center;
  136. }
  139. /* 新人优惠 */
  141. .main .newImgFloor-content {
  142.     height: 4.68rem;
  143.     border-radius: 2rem;
  144.     display: flex;
  145.     justify-content: space-around;
  146.     margin: 0.6rem 0;
  147. }
  149. .main .newImgFloor-content a {
  150.     flex: 1;
  151. }
  153. .main .newImgFloor-content a:first-of-type {
  154.     flex: 2;
  155. }
  157. .main .newImgFloor-content a:nth-of-type(2) {
  158.     margin: 0 0.1rem;
  159. }
  161. .main .newImgFloor-content a img {
  162.     width: 100%;
  163.     height: 4.68rem;
  164. }
  167. /* 商品列表 */
  169. .main .guessUlike a img {
  170.     width: 100%;
  171. }
  173. .main .guessUlike ul {
  174.     font-size: 1rem;
  175.     display: flex;
  176.     /* 允许换行 */
  177.     flex-wrap: wrap;
  178. }
  180. .main .guessUlike .item {
  181.     flex: 1 1 calc(50% - 2rem);
  182.     background-color: #fff;
  183.     overflow: hidden;
  184.     display: flex;
  185.     flex-flow: column nowrap;
  186.     margin-bottom: 0.3rem;
  187.     border-radius: 0.4rem;
  188. }
  190. .main .guessUlike .item:nth-child(even) {
  191.     margin-left: 0.3rem;
  192. }
  194. .main .guessUlike .item img {
  195.     width: 100%;
  196. }
  198. .main .guessUlike .item a p {
  199.     height: 1.6rem;
  200.     font-size: 0.5rem;
  201.     padding: 0 0.2rem;
  202.     font-weight: bolder;
  203.     color: #555;
  204.     line-height: 0.8rem;
  205.     overflow: hidden;
  206.     text-overflow: ellipsis;
  207.     display: -webkit-box;
  208.     -webkit-line-clamp: 2;
  209.     -webkit-box-orient: vertical;
  210. }
  212. .main .guessUlike .item .price {
  213.     display: flex;
  214.     margin: 0.8rem 0.4rem 0.3rem;
  215. }
  217. .main .guessUlike .item .price .flag,
  218. .pre-price {
  219.     font-weight: bolder;
  220.     color: red;
  221.     font-size: 0.66rem;
  222. }
  224. .main .guessUlike .item .price .flag {
  225.     font-size: 0.5rem;
  226. }
  228. .main .guessUlike .item .price .price-comments {
  229.     color: #999999;
  230.     margin-left: .26rem;
  231.     font-weight: normal;
  232.     font-size: .4rem;
  233. }
  236. /* 提示登录框 */
  238. .to-login {
  239.     min-width: 320px;
  240.     max-width: 750px;
  241.     position: fixed;
  242.     bottom: 1.8rem;
  243. }
  245. .to-login img {
  246.     width: 100%;
  247. }
  250. /* 底部tab栏 */
  252. .footerTab {
  253.     min-width: 320px;
  254.     max-width: 750px;
  255.     width: 100%;
  256.     height: 2rem;
  257.     position: fixed;
  258.     bottom: 0;
  259.     margin: 0 auto;
  260.     z-index: 199;
  261.     border-top: 1px solid #EEE;
  262.     background: #FFF;
  263. }
  265. .footerTab ul {
  266.     display: flex;
  267.     align-items: center;
  268.     justify-content: center;
  269. }
  271. .footerTab ul li a {
  272.     display: flex;
  273.     flex-direction: column;
  274.     flex: 1;
  275.     text-align: center;
  276.     width: 3rem;
  277.     height: 2rem;
  278.     background: #fff;
  279. }
  281. .footerTab ul li a img {
  282.     width: .96rem;
  283.     height: .96rem;
  284.     margin: .24rem auto 0
  285. }
  287. .footerTab ul li a span {
  288.     font-size: 0.4rem;
  289.     color: #666;
  290. }
  292. .footerTab ul li:first-child span {
  293.     color: #000000;
  294.     font-weight: bold
  295. }
  298. /* 侧边漂浮物 */
  300. .lqwxImg {
  301.     width: 2rem;
  302.     height: 2rem;
  303.     position: fixed;
  304.     right: 0;
  305.     top: 150px;
  306. }
  308. .common-right {
  309.     width: 2rem;
  310.     height: 2.9rem;
  311.     position: fixed;
  312.     right: 0;
  313.     top: 300px;
  314. }

reset.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. li {
  8.     list-style: none;
  9. }
  11. a {
  12.     color: white;
  13.     text-decoration: none;
  14. }
  16. body {
  17.     min-width: 320px;
  18.     max-width: 750px;
  19.     font-family: Arial, Helvetica, STHeiTi, sans-serif;
  20.     background: #f2f2f2;
  21.     margin: 0 auto;
  22. }
  25. /* 媒体查询 */
  27. @media screen and (min-width:320px) {
  28.     html {
  29.         font-size: 21.33px
  30.     }
  31.     body {
  32.         font-size: 12px
  33.     }
  34. }
  36. @media screen and (min-width:360px) {
  37.     html {
  38.         font-size: 24px
  39.     }
  40.     body {
  41.         font-size: 12px
  42.     }
  43. }
  45. @media screen and (min-width:375px) {
  46.     html {
  47.         font-size: 25px
  48.     }
  49.     body {
  50.         font-size: 12px
  51.     }
  52. }
  54. @media screen and (min-width:384px) {
  55.     html {
  56.         font-size: 25.6px
  57.     }
  58.     body {
  59.         font-size: 14px
  60.     }
  61. }
  63. @media screen and (min-width:400px) {
  64.     html {
  65.         font-size: 26.67px
  66.     }
  67.     body {
  68.         font-size: 14px
  69.     }
  70. }
  72. @media screen and (min-width:414px) {
  73.     html {
  74.         font-size: 27.6px
  75.     }
  76.     body {
  77.         font-size: 14px
  78.     }
  79. }
  81. @media screen and (min-width:424px) {
  82.     html {
  83.         font-size: 28.27px
  84.     }
  85.     body {
  86.         font-size: 14px
  87.     }
  88. }
  90. @media screen and (min-width:480px) {
  91.     html {
  92.         font-size: 32px
  93.     }
  94.     body {
  95.         font-size: 15.36px
  96.     }
  97. }
  99. @media screen and (min-width:540px) {
  100.     html {
  101.         font-size: 36px
  102.     }
  103.     body {
  104.         font-size: 17.28px
  105.     }
  106. }
  108. @media screen and (min-width:720px) {
  109.     html {
  110.         font-size: 48px
  111.     }
  112.     body {
  113.         font-size: 23.04px
  114.     }
  115. }
  117. @media screen and (min-width:750px) {
  118.     html {
  119.         font-size: 50px
  120.     }
  121.     body {
  122.         font-size: 24px
  123.     }
  124. }

仿写实现效果：

通过仿写移动端苏宁易购首页发现，自己很多地方还是不够熟练和了解的，跟着老师进行仿写移动端京东首页很轻松，但到了自己布局的时候，往往出现各种问题，经过大半天的时间总算仿写的差不多，虽然整体页面效果还差的很远。

grid布局的相关属性

CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。

像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。

MDN 网格布局 参考网址

注意：flex布局是将项目全部转换成行内块元素，grid布局是将项目转换成块元素进行的。

1. 术语

序号术语描述
1网格容器dispaly:grid属性定义的元素
2网格项目网格容器的直接子元素
3网格区域由一个或多个单元格组成的矩形区域

2. 常用属性

序号属性描述
1grid-template-columns定义网格轨道中的列宽
2grid-template-rows定义网格轨道中的行高
3gap网格轨道间距
4grid-auto-flow项目在容器中的排列方向
5grid-auto-rows隐式网格单元的行高
6grid-auto-columns隐式网格单元的列宽
7grid-area定义网格区域
8place-items所有项目在网络单元中的对齐方式
9place-self某个项目在网络单元(含网格区域)中的对齐方式
10place-content项目在网格容器中的对齐方式

利用grid网格布局快速实现圣杯布局

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>圣杯布局</title>
  8.     <style>
  9.       body * {
  10.         border: 1px solid #000;
  11.       }
  13.       body {
  14.         display: grid;
  15.         grid-template-columns: 15em 50vw 15em;
  16.         grid-template-rows: 3em 80vh 3em;
  17.         place-content: center;
  18.         gap: 0.5em;
  19.       }
  21.       header,
  22.       footer {
  23.         grid-area: span 1 / span 3;
  24.       }
  25.       main {
  26.         grid-area: 2 /2;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <header>header</header>
  33.     <!-- 圣杯布局要求主体优先渲染 -->
  34.     <main>在CSS布局中有一种经典的布局是圣杯布局</main>
  35.     <aside class="left">left</aside>
  36.     <aside class="right">right</aside>
  38.     <footer>footer</footer>
  39.   </body>
  40. </html>

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>常用术语</title>
  8.     <style>
  9.       /* 1. 网格容器: display:grid*/
  10.       /* 2. 网格项目:容器的子元素 */
  11.       /* 3. 网格单元: 有单元格和网格区域二种表现形式 */
  12.       /* 4. 网格轨道: 有行轨与列轨之分 */
  13.       /* 5. 轨道间距: 轨道间隙,根据轨道类型有: 行轨间隙,列轨间隙 */
  15.       /* flex: 一维布局技术 
  16.       grid: 二维布局技术 */
  18.       .container {
  19.         /* 转为网格容器进行布局 */
  20.         display: grid;
  22.         border: 1px solid #000;
  23.         padding: 0.5em;
  25.         /* 3列,共6个项目 */
  26.         /* 1. 设置轨道的列宽 */
  27.         grid-template-columns: 10em 10em 10em;
  28.         /* grid-template-columns: auto auto auto; */
  30.         /* 2. 设置田轨道的行高 */
  31.         /* 2行, 共6个元素,第一行有3列 */
  32.         grid-template-rows: 5em 5em;
  34.         /* 3. 设置轨道间的间隙 */
  35.         /* gap: 水平 垂直 */
  36.         /* gap: 0.5em 1em; */
  37.         /* gap: 0.5em 0.5em; */
  38.         gap: 0.5em;
  39.       }
  41.       .container > .item {
  42.         /* 父级为grid容器,它内部的子元素自动成为grid项目 */
  43.         background-color: lightcyan;
  44.         border: 1px solid #000;
  45.         padding: 0.5em;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="container">
  51.       <div class="item">item1</div>
  52.       <div class="item">item2</div>
  53.       <div class="item">item3</div>
  54.       <div class="item">item4</div>
  55.       <div class="item">item5</div>
  56.       <div class="item">item6</div>
  57.     </div>
  58.   </body>
  59. </html>

更多相关文章

  1. 210324 CSS flex 布局
  2. css之flex项目属性与商城首页布局实战
  3. 移动商城首页的页眉和页脚的布局和flex项目三个属性
  4. 高性能图表控件LightningChart中有关用分段布局重叠图
  5. 传统定位布三行三列和flex布局
  6. flex项目上的三个属性
  7. flex布局理解
  8. css-flex布局
  9. 【CSS入门】前端布局神器Flex弹性盒模型详解及适用场景(建议收藏

随机推荐

  1. Android下Speex库除0错误(SIGFPE)排除
  2. and 使用以及添加一个自己的mime type在C
  3. 《H5 App开发》判断当前环境是Android还
  4. Android构建报错：Android resource linkin
  5. android linux 基础知识总结
  6. Android 获取设备信息
  7. android的单元测试摘要
  8. 虚拟键盘弹出时挡住EditText的解决方案
  9. Android01————快速入门
  10. Android(安卓)Studio 在 Mac 上如何真机