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

搜索
博主信息
博文 21
粉絲 0
評(píng)論 0
訪問(wèn)量 18878
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
深刻理解 grid 實(shí)現(xiàn) 12 列柵格布局的原理與實(shí)現(xiàn),仿寫小米商城(1029)
Yuming
原創(chuàng)
1414人瀏覽過(guò)

深刻理解 grid 實(shí)現(xiàn) 12 列柵格布局的原理與實(shí)現(xiàn),并用它寫一個(gè)頁(yè)面(類型自定義)

grid 可以實(shí)現(xiàn)柵格布局，掌握了就能滿足網(wǎng)頁(yè)開發(fā)的大部分需求，特別是移動(dòng)端的布局，能夠快速的開發(fā)好一個(gè)頁(yè)面，省去了很多重復(fù)的勞動(dòng)力，是一個(gè)不可多得的布局，也是必須要掌握的布局。

12 列柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（col-*）的組合來(lái)創(chuàng)建頁(yè)面布局，它的柵格系統(tǒng)最大分為 12 份，這樣通過(guò)網(wǎng)格布局實(shí)現(xiàn)的柵格布局使用起來(lái)也是十分方便的，就好像你已經(jīng)寫了一個(gè)通用的表格模板，以后你需要做的只是怎么把材料填進(jìn)去，而不是怎么去重復(fù)的造輪子，寫模板。
12 列柵格布局已經(jīng)給了你教程，你只需要按照他提供的方法重復(fù)地做就好了

頁(yè)面(類型自定義)

