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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198836
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
grid布局相關(guān)屬性以及grid實(shí)現(xiàn)媒體查詢功能
李東亞1??3????12?
原創(chuàng)
1126人瀏覽過

grid布局相關(guān)屬性

Grid容器屬性

1、 grid-template-columns/rows：基于列/行定義網(wǎng)格線和軌道大小；常見單位:repeat(int,fr)、px、%
2、 grid-column/row-gap:列和行的間隙（grid-gap|gap）
3、 grid-template-areas:命名網(wǎng)格區(qū)域（配合項目的grid-area屬性使用）
4、 grid-auto-columns/rows：隱藏網(wǎng)格的列寬和行高
5、 grid-auto-flow:網(wǎng)格項目的流動方向（默認(rèn)先行后列）值row/column
流動方向?yàn)樾校嚎稍O(shè)置隱藏列寬，反之可設(shè)置行高
6、 justify/align-content:設(shè)置在網(wǎng)格單元在容器中的水平/垂直對其方式，值為：start、center、end、space-between/space-evenly/space-around

簡寫：place-content：align justify；
7、 justify/align-items:設(shè)置項目在網(wǎng)格單元內(nèi)水平/垂直的對其方式,值為：start、center、end
簡寫：place-items:align justify;

Grid項目屬性：

1、 grid-column/row-start/end:將項目放于行列網(wǎng)格線起始網(wǎng)格域內(nèi)；
2、 grid-area:將項目防御網(wǎng)格域內(nèi)或?qū)㈨椖糠庞陧槙r針（top-left-bottom-right）網(wǎng)格域內(nèi)
3、 justify/align-self:設(shè)置某一個特定項目在網(wǎng)格中的水平/垂直的對其方式;值為：start、center、end
簡寫place-self: align justify;

grid的媒體查詢與專業(yè)的媒體查詢有什么區(qū)別

1.使用媒體查詢:媒體查詢能在不同的條件下使用不同的樣式，使頁面在不同在終端設(shè)備下達(dá)到不同的渲染效果。
語法：@media 媒體類型 and (媒體特性) {你的樣式}
2.grid媒體查詢主要通過auto-fit屬性自動填充來實(shí)現(xiàn)類似媒體查詢功能

grid布局實(shí)在練習(xí)案例:

1.代碼部分:

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>仿PHP中文網(wǎng)頁面布局</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         ul{
  15.             list-style: none;
  16.         }
  17.         body{
  18.             min-width: 1400px;
  19.         }
  20.         header{
  21.             height: 4rem;
  22.             background-color: lightblue;
  23.         }
  24.         footer{
  25.             height: 10rem;
  26.             background-color: #000000;
  27.             color:white;
  28.         }
  29.         main{
  30.             min-height: 40rem;
  31.             width: 1200px;
  32.             margin: 2rem auto;
  33.             /* background-color: #D3D3D3; */
  34.         }
  35.         main > .main-top{
  36.             display: grid;
  37.             grid-template-columns: 12rem 62rem;
  38.             grid-template-rows: 4rem 18rem 8rem ;
  39.             gap:0.4rem;
  40.             background-color:#8B0000;
  41.             height: 30.8rem;
  42.             place-content: center;
  43.             border-radius: 0.5rem;
  44.         }
  45.         .main-top > .top{
  46.             grid-area: 1 / 2 / 2 / 3;
  47.             display: flex;
  48.             justify-content: center;
  49.             align-items: center;
  50.             background-color: lightgreen;
  51.         }
  53.         .main-top > .top > li{
  54.             width: 8rem;
  55.             text-align: center;
  56.         }
  57.         .main-top > aside{
  58.             background-color: #20B2AA;
  59.             grid-area: span 3 ;
  60.         }
  61.         .main-top > .banner{
  62.             background-color: lightpink;
  63.         }
  64.         .main-top > div:last-child{
  65.             display: grid;
  66.             grid-template-columns: repeat(4,15rem);
  67.             gap:0.5rem;
  68.             margin: 0 auto;
  69.             /* place-content: center; */
  70.         }
  71.         .main-top > div:last-child > .item{
  72.             background-color: lightseagreen;
  73.             border-radius: 0.5rem;
  74.         }
  75.         .container{
  76.             margin-top: 1rem;
  77.             background-color: olive;
  78.             display: grid;
  79.             grid-template-columns: repeat(5,14rem);
  80.             grid-template-rows: 4rem repeat(3,10rem);
  81.             place-content: center space-evenly;
  82.             grid-row-gap:0.4rem ;
  83.             padding-bottom: 1rem;
  84.             border-radius: 0.5rem;
  85.         }
  86.         .container > .item{
  87.             background-color: lightsalmon;
  88.             border-radius: 0.5rem;
  89.         }
  90.         .container > span {
  91.             grid-area: span 1 / span 5;
  92.             text-align: center;
  93.             line-height: 4rem;
  94.         }
  95.         .container > .item:first-of-type{
  96.             grid-area:span 2;
  97.         }
  98.     </style>
  99. </head>
  100. <body>
  101.     <header>頁頭</header>
  102.     <main>
  103.         <div class="main-top">
  104.             <ul class="top">
  105.                 <li>menu1</li>
  106.                 <li>menu2</li>
  107.                 <li>menu3</li>
  108.                 <li>menu4</li>
  109.                 <li>menu5</li>
  110.                 <li>menu6</li>
  111.                 <li>menu7</li>
  112.                 <input type="text">
  113.             </ul>
  114.             <aside>
  115.                 側(cè)邊菜單
  116.             </aside>
  117.             <div class="banner">
  118.                 幻燈片
  119.             </div>
  120.             <div>
  121.                 <div class="item"></div>
  122.                 <div class="item"></div>
  123.                 <div class="item"></div>
  124.                 <div class="item"></div>
  126.             </div>
  127.         </div>
  128.         <!-- 精品課程區(qū) -->
  129.         <div class="container">
  130.             <span>標(biāo)題</span>
  131.             <div class="item"></div>
  132.             <div class="item"></div>
  133.             <div class="item"></div>
  134.             <div class="item"></div>
  135.             <div class="item"></div>
  136.             <div class="item"></div>
  137.             <div class="item"></div>
  138.             <div class="item"></div>
  139.             <div class="item"></div>
  140.             <div class="item"></div>
  141.             <div class="item"></div>
  142.             <div class="item"></div>
  143.             <div class="item"></div>
  144.             <div class="item"></div>
  145.         </div>
  146.     </main>
  147.     <footer>頁腳</footer>
  148. </body>
  149. </html>

2.運(yùn)行結(jié)果:

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

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

老師批語：素材放上去， 這樣寫合適
本博文版權(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é)