閱讀911 返回首頁    go 阿裏雲 go 技術社區[雲棲]

簡單的柵格係統

簡單的柵格係統-流式布局(類似bootstrap的柵格係統)

  • 什麼是流式布局

    • 所謂流式布局，就是頁麵元素的寬度按照屏幕進行適配調整。簡單來說，就是 HTML 頁麵中的元素會根據分辨率的不同而變化大小，但位置並不會有任何變化。
    • 這種布局的主要問題就是，如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。

  • 創建流式布局

    • 流式布局通常被分為 12 列。將 HTML 頁麵的寬度設置為 100%，這樣 HTML 頁麵會根據瀏覽器窗口大小的變化而自動伸縮。
    • 計算每列所占的百分比：

      100% / 12 列 = 8.33%

    • 根據以上的計算結果，設置 CSS 的 class：
      
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
    • 將所有列設置為浮動（一般為左浮動）稍加padding
      
[class*='col-']{
    float: left;
    padding: 1%;
}
    • 將 HTML 頁麵中所有的元素 box-sizing 設置為 border-box。
      • 當 box-sizing 的值為 content-box（默認值），標準盒模型。元素尺寸計算公式：

        width = 內容的寬度，height = 內容的高度

        寬度和高度都不包含內容的邊框（border）和內邊距（padding）。
      • 當 box-sizing 的值為 border-box，IE 怪異模式（Quirks mode）使用的 盒模型 。元素尺寸計算公式：

        width = border + padding + 內容的寬度，height = border + padding + 內容的高度

        此時外邊距和邊框將會包括在盒子中。
最終如CSS/small-grid.css;可預覽效果
複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高仿柵格係統</title>
    <!--柵格係統-->
    <link rel="stylesheet" href="css/small-grid.css">
    <!---->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="main small-container">
        <!--一列12個-->
        <div class="small-row">
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
        </div>
        <div class="small-row">
            <div class="col-1 have-border">A</div>
            <div class="col-11 have-border">B</div>                       
        </div>
        <!--一列6個-->
        <div class="small-row">
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-2 have-border">A</div>
            <div class="col-10 have-border">B</div>
        </div>
        <!--4個-->
        <div class="small-row">
            <div class="col-3 have-border">A</div>
            <div class="col-3 have-border">A</div>
            <div class="col-3 have-border">A</div>
            <div class="col-3 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-3 have-border">A</div>
            <div class="col-9 have-border">B</div>
        </div>
        <!--3個-->
         <div class="small-row">
            <div class="col-4 have-border">A</div>
            <div class="col-4 have-border">A</div>
            <div class="col-4 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-4 have-border">A</div>
            <div class="col-8 have-border">B</div>
        </div>
        <div class="small-row">
            <div class="col-5 have-border">A</div>
            <div class="col-7 have-border">B</div>
        </div>
        <div class="small-row">
            <div class="col-6 have-border">A</div>
            <div class="col-6 have-border">B</div>
        </div>
    </div>
</body>
</html>
複製代碼
複製代碼
*{
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    box-sizing: border-box;
}

.small-container{
    width: 100%;
}
.small-container,.small-row{
    box-sizing: border-box;
}
.small-row::before,
.small-row::after{
    content: '';
    display: block;
    visibility: hidden;
    clear: both;
    zoom: 1;
}
[class*='col-']{
    float: left;
    padding: 1%;
}
.col-1{
    width: 8.33%;
}
.col-2{
    width: 16.66%;
}
.col-3{
    width: 25%;
}
.col-4{
    width: 33.33%;
}
.col-5{
    width: 41.66%;
}
.col-6{
    width: 50%;
}
.col-7{
    width: 58.33%;
}
.col-8{
    width: 66.66%;
}
.col-9{
    width: 75%;
}
.col-10{
    width: 83.33%;
}
.col-11{
    width: 91.66%;
}
.col-12{
    width: 100%;
}

最後更新：2017-11-05 11:34:52

  上一篇：go  移動端基礎事件和交互(未完待續)
  下一篇：go  圖片的賴加載(lazyLoad)