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

搜索
博主信息
博文 31
粉絲 2
評論 0
訪問量 34475
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
小結(jié)：課前預(yù)習(xí)grip的屬性
霏夢
原創(chuàng)
1319人瀏覽過
  • 作者：霏夢
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>css grid網(wǎng)格布局教程</title>
  7.     <style>
  8.       /* 最強大的css布局方案 */
  9.       /* 他將網(wǎng)頁劃分成一個個網(wǎng)絡(luò)，可以任意組合不同的網(wǎng)格，做出各種各樣的布局 */
  11.       .container {
  12.         display: grid;
  13.         /* 容器指定了網(wǎng)格布局以后，接著就要劃分行和列。grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高 */
  14.         /* grid-template-columns: 100px 100px 100px; */
  15.         /* grid-template-rows: 100px 100px 100px; */
  16.         /* 上面指定了行和高為100px */
  17.         /* 除了用絕對單位，也可用使用百分比 */
  18.         /* grid-template-columns: 33.33% 33.33% 33.33%; */
  19.         /* grid-template-rows: 33.33% 33.33% 33.33%; */
  21.         /* repeat */
  22.         /* 接受兩個參數(shù)，第一個參數(shù)是重復(fù)的次數(shù)（上例是3），第二個參數(shù)是所要重復(fù)的值。 */
  23.         /* grid-template-columns: repeat(3, 33.33%); */
  24.         /* grid-template-rows: repeat(3, 100%); */
  26.         /* auto-fill 表示自動填充 */
  27.         /* grid-template-columns: repeat(auto-fill, 100px); */
  29.         /* fr關(guān)鍵字 */
  30.         /* 為了方便表示比例關(guān)系，網(wǎng)格布局提供了fr關(guān)鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為1fr和2fr，就表示后者是前者的兩倍。 */
  31.         /* grid-template-columns: 1fr 1fr; */
  33.         /* fr可以與絕對長度的單位結(jié)合使用，這時會非常方便 */
  34.         /* 第一列的寬度為150像素，第二列的寬度是第三列的一半 */
  35.         /* grid-template-columns: 100px 1fr 2fr; */
  37.         /* minmax() */
  38.         /* 函數(shù)產(chǎn)生一個長度范圍，表示長度就在這個范圍之中。它接受兩個參數(shù)，分別為最小值和最大值 */
  39.         /* grid-template-columns: 1fr 1fr minmax(100px, 1fr); */
  41.         /* auto關(guān)鍵安：關(guān)鍵字表示由瀏覽器自己決定長度 */
  42.         /* grid-template-columns: 100px auto 100px; */
  44.         /* 網(wǎng)格線的名稱 */
  45.         /* 屬性里面，還可以使用方括號，指定每一根網(wǎng)格線的名字，方便以后的引用。 */
  46.         grid-template-columns: [a1] 100px [a2] 100px [a3] auto;
  47.         grid-template-rows: [b1] 200px [b2] 200px [b3] auto;
  48.       }
  49.       .item {
  50.         font-size: 2em;
  51.         text-align: center;
  52.         border: 1px solid greenyellow;
  53.       }
  54.       .item-1 {
  55.         background-color: red;
  56.       }
  57.       .item-2 {
  58.         background-color: yellowgreen;
  59.       }
  60.       .item-3 {
  61.         background-color: greenyellow;
  62.       }
  63.       .item-4 {
  64.         background-color: blue;
  65.       }
  66.       .item-5 {
  67.         background-color: blueviolet;
  68.       }
  69.       .item-6 {
  70.         background-color: cyan;
  71.       }
  72.       .item-7 {
  73.         background-color: darkorange;
  74.       }
  75.       .item-8 {
  76.         background-color: olivedrab;
  77.       }
  78.       .item-9 {
  79.         background-color: olive;
  80.       }
  81.     </style>
  82.   </head>
  83.   <body>
  84.     <!-- Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。Grid 布局遠(yuǎn)比 Flex 布局強大 -->
  85.     <!-- 容器里面的水平區(qū)域稱為"行"（row），垂直區(qū)域稱為"列"（column） -->
  86.     <!-- 行和列的交叉區(qū)域，稱為"單元格"（cell）。 -->
  87.     <!-- 正常情況下，n行和m列會產(chǎn)生n x m個單元格。比如，3行3列會產(chǎn)生9個單元格 -->
  88.     <p>第一行</p>
  89.     <!-- 下面第一個div是容器 -->
  90.     <div class="container">
  91.       <!-- 以下div是項目 -->
  92.       <!-- 注意：項目只能是容器的頂層子元素，不包含項目的子元素，比如上面代碼的<p>元素就不是項目。Grid 布局只對項目生效。 -->
  93.       <div class="item item-1"><p>1</p></div>
  94.       <div class="item item-2">2</div>
  95.       <div class="item item-3">3</div>
  96.       <div class="item item-4">4</div>
  97.       <div class="item item-5">5</div>
  98.       <div class="item item-6">6</div>
  99.       <div class="item item-7">7</div>
  100.       <div class="item item-8">8</div>
  101.       <div class="item item-9">9</div>
  102.     </div>
  103.     <p>最后一行</p>
  104.   </body>
  105. </html>
本博文版權(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+教程免費學(xué)