CSS布局設計素描黑白

body {
background-color: #f5f5f5; /*背景色*/
font-family: "Verdana", sans-serif; /*字體選擇*/
margin: 0px; /*頁面邊界*/
}
header {
height: 50px; /*頭部高度*/
background-color: #333; /*頭部背景色*/
color: #fff; /*標題顏色*/
text-align: center; /*標題居中*/
padding-top: 20px; /*標題上邊距*/
}
nav {
float: left; /*左浮動*/
width: 20%; /*左側導航欄寬度*/
height: 500px; /*導航欄高度*/
background-color: #ccc; /*導航欄背景色*/
padding-top: 10px; /*導航欄上邊距*/
box-sizing: border-box; /*邊界計入寬度*/
}
article {
float: left; /*左浮動*/
width: 60%; /*正文寬度*/
height: 500px; /*正文高度*/
background-color: #fff; /*正文背景色*/
padding-top: 10px; /*正文上邊距*/
box-sizing: border-box; /*邊界計入寬度*/
}
aside {
float: right; /*右浮動*/
width: 20%; /*右側邊欄寬度*/
height: 500px; /*右側邊欄高度*/
background-color: #999; /*右側邊欄背景色*/
padding-top: 10px; /*右側邊欄上邊距*/
box-sizing: border-box; /*邊界計入寬度*/
}
footer {
clear: both; /*清除浮動*/
height: 50px; /*底部高度*/
background-color: #333; /*底部背景色*/
color: #fff; /*內容顏色*/
text-align: center; /*內容居中*/
padding-top: 20px; /*內容上邊距*/
}

上面這組CSS代碼可以設計一個三欄布局網頁，其中頭部和底部為單欄，左側為導航欄，右側為邊欄，中間為正文。通過設置float屬性控制左右浮動，設置寬度和高度，設計簡潔美觀的黑白布局。