記一次grid佈局實戰應用分享會

時間  2020-06-21
標籤 一次 grid 佈局 實戰 應用 分享 简体版
原文   原文鏈接

記一次grid佈局實戰應用分享會

記錄了組內技術分享會, 有一樣需求的同窗能夠參考一下
分享全程下來時間大約 45分鐘
最終畫圖以下:↓

表情.png

一. 到底能不能用在工程??(兼容性)

老生長談的問題了, 但也是決定性的問題,以下圖:
兼容.png
對於不用兼容ie瀏覽器的工程能夠玩起來了, grid也不算新技術了, 技術的發展須要coder的推進, 有時候問問本身不用grid的原罪是否是'懶得學'哈哈哈哈, 我查了一下 chrome 57版本是 2017.3月發佈的 .
ie使用display: -ms-grid的寫法也能夠有效, 可是網上看到不少同窗遇到了未知錯誤, 因此若是真的必須兼容ie的話仍是不要使用grid.面試

二. 技能定位(flex的好戰友)

grid不會代替flex, 相反他兩位是很是棒的搭檔, 配合使用簡直開始螺旋人生, grid佈局能夠打破dom位置的限制,使用很差的話容易形成語義混亂, 致使魯棒性降低, 此次咱們就一塊兒來探究一下grid佈局的實戰場景.
timg.jpgchrome

三. 從上下左右居中'新方法'引導興趣

爛大街的一個面試題, 居中的方法.
你能夠秀出grid了, 那麼分數必定多加一分到兩分.. 此處我介紹'四種'以後的內容會解釋爲何會這樣, 並且還有不少qiyinqiaoji... 能夠說學會了grid佈局那麼你的居中技巧就多出了6種以上!瀏覽器

總體dom結構以下
<div class="wrap">
     <div class="box"></div>
  </div>
固定的樣式
.box{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }

實現方法: 有點玩賴, 就是兩個屬性的隨意組合,突出一個'秀'
注意這裏的屬性不是flex的, 他在grid佈局模式下就是屬於grid.dom

.wrap{
      // 固然了開啓佈局的方式也與flex同樣
      display: inline-grid | grid;
      width: 300px;
      height: 300px;
      // 第一種
      align-items: center;
      justify-items: center;
      // 第二種
      align-items: center;
      justify-content: center;
      // 第三種
      align-content: center;
      justify-items: center;
      // 第四種
      align-content: center;
      justify-content: center;
    }

四. 橫排的排列

