以下是幾個(gè)關(guān)于<div>和CSS的入門案例：
案例一：創(chuàng)建一個(gè)基本的網(wǎng)頁(yè)布局
<code><!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: blue;
height: 100px;
}
<br>
#content {
background-color: white;
height: 500px;
}
<br>
#footer {
background-color: gray;
height: 200px;
}
</style>
</head>
<body>
<br>
<div id="header"></div>
<br>
<div id="content"></div>
<br>
<div id="footer"></div>
<br>
</body>
</html>
</code>在上述代碼中，我們使用了三個(gè)<div>元素，分別給它們?cè)O(shè)置了不同的id屬性。然后，在CSS中，我們?yōu)檫@些元素設(shè)置了不同的背景顏色和高度，從而創(chuàng)建了一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)布局。
案例二：使用<div>和CSS實(shí)現(xiàn)響應(yīng)式布局
<code><!DOCTYPE html>
<html>
<head>
<style>
#container {
display: flex;
flex-wrap: wrap;
}
<br>
.box {
width: 200px;
height: 200px;
margin: 10px;
background-color: gray;
}
</style>
</head>
<body>
<br>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<br>
</body>
</html>
</code>在這個(gè)案例中，我們使用了<div>和CSS的flexbox布局。通過(guò)設(shè)置父容器的display為flex，可以使子元素自動(dòng)適應(yīng)不同的屏幕大小。子元素的寬度也可以通過(guò)設(shè)置固定值或百分比來(lái)實(shí)現(xiàn)響應(yīng)式布局。
案例三：使用<div>和CSS創(chuàng)建導(dǎo)航菜單
<code><!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background-color: black;
overflow: hidden;
}
<br>
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<br>
.navbar a:hover {
background-color: gray;
}
</style>
</head>
<body>
<br>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<br>
</body>
</html>
</code>在這個(gè)案例中，我們創(chuàng)建了一個(gè)簡(jiǎn)單的導(dǎo)航菜單。通過(guò)設(shè)置父元素的overflow為hidden，我們可以隱藏溢出的內(nèi)容，實(shí)現(xiàn)導(dǎo)航菜單的整體樣式。同時(shí)，通過(guò)設(shè)置子元素為浮動(dòng)，可以使導(dǎo)航欄水平排列。當(dāng)用戶將鼠標(biāo)懸停在導(dǎo)航鏈接上時(shí)，背景顏色也會(huì)發(fā)生變化，提供更好的用戶體驗(yàn)。
以上是一些關(guān)于<div>和CSS入門的案例，希望能為初學(xué)者提供一些基礎(chǔ)知識(shí)和實(shí)踐經(jīng)驗(yàn)。通過(guò)熟練掌握<div>和CSS的使用方法，開(kāi)發(fā)者能夠創(chuàng)建出美觀且功能強(qiáng)大的網(wǎng)頁(yè)。