在網頁設計中，常常需要把頁面劃分成不同的部分，比如網站的頂部、導航欄、主要內容區、底部等等。為了實現這樣的布局，我們可以使用 HTML 的 div 標簽來劃分頁面，并用 CSS 來給不同的部分添加樣式。
下面是一個簡單的 div 加 CSS 切頁面的教程：
<!DOCTYPE html>
<html>
<head>
<title>頁面標題</title>
<style>
/* 給頁面添加背景色 */
body {
background-color: #f5f5f5;
}
/* 定義導航欄樣式 */
#nav {
background-color: #333;
color: #fff;
height: 50px;
line-height: 50px;
text-align: center;
}
/* 定義主要內容區樣式 */
#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="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
<div id="main">
<h1>歡迎訪問我們的網站！</h1>
<p>我們提供最優質的產品和服務，幫助您實現業務增長！</p>
</div>
<div id="footer">
<p>Copyright ? 2021</p>
</div>
</body>
</html>在這個例子中，我們使用 id 屬性為不同的部分命名，并在 CSS 中分別給他們添加樣式。比如導航欄的樣式，我們使用 #nav 來定義。這個選擇器會選擇頁面中 id 為 nav 的元素，并應用其中的樣式規則。
至此，我們就成功地使用 div 加 CSS 切了一個簡單的頁面。當然，在實際開發中，我們需要更復雜的頁面布局和樣式，但這個例子可以幫助我們了解基本的 div 加 CSS 切頁面的方法。
上一篇div右下角對勾css
下一篇div和css什么關系