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

通過學(xué)習(xí),熟悉flex彈性盒子布局方式.以及了解了幾個(gè)grid的幾個(gè)屬性.

1.通過flex彈性盒子布局設(shè)計(jì)一個(gè)簡單的導(dǎo)航

html代碼如下:

     <header>
        <nav>
            <a href="">首頁</a>
            <a href="">男裝</a>
            <a href="">女裝</a>
            <a href="">家居</a>
            <a href="">手機(jī)</a>
            <a href="">食品</a>
            <a href="">幫助中心</a>
        </nav>
        <button>登錄</button>
    </header>

css代碼如下:

header{
            background-color: brown;
            height: 50px;
            padding: 0px 2em;
            /* 設(shè)置header為彈性盒子 */
            display: flex;
            /* 整體兩端對齊 */
            place-content: space-between;
        }
        nav{
            line-height: 50px;
            /* 設(shè)置nav為彈性盒子 */
            display: flex;
        }
        nav>a{
            /* 父級變成彈性盒子后,項(xiàng)目為變成行內(nèi)塊inline-block */
            text-decoration: none;
            color: rgb(243, 236, 233);
            padding: 0px 20px;
        }
        nav>a:hover{
            background-color: lightpink;
            color: rgb(189, 71, 106);
            transition: 0.3s;
        }
        header>button{
            background-color: bisque;
            border: none;
            width: 100px;
        }
        header>button:hover{
            background-color: lightslategray;
            cursor: pointer;
            transition: 0.3s;
        }

執(zhí)行效果:

2.實(shí)例演示課堂中學(xué)到的Grid的屬性

   <div class="container">
        <div class="item">文本內(nèi)容</div>
   </div>

    .container{
            width: 400px;
            height: 200px;
            /* 將元素設(shè)置成grid容器 */
            display: grid;
            /* 顯式網(wǎng)格 */
            /* grid-template-columns: 100px 100px 100px; */
            /* grid-template-rows: 50px 50px 50px; */
              /* 語法糖 */
            /* grid-template-columns: repeat(4,100px);*/
            /* grid-template-rows: repeat(4,50px);  */
            /* 如果容器的寬高寫死的話,可以直接做比例劃分 */
            /* fr:比例 ,因?yàn)榇_定了寬和高,可以用fr參數(shù)等分*/
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: repeat(4,1fr);
        }

效果如下:

    /* grid-row:起始行號/結(jié)束行號
       grid-cloumn:起始列號/結(jié)束列號 */
       grid-row:2 /3 ;
       grid-column: 2 / 3;

執(zhí)行結(jié)果:

/* 斜杠前只寫出起始列號和行號,/后寫跨越的列數(shù)和行數(shù) */
          grid-column:2 / span 2;
          grid-row:2 / span 2;

執(zhí)行效果如下:

/* 網(wǎng)格區(qū)域:grid-area:行開始 / 列開始 / 行結(jié)束 / 列結(jié)束 */
          grid-area:3/3/4/4;

執(zhí)行效果如下:

 /* 從第二行第二列開始跨越1行和1列 */
          grid-area:2/2/span 1 /span 1;
 /* 如果只跨越1行和1列,可以省略后面的跨越參數(shù) */
          grid-area:2/2;

執(zhí)行效果如下:

/* 如果跨越不是一行和一列就不能省略 */
    grid-area:2/2/span 2 /span 2;

執(zhí)行效果如下:

 /* 項(xiàng)目占據(jù)最后一行 */
   grid-area:4/1/span 1 /span 4;

執(zhí)行效果如下:

 /* 占據(jù)第一行 */
    grid-area:1/1 /span 1/span 4;

執(zhí)行效果如下:

經(jīng)過上面的實(shí)操,基本上掌握了目前所學(xué)的grid網(wǎng)格布局的幾個(gè)基礎(chǔ)屬性的用法.

批改老師：PHPz

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

老師批語：很好，沒什么問題