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

搜索
博主信息
博文 145
粉絲 7
評(píng)論 7
訪(fǎng)問(wèn)量 198600
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
實(shí)戰(zhàn)利用grid響應(yīng)式布局和12柵格布局模板
李東亞1??3????12?
原創(chuàng)
1269人瀏覽過(guò)

一、我的相冊(cè)案例（grid響應(yīng)式布局）

1、代碼部分：

  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>我的相冊(cè)</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         /* box-sizing: border-box; */
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #6e6e6e;
  16.       }
  17.       body {
  18.         width: 98vw;
  19.         height: 99vh;
  20.         background-color: #80ffff;
  21.       }
  22.       .container > div img {
  23.         width: 180px;
  24.         height: 240px;
  25.       }
  26.       .container > div > a > img:hover {
  27.         width: 185px;
  28.       }
  29.       .container {
  30.         /* width: 100vw; */
  31.         /* height: 100vh; */
  32.         display: grid;
  33.         grid-template-columns: repeat(auto-fill, 280px);
  34.         grid-template-rows: repeat(auto-fill, 300px);
  35.         gap: 20px 10px;
  36.         grid-auto-rows: 300px;
  37.         justify-content: space-evenly;
  38.         align-content: space-evenly;
  39.       }
  40.       .container div {
  41.         padding: 20px auto;
  42.         box-sizing: border-box;
  43.         background-color: #eee;
  44.         display: flex;
  45.         flex-flow: column nowrap;
  46.         justify-content: space-evenly;
  47.         align-items: center;
  48.         border-radius: 10%;
  49.       }
  50.       .container > div:hover {
  51.         background-color: #f3f19e;
  52.         box-shadow: 0 0 10px #717171;
  53.       }
  54.       h1 {
  55.         text-align: center;
  56.         margin: 20px;
  57.         text-shadow: 2px 2px 1px #302f2f;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <h1>我的相冊(cè)</h1>
  63.     <div class="container">
  64.       <div>
  65.         <a href=""><img src="images/798.png" alt="" /></a>
  66.         <a href="">富豫369</a>
  67.       </div>
  68.       <div>
  69.         <a href=""><img src="images/798.png" alt="" /></a>
  70.         <a href="">富豫369</a>
  71.       </div>
  72.       <div>
  73.         <a href=""><img src="images/798.png" alt="" /></a>
  74.         <a href="">富豫369</a>
  75.       </div>
  76.       <div>
  77.         <a href=""><img src="images/798.png" alt="" /></a>
  78.         <a href="">富豫369</a>
  79.       </div>
  80.       <div>
  81.         <a href=""><img src="images/798.png" alt="" /></a>
  82.         <a href="">富豫369</a>
  83.       </div>
  84.       <div>
  85.         <a href=""><img src="images/798.png" alt="" /></a>
  86.         <a href="">富豫369</a>
  87.       </div>
  88.       <div>
  89.         <a href=""><img src="images/798.png" alt="" /></a>
  90.         <a href="">富豫369</a>
  91.       </div>
  92.       <div>
  93.         <a href=""><img src="images/798.png" alt="" /></a>
  94.         <a href="">富豫369</a>
  95.       </div>
  96.       <div>
  97.         <a href=""><img src="images/798.png" alt="" /></a>
  98.         <a href="">富豫369</a>
  99.       </div>
  100.       <div>
  101.         <a href=""><img src="images/798.png" alt="" /></a>
  102.         <a href="">富豫369</a>
  103.       </div>
  104.       <div>
  105.         <a href=""><img src="images/798.png" alt="" /></a>
  106.         <a href="">富豫369</a>
  107.       </div>
  108.       <div>
  109.         <a href=""><img src="images/798.png" alt="" /></a>
  110.         <a href="">富豫369</a>
  111.       </div>
  112.       <div>
  113.         <a href=""><img src="images/798.png" alt="" /></a>
  114.         <a href="">富豫369</a>
  115.       </div>
  116.       <div>
  117.         <a href=""><img src="images/798.png" alt="" /></a>
  118.         <a href="">富豫369</a>
  119.       </div>
  120.       <div>
  121.         <a href=""><img src="images/798.png" alt="" /></a>
  122.         <a href="">富豫369</a>
  123.       </div>
  124.       <div>
  125.         <a href=""><img src="images/798.png" alt="" /></a>
  126.         <a href="">富豫369</a>
  127.       </div>
  128.       <div>
  129.         <a href=""><img src="images/798.png" alt="" /></a>
  130.         <a href="">富豫369</a>
  131.       </div>
  132.       <div>
  133.         <a href=""><img src="images/798.png" alt="" /></a>
  134.         <a href="">富豫369</a>
  135.       </div>
  136.       <div>
  137.         <a href=""><img src="images/798.png" alt="" /></a>
  138.         <a href="">富豫369</a>
  139.       </div>
  140.       <div>
  141.         <a href=""><img src="images/798.png" alt="" /></a>
  142.         <a href="">富豫369</a>
  143.       </div>
  144.     </div>
  145.   </body>
  146. </html>

2、運(yùn)行結(jié)果：
http://www.zhongyequan.com/php/myphoto.html

二、12柵格布局：

1、代碼：

  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>12柵格布局</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       body {
  13.         height: 100vh;
  14.         width: 100vw;
  15.         display: flex;
  16.         flex-flow: column nowrap;
  17.         justify-content: center;
  18.         /* align-content: center; */
  19.       }
  20.       .container {
  21.         min-width: 1000px;
  22.         margin: 3px auto;
  23.         display: grid;
  24.         grid-template-columns: repeat(12, 1fr);
  25.         column-gap: 5px;
  26.       }
  27.       .cell {
  28.         width: 100%;
  29.         min-height: 40px;
  30.         background-color: #3e3e;
  31.         text-align: center;
  32.         line-height: 40px;
  33.         outline: 1px solid red;
  34.       }
  35.       .col-12 {
  36.         grid-column: span 12;
  37.       }
  38.       .col-11 {
  39.         grid-column: span 11;
  40.       }
  41.       .col-10 {
  42.         grid-column: span 10;
  43.       }
  44.       .col-9 {
  45.         grid-column: span 9;
  46.       }
  47.       .col-8 {
  48.         grid-column: span 8;
  49.       }
  50.       .col-7 {
  51.         grid-column: span 7;
  52.       }
  53.       .col-6 {
  54.         grid-column: span 6;
  55.       }
  56.       .col-5 {
  57.         grid-column: span 5;
  58.       }
  59.       .col-4 {
  60.         grid-column: span 4;
  61.       }
  62.       .col-3 {
  63.         grid-column: span 3;
  64.       }
  65.       .col-2 {
  66.         grid-column: span 2;
  67.       }
  68.       .col-1 {
  69.         grid-column: span 1;
  70.       }
  71.     </style>
  72.   </head>
  73.   <body>
  74.     <div class="container">
  75.       <div class="cell col-4">
  76.         4
  77.       </div>
  78.       <div class="cell col-8">
  79.         8
  80.       </div>
  81.     </div>
  83.     <div class="container">
  84.       <div class="cell col-2">
  85.         2
  86.       </div>
  87.       <div class="cell col-1">
  88.         1
  89.       </div>
  90.     </div>
  91.     <div class="container">
  92.       <div class="cell col-1">
  93.         1
  94.       </div>
  95.       <div class="cell col-2">
  96.         2
  97.       </div>
  98.       <div class="cell col-3">
  99.         <span>3</span>
  100.       </div>
  101.       <div class="cell col-4">
  102.         4
  103.       </div>
  104.     </div>
  105.   </body>
  106. </html>

2、代碼運(yùn)行效果：

三、總結(jié)：

1、利用grid布局響應(yīng)式網(wǎng)站（我的相冊(cè)）：
重點(diǎn)在于：

  1. /*柵格項(xiàng)目的自動(dòng)填充*/
  2. grid-template-columns: repeat(auto-fill, 280px);
  3. grid-template-rows: repeat(auto-fill, 300px);
  4. gap: 20px 10px;
  5. /*設(shè)置隱式柵格的高度*/
  6. grid-auto-rows: 300px;

2、calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。

  • 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)；
  • 任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；
  • calc()函數(shù)支持 “+”, “-“, “*”, “/“ 運(yùn)算；
  • calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；

3、12柵格布局重點(diǎn)在于grid網(wǎng)格域的布局：span 3偏移單元格的，設(shè)個(gè)多個(gè)不同的類(lèi)樣式，來(lái)控制項(xiàng)目在12個(gè)單元格上的布局；

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

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

老師批語(yǔ)：css博大精深
本博文版權(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)：公益在線(xiàn)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é)