建站
咨詢
售后
建站咨詢
新聞中心
響應(yīng)式 Web 設(shè)計(jì) - 網(wǎng)格視圖
什么是網(wǎng)格視圖?
很多網(wǎng)頁都是基于網(wǎng)格設(shè)計(jì)的，這說明網(wǎng)頁是按列來布局的。
成都創(chuàng)新互聯(lián)專業(yè)提供IDC機(jī)房托管服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買IDC機(jī)房托管服務(wù)，并享受7*24小時(shí)金牌售后服務(wù)。
使用網(wǎng)格視圖有助于我們?cè)O(shè)計(jì)網(wǎng)頁。這讓我們向網(wǎng)頁添加元素變的更簡(jiǎn)單。
響應(yīng)式網(wǎng)格視圖通常是 12 列，寬度為100%，在瀏覽器窗口大小調(diào)整時(shí)會(huì)自動(dòng)伸縮。
響應(yīng)式網(wǎng)格視圖
創(chuàng)建響應(yīng)式網(wǎng)格視圖
接下來我們來創(chuàng)建一個(gè)響應(yīng)式網(wǎng)格視圖。
首先確保所有的 HTML 元素都有 box-sizing 屬性且設(shè)置為 border-box。
確保邊距和邊框包含在元素的寬度和高度間。
添加如下代碼：
* { box-sizing: border-box; }
* {
box-sizing: border-box;
}
查看更多 box-sizing 內(nèi)容請(qǐng)點(diǎn)擊：CSS3 box-sizing 屬性 。
以下實(shí)例演示了簡(jiǎn)單的響應(yīng)式網(wǎng)頁，包含兩列：
實(shí)例
.menu {
width:
25%;
float:
left;}
.main {
width:
75%;
float:
left;}
嘗試一下 ?
以上實(shí)例包含兩列。
12 列的網(wǎng)格系統(tǒng)可以更好的控制響應(yīng)式網(wǎng)頁。
首先我們可以計(jì)算每列的百分比: 100% / 12 列 = 8.33%。
在每列中指定 class， class="col-" 用于定義每列有幾個(gè) span ：
CSS:
.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%;}
嘗試一下 ?
所有的列向左浮動(dòng)，間距(padding) 為 15px：
CSS:
[class*="col-"] {
float:
left;
padding:
15px;
border:
1px solid red;}
每一行使用
<
div
class=
"row"
>
<
div
class=
"col-3"
>...
<
/div
>
<
div
class=
"col-9"
>...
<
/div
>
<
/div
>
列中行為左浮動(dòng)，并添加清除浮動(dòng)：
CSS:
.row:after {
content:
"";
clear:
both;
display:
block;}
我們可以添加一些樣式和顏色，讓其更好看：
實(shí)例
.header {
background-color:
#9933cc;
color:
#ffffff;
padding:
15px;}
.menu li {
padding:
8px;
margin-bottom:
7px;
background-color :
#33b5e5;
color:
#ffffff;
box-shadow:
0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
.menu li:hover {
background-color:
#0099cc;}
嘗試一下 ?
新聞名稱：創(chuàng)新互聯(lián)CSS教程：響應(yīng)式Web設(shè)計(jì)–網(wǎng)格視圖
文章源于：http://fisionsoft.com.cn/article/dhoepei.html
