<div> 是 HTML 中的一個常用標簽，用于在網頁中創建一個容器，通過給這個容器添加 CSS 樣式，可以實現各種布局效果和樣式美化。CSS（層疊樣式表）是一種用于描述網頁外觀和格式的語言，可以控制元素的大小、顏色、字體、邊距等等。通過合理地使用 <div> 和 CSS，我們可以創造出各種各樣的網頁效果。
下面我們來看幾個實際的案例，演示如何使用 <div> 和 CSS 來生成各種布局和樣式。
，我們來創建一個簡單的網頁布局，實現標題和內容的分割。代碼如下：
在上述代碼中，我們定義了一個類名為 "container" 的 <div>，寬度為 800px，居中顯示。這個容器包含了一個類名為 "header" 的 <div>，背景顏色為 #ebebeb，內部有一個標題。還有一個類名為 "content" 的 <div>，背景顏色為 #ffffff，內部有一段文字內容。通過給這些 <div> 添加樣式，我們實現了標題和內容的分割效果。
接下來，我們來創建一個響應式的網頁布局，使得網頁適應不同屏幕大小。代碼如下：
在上述代碼中，我們依然使用 <div> 來創建一個容器，并為其添加一個類名為 "container" 的樣式。容器的寬度設置為 100%，最大寬度為 1200px，通過設置 margin:auto 可以使其居中顯示。我們還給容器的子元素添加了一個 flex 布局樣式，在不同屏幕大小下，這些子元素會自動換行并居中對齊。這樣，我們就實現了一個響應式的網頁布局。
最后，我們來創建一個懸浮層效果，實現鼠標移入時彈出另一層內容的效果。代碼如下：
在上述代碼中，我們創建了一個容器，并為其設置了一個類名為 "container" 的樣式。容器內部有一個文本和一個類名為 "popup" 的 <div> 元素。通過設置 "popup" 的樣式為絕對定位，并將其隱藏起來（display: none），只有在鼠標移入 "container" 時，通過設置容器的偽類 :hover 為顯示（display:block），"popup" 才會彈出顯示內容。這樣，我們就實現了一個簡單的懸浮層效果。
通過以上幾個案例，我們可以看到 <div> 與 CSS 相結合可以創造出各種各樣的網頁布局和樣式。在實際開發中，合理地使用 <div> 和 CSS 可以大大提升網頁的美觀程度和用戶體驗。如果你對 <div> 和 CSS 還不熟悉，建議多閱讀相關的文檔和實踐，不斷提升自己的技能水平。
下面我們來看幾個實際的案例，演示如何使用 <div> 和 CSS 來生成各種布局和樣式。
，我們來創建一個簡單的網頁布局，實現標題和內容的分割。代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 800px;
margin: 0 auto;
}
<br>
.header {
background-color: #ebebeb;
padding: 20px;
}
<br>
.content {
background-color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>這是標題</h1>
</div>
<div class="content">
<p>這是內容</p>
</div>
</div>
</body>
</html>在上述代碼中，我們定義了一個類名為 "container" 的 <div>，寬度為 800px，居中顯示。這個容器包含了一個類名為 "header" 的 <div>，背景顏色為 #ebebeb，內部有一個標題。還有一個類名為 "content" 的 <div>，背景顏色為 #ffffff，內部有一段文字內容。通過給這些 <div> 添加樣式，我們實現了標題和內容的分割效果。
接下來，我們來創建一個響應式的網頁布局，使得網頁適應不同屏幕大小。代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
<br>
.box {
width: 300px;
height: 200px;
margin: 10px;
background-color: #ebebeb;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>在上述代碼中，我們依然使用 <div> 來創建一個容器，并為其添加一個類名為 "container" 的樣式。容器的寬度設置為 100%，最大寬度為 1200px，通過設置 margin:auto 可以使其居中顯示。我們還給容器的子元素添加了一個 flex 布局樣式，在不同屏幕大小下，這些子元素會自動換行并居中對齊。這樣，我們就實現了一個響應式的網頁布局。
最后，我們來創建一個懸浮層效果，實現鼠標移入時彈出另一層內容的效果。代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: #ebebeb;
text-align: center;
}
<br>
.popup {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: #ffffff;
display: none;
}
<br>
.container:hover .popup {
display: block;
}
</style>
</head>
<body>
<div class="container">
<p>懸浮層</p>
<div class="popup">
<p>彈出內容</p>
</div>
</div>
</body>
</html>在上述代碼中，我們創建了一個容器，并為其設置了一個類名為 "container" 的樣式。容器內部有一個文本和一個類名為 "popup" 的 <div> 元素。通過設置 "popup" 的樣式為絕對定位，并將其隱藏起來（display: none），只有在鼠標移入 "container" 時，通過設置容器的偽類 :hover 為顯示（display:block），"popup" 才會彈出顯示內容。這樣，我們就實現了一個簡單的懸浮層效果。
通過以上幾個案例，我們可以看到 <div> 與 CSS 相結合可以創造出各種各樣的網頁布局和樣式。在實際開發中，合理地使用 <div> 和 CSS 可以大大提升網頁的美觀程度和用戶體驗。如果你對 <div> 和 CSS 還不熟悉，建議多閱讀相關的文檔和實踐，不斷提升自己的技能水平。
上一篇div css靜態