網(wǎng)頁布局是制作網(wǎng)頁的重要環(huán)節(jié)之一，而div加css網(wǎng)頁布局是目前最常用的一種方法。在使用div加css網(wǎng)頁布局時(shí)，我們需要通過給div設(shè)置css樣式來實(shí)現(xiàn)網(wǎng)頁的布局效果。

/* 基礎(chǔ)樣式 */
*{
margin: 0;
padding: 0;
}
body{
font-family: "Microsoft YaHei";
font-size: 14px;
}
/* 頭部樣式 */
header{
width: 100%;
height: 60px;
background-color: #333;
color: #fff;
}
/* 導(dǎo)航欄樣式 */
nav{
width: 100%;
height: 40px;
background-color: #f3f3f3;
}
nav ul{
list-style: none;
display: flex;
}
nav li{
margin-right: 20px;
}
nav a{
text-decoration: none;
color: #333;
}
/* 內(nèi)容區(qū)樣式 */
#content{
width: 960px;
margin: 20px auto;
display: flex;
}
#content main{
flex: 1;
margin-right: 20px;
}
#content aside{
width: 200px;
}
/* 腳部樣式 */
footer{
width: 100%;
height: 60px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 60px;
}

如上所示，我們通過給各個(gè)div元素設(shè)置不同的css樣式，來實(shí)現(xiàn)網(wǎng)頁的布局效果。其中，我們還使用了flex布局來實(shí)現(xiàn)了內(nèi)容區(qū)的左右結(jié)構(gòu)。