960css盒子模型是一款用于網頁布局的樣式框架,它采用的是CSS盒子模型。下面是一個960css盒子模型代碼的示例:
/*清除樣式*/ *{margin:0;padding:0;} /*網頁寬度960px*/ .container{width:960px;margin:0 auto;} /*頭部*/ .header{height:80px;background-color:#333;} /*導航*/ .nav{height:40px;background-color:#666;} .nav li{float:left;width:120px;height:40px;line-height:40px;text-align:center;} .nav a{color:#fff;} /*內容*/ .content{overflow:hidden;} .content .left{float:left;width:200px;padding-right:20px;} .content .right{float:right;width:740px;padding-left:20px;} /*底部*/ .footer{height:60px;background-color:#333;color:#fff;text-align:center;line-height:60px;}
在此代碼中,我們可以看到以下幾個盒子模型:
- 容器盒子模型:.container {},用于包含整個頁面內容,并設置了頁面寬度為960px。
- 頭部盒子模型:.header {},用于設置頁眉樣式,包括高度和背景色等。
- 導航盒子模型:.nav {},用于設置導航欄樣式,其中每個導航項也被包含在一個盒子模型中,用于設置每個項的寬度和居左浮動。
- 內容盒子模型:.content {},用于包含頁面內容,其中左側和右側也各自被包含在一個盒子模型中,用于設置布局和內邊距。
- 底部盒子模型:.footer {},用于設置頁腳樣式,包括高度、背景色、顏色和居中對齊等。
在使用960css盒子模型時,我們可以方便地利用這些盒子模型來實現網頁布局。例如,我們可以設置容器盒子模型的寬度為960px,然后在內部使用導航盒子模型和內容盒子模型實現頁面左右布局,在頁眉和頁腳中使用頭部盒子模型和底部盒子模型實現樣式設置。
上一篇css td下邊線
下一篇css td自動隱藏