由于時(shí)間比較少，再加上剛接觸沒(méi)幾天，以前也沒(méi)用過(guò)，可能會(huì)存在一些問(wèn)題，效果如下

  1. <div class="container">
  2.       <div class="row">
  3.         <span class="row header item col-12">
  4.           <div class="item col-2" style="color: chocolate">MI</div>
  5.           <div class="item col-8">
  6.             <input placeholder="請(qǐng)輸入商品名稱" type="text" />
  7.           </div>
  8.           <div class="item col-2">
  9.             <div class="fa fa-address-card" aria-hidden="true"></div>
  10.           </div>
  11.         </span>
  12.       </div>
  13.       <div class="row">
  14.         <span class="nav item col-12">
  15.           <span class="col-1" style="color: chocolate">推薦</span>
  16.           <span class="col-1">手機(jī)</span>
  17.           <span class="col-1">智能</span>
  18.           <span class="col-1">電視</span>
  19.           <span class="col-1">筆記本</span>
  20.           <span class="col-1">家電</span>
  21.           <span class="col-1"
  22.             ><i class="fa fa-angle-down" aria-hidden="true"></i
  23.           ></span>
  24.         </span>
  25.       </div>
  26.       <div class="row-bannner">
  27.         <div class="banner">
  28.           <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b09cccd67154b8c9d17a16ba0ce6120.jpg?thumb=1&w=720&h=360" alt="">
  29.         </div>
  30.         </span>
  31.       </div>
  32.       <div class="row">
  33.         <div class="tab item col-12">
  34.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb65daec7ef7b52cc785f88f78efba37.png?w=216&h=228&bg=FDF1E6" alt=""></a>
  35.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  36.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d436f30612651fffe1d6c5aaa3fdb816.png?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  37.           <a class="col-1"><img src="https://i8.mifile.cn/v1/a1/e8bc849a-0a3b-21a0-6810-7da3a3903dee.webp?w=216&h=228&bg=FDEFDE" alt=""></a>
  38.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  39.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  40.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  41.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  42.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  43.           <a class="col-1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb4cbd9dabf2c2aef15e43f5bcab5cb9.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt=""></a>
  44.         </div>
  45.       </div>
  46.       <div class="row">
  47.         <div class="redmi item col-12">
  48.           <span>
  49.             <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d692a30ee3d586c4274575eec255d3c5.jpg?f=webp&w=537&h=762&bg=C1DDE9" alt="">
  50.           </span>
  51.           <span>
  52.             <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e32e68b1a554cd84af032d8ee03bf6d.jpeg?f=webp&w=537&h=378&bg=C1DDE9" alt="">
  53.           </span>
  54.           <span>
  55.             <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e2dd638ceb36697af693973ff85a7a9b.jpg?f=webp&w=537&h=378&bg=E0FCFF" alt="">
  56.           </span>
  57.         </div>
  58.       </div>
  59.       <div class="row-bannner">
  60.         <div class="banner">
  61.           <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/189acdf7e9b807cfc22d394df87c1958.jpg?f=webp&w=1080&h=420&bg=FEFEFE" alt="">
  62.         </div>
  63.       </div>
  64.       <div class="row">
  65.         <span class="item col-3">12</span>
  66.         <span class="item col-6">12</span>
  67.         <span class="item col-3">12</span>
  68.       </div>
  69.       <div class="row footer">
  70.         <span class="row col-12">
  71.           <div class="tarbar">
  72.             <span class="item col-1"
  73.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  74.               首頁(yè)</span
  75.             ><span class="item col-1"
  76.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  77.               分類</span
  78.             ><span class="item col-1"
  79.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  80.               星球</span
  81.             ><span class="item col-1"
  82.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  83.               購(gòu)物車</span
  84.             ><span class="item col-1"
  85.               ><div class="fa fa-address-card" aria-hidden="true"></div>
  86.               我的</span
  87.             >
  88.           </div>
  89.         </span>
  90.       </div>
  91.     </div>
  1. .container {
  2.   .row:nth-child(6) {
  3.     min-height: 85vh;
  4.   }
  5. }
  7. .container .row .header input {
  8.   min-width: 80%;
  9.   min-height: 3em;
  10.   text-indent: 2em;
  11.   border: none;
  12. }
  13. .container .row .header {
  14.   background-color: #f2f2f2;
  15.   place-content: center;
  16.   align-items: center;
  17. }
  19. // nav
  20. .container .row .nav {
  21.   display: grid;
  22.   grid-template-columns: repeat(7, 1fr);
  23.   gap: 0.5em;
  24.   background-color: #f2f2f2;
  25.   span {
  26.     display: flex;
  27.     justify-content: center;
  28.     align-items: center;
  29.   }
  30. }
  31. .container .row-bannner .banner img {
  32.   max-width: 100vw;
  33. }
  34. // tab選項(xiàng)卡
  35. .container .row .tab {
  36.   display: grid;
  37.   grid-template-columns: repeat(5, 1fr);
  38.   grid-template-rows: repeat(2, 1fr);
  39.   img {
  40.     width: 100%;
  41.     height: 100%;
  42.   }
  43. }
  44. // redmi展示欄
  45. .container .row .redmi {
  46.   display: grid;
  47.   grid-template-columns: repeat(2, 1fr);
  48.   grid-template-rows: repeat(2, 1fr);
  49.   //   background-color: #fff; //有了grid空白間隙也不用操心了哪里要加， 哪里不要加
  50.   gap: 0.2em;
  51.   span img {
  52.     width: 100%;
  53.     height: 100%;
  54.   }
  55.   span:first-child {
  56.     grid-row: span 2;
  57.   }
  58. }
  60. // footer
  62. .footer {
  63.   position: fixed;
  64.   bottom: 0;
  65.   left: 0;
  66.   right: 0;
  67.   background-color: #fff;
  68.   padding: 0.5em 0;
  69. }
  70. .container .row .row .tarbar {
  71.   display: grid;
  72.   grid-template-columns: repeat(5, 1fr);
  73.   gap: 0.5em;
  74.   place-items: center center;
  75.   .item {
  76.     div {
  77.       display: block;
  78.       text-align: center;
  79.       margin-bottom: 0.5em;
  80.     }
  81.     &:nth-child(1) {
  82.       color: chocolate;
  83.     }
  84.   }
  85. }

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

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

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

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

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