在網(wǎng)頁設(shè)計(jì)中，常常需要把頁面劃分成不同的部分，比如網(wǎng)站的頂部、導(dǎo)航欄、主要內(nèi)容區(qū)、底部等等。為了實(shí)現(xiàn)這樣的布局，我們可以使用 HTML 的 div 標(biāo)簽來劃分頁面，并用 CSS 來給不同的部分添加樣式。
下面是一個(gè)簡單的 div 加 CSS 切頁面的教程：
<!DOCTYPE html>
<html>
<head>
<title>頁面標(biāo)題</title>
<style>
/* 給頁面添加背景色 */
body {
background-color: #f5f5f5;
}
/* 定義導(dǎo)航欄樣式 */
#nav {
background-color: #333;
color: #fff;
height: 50px;
line-height: 50px;
text-align: center;
}
/* 定義主要內(nèi)容區(qū)樣式 */
#main {
width: 800px;
margin: 0 auto;
padding-top: 20px;
background-color: #fff;
}
/* 定義底部樣式 */
#footer {
background-color: #333;
color: #fff;
height: 50px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">服務(wù)</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
<div id="main">
<h1>歡迎訪問我們的網(wǎng)站！</h1>
<p>我們提供最優(yōu)質(zhì)的產(chǎn)品和服務(wù)，幫助您實(shí)現(xiàn)業(yè)務(wù)增長！</p>
</div>
<div id="footer">
<p>Copyright ? 2021</p>
</div>
</body>
</html>在這個(gè)例子中，我們使用 id 屬性為不同的部分命名，并在 CSS 中分別給他們添加樣式。比如導(dǎo)航欄的樣式，我們使用 #nav 來定義。這個(gè)選擇器會選擇頁面中 id 為 nav 的元素，并應(yīng)用其中的樣式規(guī)則。
至此，我們就成功地使用 div 加 CSS 切了一個(gè)簡單的頁面。當(dāng)然，在實(shí)際開發(fā)中，我們需要更復(fù)雜的頁面布局和樣式，但這個(gè)例子可以幫助我們了解基本的 div 加 CSS 切頁面的方法。