開啓佈局時, 咱們打開調試模式鼠標懸停在dom上會出現網格
與flex不同, 單純的開啓佈局並不會影響元素的佈局,不會壓縮抻拉寬高.
<style>
    /* 只是開啓grid佈局不會有變化, 不像flex佈局默認把內部的元素排成一排 */
     .wrap{
       display: grid;
       height: 100px;
       width: 300px;
       border: 1px solid;
     }
     .box{
       height: 50px;
       width: 50px;
       border: 1px solid red;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
   </div>
</body>

格子.png

grid-template-columns 定義把dom橫排分紅幾份,每份寬度是多少.

這裏就是把dom分爲4段, 每段100px寬, 而後咱們就能夠往裏面放內容了.
grid-template-columns: 100px 100px 100px 100px;
分割.pngide

橫排排列
<style>
     .wrap{
       display: grid;
       height: 100px;
       width: 300px;
       border: 1px solid;
       /* 1: 成爲一行, 開啓這個 */
       /* 總共3列, 每列100px */
       grid-template-columns: 100px 100px 100px;
     }
     .box{
       height: 50px;
       /* 子組件不設置寬度就會自動填充單元格 */
       /* 與上面的3個100px相對應*/
       border: 1px solid red;

     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
   </div>
</body>

橫排對齊.png

repeat 定義重複的部分

好比咱們要把橫排分紅10份, 那咱們寫10個100px顯然很笨拙,可使用以下的方式:
grid-template-columns: repeat(10, 100px);佈局

咱們想實現以下效果:

grid-template-columns: 100px 100px 100px 100px 100px 100px 200px 100px 100px 100px 100px;
能夠這樣寫:
grid-template-columns: repeat(6, 100px) 200px repeat(4, 100px);學習

重複的類型也能夠多樣

grid-template-columns: 100px 200px 100px 200px 100px 200px 100px 200px 100px 200px 100px 200px
能夠以下的方式書寫:(要注意這裏只有一個'逗號')
grid-template-columns: repeat(6, 100px 200px);flex

auto-fill屬性 根據設定的寬度,自動填充

好比我dom的寬度是400px 那麼下面的代碼就會生成 10個 40px寬的格子, 固然若是dom寬是390px, 它只會生成9個;
grid-template-columns: repeat(auto-fill, 40px);spa

技巧跳列
好比咱們把橫排分爲3個格子每一個100px, 可是我只放入兩個元素, 分別在第1個與第3個格子, 那麼咱們可使用一個技巧, 就是中間放一個空元素, 而這個空元素應儘量小的消耗內存, 那麼能夠嘗試放一個br標籤, 固然這種方式不推薦, 佈局上會給其餘同窗形成一些困擾, 代碼以下:
<style>
     .wrap{
       display: grid;
       height: 100px;
       width: 300px;
       border: 1px solid;
       grid-template-columns: 100px 100px 100px 100px;
     }
     .box{
       height: 50px;
       border: 1px solid red;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box">1</div>
     <br>
     <div class="box">3</div>
   </div>
</body>

兩端.png

五. [fr, auto] 單位與關鍵字

fr

咱們知道在flex佈局裏面, 好比我寫flex:1, 他表明着在flex佈局裏面佔總份數裏面的一份, grid裏面也有相似的屬性, 並且更加的定製化語義化, 他就是fr.設計

下面這段代碼的意思就是把dom分紅5份, 每份就是佔一份的寬.

grid-template-columns: repeat(5,1fr);

你們瓜分剩餘空間

grid-template-columns: 120px 1fr 2fr 3fr 1fr;
分配.png

auto

auto關鍵字, 單獨存在時功能與1fr差很少， 可是語義化更明顯
grid-template-columns: 20px 20px auto 20px 20px;
auto.png

auto與1fr的區別， 他不參與fr的計算規則， 因此與fr同時使用會被擠成自身寬度
grid-template-columns: 20px 2fr auto 1fr 20px;
下圖裏面的3就是靠自身撐起的寬度
auto被擠壓.png

六. minmax限定範圍

下面設置最小寬與最大寬

<style>
     .wrap{
       display: grid;
       border: 1px solid;
       width: 300px;
       height: 100px;
       /* 最小值， 最大值， 好比被壓縮的時候要留一個基本寬度*/
       /* 裏面能夠填寫fr爲單位的數字， 這就是好處 */
       grid-template-columns: 1fr 1fr minmax(300px,1fr);
     }
     .box{
       border: 1px solid red;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
   </div>
當父級320px寬

4F0B4A83-0DE2-468c-85F7-5F4D807C5ED5.png

當父級200px寬

父級窄.png

七. 縱列格子

咱們已經把橫向弄忘了,就像學會了九陽神功的張無忌學乾坤大挪移.
grid-template-rows 屬性就是定義列的
固然, 在行能夠用的技巧, 在列上均可以使用

<style>
     .wrap{
       display: grid;
       border: 1px solid;
       height: 200px;
       width: 500px;
       grid-template-columns: 1fr 1fr 100px;
       grid-template-rows: 30px 60px 1fr;
     }
     .box{
       border: 1px solid red;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box">4</div>
     <div class="box">5</div>
     <div class="box">6</div>
     <div class="box">7</div>
     <div class="box">8</div>
     <div class="box">9</div>
   </div>
</body>

縱橫.png

八. 元素間隔

距離產生美， 這麼多格子固然須要點距離啦。

固定代碼
<style>
     .wrap{
       display: grid;
       border: 1px solid;
       height: 300px;
       width: 300px;
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows:  1fr 1fr 1fr;
     }
     .box{
       border: 1px solid red;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box">4</div>
     <div class="box">5</div>
     <div class="box">6</div>
     <div class="box">7</div>
     <div class="box">8</div>
     <div class="box">9</div>
   </div>
</body>
添加： grid-row-gap: 10px;

航向.png

添加：grid-column-gap: 10px;

縱向.png

固然了，這兩個屬性能夠簡寫爲 grid-gap:10px;或者grid-gap:10px 10px;

大寶.png
給父級一個padding：10px
斷定.png

注意： 暫時不支持這樣寫grid-row-gap: 10px 20px;也就是說不固定的間距須要想別的辦法了。

咱們能夠在畫格子的時候， 把間距也當格子畫。

九. 顛倒

grid-auto-flow: column; 格子的定位從橫向變爲了縱向

<style>
     .wrap{
       display: grid;
       border: 1px solid;
       height: 300px;
       width: 300px;
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows:  1fr 1fr 1fr;
       padding: 10px;
       grid-gap:10px;
       /* 定義排列的順序, 相似方塊旋轉了 */
       /* 好比說豎排的佈局， 相似對聯的效果就簡單實現了 */
       grid-auto-flow: column; 
     }
     .box{
       border: 1px solid red;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box">4</div>
     <div class="box">5</div>
     <div class="box">6</div>
     <div class="box">7</div>
     <div class="box">8</div>
     <div class="box">9</div>
   </div>
</body>

顛倒.png

十. 居中對齊方式的解析

這裏咱們就能夠解釋一下最開始說的對齊方式的原理。

第一部分： 網格的位置

<style>
     .wrap{
       display: grid;
       border: 1px solid;
       height: 330px;
       width: 330px;
       /* 當單元格小於容器時效果顯著 */
       grid-template-columns: 80px 80px 80px;
       grid-template-rows:  80px 80px 80px;
       grid-gap:10px;

     }
     .box{
       border: 1px solid red;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box">4</div>
     <div class="box">5</div>
     <div class="box">6</div>
     <div class="box">7</div>
     <div class="box">8</div>
     <div class="box">9</div>
   </div>
</body>
居中
justify-content: center; 
 align-content: center;

6EBD59D3-D366-4841-B317-F1C1A6AB207B.png

居右
justify-content: end; 
 align-content: center;

右.png

居右下
justify-content: end; 
 align-content: end;

右下.png

簡潔寫法，直接定義兩個屬性

place-content：center

奇怪的取值範圍（重點！）

justify-content: 取值範圍：left right flex-end flex-start end start

align-content: 取值範圍：flex-end flex-start end start

奇怪的點1：align-content不能夠用 left right
奇怪的點2：flex-end這種屬性竟然有效
奇怪的點3：能夠用left right 可是不能夠用 top bottom

真是奇奇怪怪沒有腦殼。。。。我建議採用center end start這樣專屬grid的意義更加明確。

第二部分： 單元格的對齊

每一個小網格就像是excel的一個單元格， 那麼這些單元格的排布方式也頗有趣，第一種就總體的排布，第二種是自身的排布。

<style>
     .wrap{
       display: grid;
       border: 1px solid;
       height: 300px;
       width: 300px;
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows:  1fr 1fr 1fr;
       grid-gap:10px;
       justify-items: center;
       align-items: center;
     }
     .box{
       height: 50px;
       width: 50px;
       border: 1px solid red;
     }
     .box4{
       justify-self:end;
       align-self: end;
     }
     .box5{
       justify-self:start;
       align-self: start;
     }
     .box6{
       justify-self:stretch;
       align-self: stretch;
       border: 1px solid red;
     }
     .box7{
       border: 1px solid red;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box box4">4</div>
     <div class="box box5">5</div>
     <div class="    box6">6</div>
     <div class="    box7">7</div>
   </div>
</body>

大雜燴.png

  1. 前3個收到父級的 justify-items:` align-items:`影響因此上下左右居中。
  2. 第4個自身佈局優先級最高， 出如今右下角
  3. 6與7是由於未設置寬高的狀況下，設置了stretch屬性致使自身是否被拉伸。

stretch 填滿單元格的寬度（默認值）

經過這裏的學習， 咱們就能明白最開是的居中方式了， 面試的時候你能夠大展身手了。

十一. dom排位 grid-row-start

定義格子從哪裏開始, 到哪裏結束, 這樣能夠不用br這種站位標籤了.
<style>
    /* 只是開啓grid佈局不會有變化, 不像flex佈局默認把內部的元素排成一排 */
     .wrap{
       display: grid;
       border: 1px solid;
       height: 500px;
       width: 500px;
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows:  1fr 1fr 1fr;
       grid-gap:10px;
     }
     .box{
       /* height: 50px;
       width: 50px; */
       border: 1px solid red;
     }
     .box1 {
       /* 1： 我能夠自由選擇我從網格的哪裏開始， 哪裏結束 */
       /* 也就是說打破了自由排列的起始值 */
       grid-column-start: 2;

       /* 2： 結束就是這個元素佔據的’寬度‘ */
       /* 注意：　沒法做到跨行的延續 */
       grid-column-end: 4;

       /* 3: 列固然也能夠這麼玩*/
       /* 他到了下面去, 而不佔用空間, 就是說他並不會把全體都往下弄一行 */
       grid-row-start: 2;
       grid-row-end: 4;


       /* 4: 簡潔寫法, 斜槓挺假的 */
       /* 討論一下, 爲啥要用 斜槓??? 而不是空格 */
       /* 不寫就是默認跨越一個 */
       grid-column: 1 / 3;
       grid-row: 1 / 3;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box box1">1：第一格開始，　第三格結束</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box">4</div>
   </div>
</body>

亂亂.png
這種寫法忽然出現 '/'斜線, 我感受挺不舒服的, 不知道爲啥這麼設計.

grid-column: 1 / 3;
 grid-row: 1 / 3;
要注意, 這種佈局方式會有計算量的, 我我的不太建議這樣玩....

十二. 古怪的居中方式(腦洞)

中規中矩的思惟無法走的更快， 讓我來拋磚引如一下。

<style>
     .wrap{
       display: grid;
       border: 1px solid;
       height: 300px;
       width: 300px;
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows:  1fr 1fr 1fr;
       /* 1: 把單元格內的項目居中 */
       justify-items: center;
       align-items: center;
     }
     .box{
       /* 能夠知足大於單元格的物體居中 */
       height: 250px;
       width: 250px;
       border: 1px solid red;
       /* 2: 設置了9個單元格, 把他放到中間的單元格就ok了 */
       grid-row-start: 2;
       grid-column-start:2 ;
     }
     /* 四個角, 位置被徹底混淆了, 不要這樣用 */
     .box1{
      grid-column-start: 1;
      grid-column-end: 2;
     }
     .box2{
       grid-column-start: 3;
      grid-column-end: 4;
     }
     .box3{
       /* 涉及到了網格錯位的知識, 不建議這麼用, 固然你會算別人不必定會算~~~ */
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 3;
     }
     .box4{
      grid-column-start: 3;
      grid-column-end: 4;
      grid-row-start: 3;
     }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="box1">角</div>
     <div class="box2">角</div>
     <div class="box">***** 這樣居中的好處是, 能夠在四個角作一些文章,這是一種思惟遊戲</div>
     <div class="box3">角</div>
     <div class="box4">角</div>
   </div>
</body>

四個角有文章.png
小號.png

坑點: 這四個角有點錯亂,你計算好了, 可是其餘同窗不必定計算的對, 須要把他封裝起來.
擴展: 這四個角咱們能夠放一點花樣, 應該挺好看的...

十三. span關鍵字

grid-column-start: span 2;不用寫結尾了, 代表站幾個就行了, 固然也有row屬性能夠設置.

也就是說 span 3 意思就是當前位置 日後3個格子都是個人了

八卦.png

十四. 映射佈局(精髓)

有的時候就要直接一點, 這個知識點纔是grid的靈魂.

grid-template-areas:

咱們照常使用grid-template-columns爲dom畫格子, 而後爲每一個單元格定義一個名字, 什麼名字均可以, 若是用不上的單元格名字就定義爲'.', 舉個例子以下:

grid-template-areas: 
        "header header header header"
        "main   main   .      sidebar"
        "footer footer footer footer";
上面的代碼咱們能夠給內部dom自身一個grid-area: header;屬性, 那麼 dom就會佔據最上面四個格子的位置, 簡直太直接了, 至關於多了個縮略圖.
只能寫出'矩形'的方陣, 而且必須是一體的, 倆個'header'不連貫東一個西一個也不會生效.
<style>
     .wrap{
       display: grid;
       border: 1px solid;
       height: 300px;
       width: 300px;
       grid-template-columns: repeat(4,1fr);
       grid-template-rows:   repeat(3,1fr);
       grid-gap:10px;
       justify-content: center;
       align-content: center;
       padding: 10px;

      /* 1: 可視化映射, 個人理解這個纔是靈魂, 這個功能纔是沒法取代 */
      /* '.'表示一個空的單元格 */
       grid-template-areas: 
        "header header header header"
        "main main . sidebar"
        "footer footer footer footer";

     }
     .box{
       border: 1px solid red;
     }
     .box1{
      grid-area: header;
     }
     .box2{
      grid-area: main;
     }
     .box3{
      grid-area: sidebar;
     }
     .box4{
      grid-area: footer;
     }
  </style>
</head>
<body>
  <p>能夠利用可視化作居中, 沒人這樣用, 可是若是是你不敢想那就...</p>
   <div class="wrap">
     <div class="box box1">1</div>
     <div class="box box2">2</div>
     <div class="box box3">3</div>
     <div class="box box4">4</div>
   </div>
</body>

可視化.png

別看它簡單, 接下來能夠作一些有意思的事情了.

十五. 位置挪移要小心

我畫了一個簡易的遊戲, 把點擊的部位變黑, 當時設想是作最強大腦裏面的那個奇偶消融遊戲, 可是grid佈局有自身的侷限後來放棄了, 相關的問題我經過圖片展現一下.

遊戲.png
遊戲變化.png

當我變換小球位置的時候, 前面的小球會補充以前的位置, 致使位置信息很差算了, 固然咱們能夠把每一個小球固定, 而後在上面覆蓋一層, 但這樣作也不必用grid佈局了.

十六. 畫表情的一點啓發(相似個人世界)

以前還畫了個'大風車'和'八卦圖', 就不在這裏展現了, 可是我畫了個笑臉的代碼仍是分享給你們把:
<style>
    .wrap{
      display: grid;
      height: 600px;
      width: 600px;
      margin: 50px auto;
      /* 用auto的話會致使大小不一致, 由於auto算是自適應裏面的寬高 */
      grid-template-columns: repeat(15,1fr);
      grid-template-rows: repeat(15,1fr);
      justify-items: stretch;
      align-items: stretch;    
      grid-template-areas: 
      ". . . . . a a a a a . . . . . "
      ". . . b b f1 f1 f1 f1 f1 c c . . . "
      ". . d g5 g5 f1 f1 f1 f1 f1 f2 f2 e . . "
      ". f g4 g4 g4 f1 f1 f1 f1 f1 f4 f4 f4 g . "
      ". f g4 g4 g4 f1 f1 f1 f1 f1 f4 f4 f4 g . "
      "h g3 g4 g4 g4 f1 f1 f1 f1 f1 f4 f4 f4 f3 i "
      "h g3 g2 q q f1 f1 f1 f1 f1 r r r f3 i "
      "h g3 g2 q q f1 f1 f1 f1 f1 f6 f6 f5 f3 i "
      "h g3 g2 f9 f9 f1 f1 f1 f1 f1 f6 f6 f5 f3 i "
      "h g3 g2 f9 f9 f1 f1 f1 f1 f1 f6 f6 f5 f3 i "
      ". j g2 f9 f9 g1 s s s f7 f6 f6 f5 p ."
      ". j g2 f9 f9 f8 f8 f8 f8 f7 f6 f6 f5 p . "
      ". . k f9 f9 f8 f8 f8 f8 f7 f6 f6 o . . "
      ". . . m m f8 f8 f8 f8 f7 n n . . . "
      ". . . . . l l l l l . . . . . "
      ;  
    }
    .box {
      background-color: black;
    }
    .box-a{
      grid-area: a;
    }
    .box-b{
      grid-area: b;
    }
    .box-c{
      grid-area: c;
    }
    .box-d{
      grid-area: d;
    }
    .box-e{
      grid-area: e;
    }
    .box-f{
      grid-area: f;
    }
    .box-g{
      grid-area: g;
    }
    .box-h{
      grid-area: h;
    }
    .box-i{
      grid-area: i;
    }
    .box-j{
      grid-area: j;
    }
    .box-k{
      grid-area: k;
    }
    .box-l{
      grid-area: l;
    }
    .box-m{
      grid-area: m;
    }
    .box-n{
      grid-area: n;
    }
    .box-o{
      grid-area: o;
    }
    .box-p{
      grid-area: p;
    }
    .box-q{
      grid-area: q;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(255, 206, 46);
    }
    .box-q::after{
      content: '';
      display: block;
      height: 70px;
      width: 70px;
      border-radius: 50%;
      background-color: red;
    }
    .box-r{
      grid-area: r;
    }
    .box-s{
      grid-area: s;
    }
    .box-t{
      grid-area: t;
    }
    .f{
      background-color: rgb(251, 209, 71);
    }
    .f1{
      grid-area: f1;
    }
    .f2{
      grid-area: f2;
    }
    .f3{
      grid-area: f3;
    }
    .f4{
      grid-area: f4;
    }
    .f5{
      grid-area: f5;
    }
    .f6{
      grid-area: f6;
    }
    .f7{
      grid-area: f7;
    }
    .f8{
      grid-area: f8;
    }
    .f9{
      grid-area: f9;
    }
    .g1{
      grid-area: g1;
    }
    .g2{
      grid-area: g2;
    }
    .g3{
      grid-area: g3;
    }
    .g4{
      grid-area: g4;
    }

    .g5{
      grid-area: g5;
    }
    .g6{
      grid-area: g6;
    }
  </style>
</head>
<body>
   <!-- 採用3個dom拼接,或者採用拼圖板, 拼圖更能體現grid佈局的又優點 -->
   <div class="wrap">
     <div class="box box-a"> v </div>
     <div class="box box-b"> v </div>
     <div class="box box-c"> v </div>
     <div class="box box-d"> v </div>
     <div class="box box-e"> v </div>
     <div class="box box-f"> v </div>
     <div class="box box-g"> v </div>
     <div class="box box-h"> v </div>
     <div class="box box-i"> v </div>
     <div class="box box-j"> v </div>
     <div class="box box-k"> v </div>
     <div class="box box-l"> v </div>
     <div class="box box-m"> v </div>
     <div class="box box-n"> v </div>
     <div class="box box-o"> v </div>
     <div class="box box-p"> v </div>
     <div class="box box-q">  </div>
     <div class="box box-r"> v </div>
     <div class="box box-s"> v </div>
     <!-- 膚色 -->
     <div class="f f1"></div>
     <div class="f f2"></div>
     <div class="f f3"></div>
     <div class="f f4"></div>
     <div class="f f5"></div>
     <div class="f f6"></div>
     <div class="f f7"></div>
     <div class="f f8"></div>
     <div class="f f9"></div>
     <div class="f g1"></div>
     <div class="f g2"></div>
     <div class="f g3"></div>
     <div class="f g4"></div>
     <div class="f g5"></div>
     <div class="f g6"></div>
   </div>
</body>
也就是開局那張圖, 使用grid的來畫這張圖簡直舒服!!

表情.png

end

本次的分享會就到這裏, 若是有收穫的話點在贊在走嘍....
但願和你一塊兒進步.

end.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程