色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

960css盒子模型代碼

錢淋西2年前11瀏覽0評論

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,然后在內部使用導航盒子模型和內容盒子模型實現頁面左右布局,在頁眉和頁腳中使用頭部盒子模型和底部盒子模型實現樣式設置。