CSS 班級(jí)網(wǎng)頁(yè)布局代碼

/*
本示例演示班級(jí)網(wǎng)頁(yè)的布局代碼
*/
/* 設(shè)置網(wǎng)頁(yè)全局樣式 */
body {
font-family: Arial, sans-serif;
background-color: #F7F7F7;
margin: 0;
padding: 0;
}
/* 設(shè)置頁(yè)眉 */
header {
background-color: #191919;
padding: 20px;
color: #FFFFFF;
}
/* 設(shè)置頁(yè)眉標(biāo)題 */
header h1 {
font-size: 48px;
margin: 0;
}
/* 設(shè)置導(dǎo)航欄 */
nav {
background-color: #333;
color: #FFFFFF;
overflow: hidden;
}
/* 設(shè)置導(dǎo)航欄鏈接的樣式 */
nav a {
float: left;
font-size: 16px;
color: #FFFFFF;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
/* 設(shè)置導(dǎo)航欄鏈接的懸停樣式 */
nav a:hover {
background-color: #111;
}
/* 設(shè)置正文部分 */
article {
margin: 20px;
padding: 20px;
background-color: #FFFFFF;
border-radius: 5px;
}
/* 設(shè)置頁(yè)腳 */
footer {
background-color: #191919;
padding: 20px;
color: #FFFFFF;
text-align: center;
}
/* 設(shè)置頁(yè)腳鏈接樣式 */
footer a {
color: #FFFFFF;
text-decoration: none;
}
/* 設(shè)置頁(yè)腳鏈接懸停樣式 */
footer a:hover {
text-decoration: underline;
}

以上代碼示例展示了 CSS 班級(jí)網(wǎng)頁(yè)布局代碼。該布局包括頁(yè)眉、導(dǎo)航欄、正文部分以及頁(yè)腳。通過(guò)設(shè)置 HTML 元素的樣式，可以實(shí)現(xiàn)不同元素的布局和樣式效果，從而讓班級(jí)網(wǎng)頁(yè)更加美觀、易讀。