<div>和CSS在網頁設計中扮演著非常重要的角色。div（division）是一個HTML標簽，用于創建容器，而CSS（Cascading Style Sheets）則用于對這些容器進行樣式定義。通過使用div和CSS，我們可以輕松地創建漂亮的網頁布局，并為網頁添加各種樣式。本文將介紹如何使用div和CSS來建立一個完整的網站，并提供一些代碼案例和真實案例作為參考，幫助讀者更好地理解和應用這些技術。
，我們需要了解如何使用div來創建容器。在HTML中，通過使用<div>標簽來定義一個容器。以下是一個簡單的例子：
<div id="container"> 這是一個容器 </div>
在上面的代碼中，我們創建了一個id為"container"的div容器，并在其中添加了一些文本。接下來，我們可以使用CSS來對這個容器進行樣式定義。
在CSS中，我們可以使用選擇器來選擇需要樣式化的元素。在這個例子中，我們將使用id選擇器來選擇剛剛創建的容器。以下是一個簡單的例子：
#container {
background-color: yellow;
width: 200px;
height: 200px;
}在上面的代碼中，我們使用了id選擇器"#container"來選擇id為"container"的div容器，并對其進行樣式定義。在這個例子中，我們給容器設置了黃色的背景顏色，以及200像素的寬度和高度。
通過使用div和CSS，我們可以輕松地創建復雜的網頁布局。以下是一個使用div和CSS創建網頁布局的例子：
<div id="header"> 這是頭部 </div> <br> <div id="content"> 這是內容 </div> <br> <div id="sidebar"> 這是側邊欄 </div> <br> <div id="footer"> 這是底部 </div>
#header {
background-color: red;
height: 100px;
}
<br>
#content {
background-color: green;
height: 400px;
width: 70%;
}
<br>
#sidebar {
background-color: blue;
height: 400px;
width: 30%;
float: right;
}
<br>
#footer {
background-color: yellow;
height: 100px;
clear: both;
}在上面的代碼中，我們創建了一個網頁布局，包括一個頭部、內容、側邊欄和底部。通過使用CSS，我們對每個div容器進行了樣式定義。例如，我們給頭部設置了紅色的背景顏色和100像素的高度，給內容設置了綠色的背景顏色、70%的寬度和400像素的高度，給側邊欄設置了藍色的背景顏色、30%的寬度和400像素的高度，并使用了"float: right"屬性使其靠右浮動，給底部設置了黃色的背景顏色、100像素的高度，并使用了"clear: both"屬性清除浮動。
除了創建網頁布局，我們還可以使用div和CSS來添加各種樣式。以下是一些常見的樣式定義：
<div id="example"> 這是一個例子 </div>
#example {
background-color: pink;
width: 300px;
height: 200px;
border: 1px solid black;
border-radius: 10px;
box-shadow: 5px 5px 5px gray;
text-align: center;
font-size: 20px;
color: white;
padding: 10px;
}在上面的代碼中，我們給一個id為"example"的div容器添加了一些樣式。例如，我們給容器設置了粉色的背景顏色、300像素的寬度和200像素的高度，給容器添加了1像素的黑色邊框，并通過使用"border-radius"屬性將邊框的角設置為10像素的圓角，使用"box-shadow"屬性給容器添加了一個灰色的陰影，使用"text-align"屬性設置文本居中對齊，使用"font-size"屬性設置字體大小為20像素，使用"color"屬性設置字體顏色為白色，使用"padding"屬性設置內邊距為10像素。
綜上所述，通過使用div和CSS，我們可以靈活地創建網頁布局，并為網頁添加各種樣式。希望本文的介紹和示例能夠幫助讀者更好地理解和應用這些技術，從而提升自己的網頁設計能力。