CSS 教程
很多網頁都是基于網格設計的,這說明網頁是按列來布局的。
使用網格視圖有助于我們設計網頁。這讓我們向網頁添加元素變的更簡單。
響應式網格視圖通常是 12 列,寬度為100%,在瀏覽器窗口大小調整時會自動伸縮。
接下來我們來創(chuàng)建一個響應式網格視圖。
首先確保所有的 HTML 元素都有 box-sizing 屬性且設置為 border-box。
確保邊距和邊框包含在元素的寬度和高度間。
添加如下代碼:
* { box-sizing: border-box; }
查看更多 box-sizing 內容請點擊:CSS3 box-sizing 屬性 。
以下實例演示了簡單的響應式網頁,包含兩列:
以上實例包含兩列。
12 列的網格系統(tǒng)可以更好的控制響應式網頁。
首先我們可以計算每列的百分比: 100% / 12 列 = 8.33%。
在每列中指定 class, class="col-" 用于定義每列有幾個 span :
所有的列向左浮動,間距(padding) 為 15px:
每一行使用 <div> 包裹。所有列數加起來應為 12:
列中行為左浮動,并添加清除浮動:
我們可以添加一些樣式和顏色,讓其更好看: