第一個案例是一個簡單的網(wǎng)頁布局。我們可以在<head>標(biāo)簽中定義一個<style>標(biāo)簽，并設(shè)置一些基本樣式，如設(shè)置整個頁面的背景顏色和文本的顏色。然后，在<body>標(biāo)簽中使用<div>標(biāo)簽創(chuàng)建兩個區(qū)塊，分別分布在網(wǎng)頁的左右兩側(cè)。在CSS樣式中，我們設(shè)置這兩個區(qū)塊的寬度、高度、背景顏色和邊距。如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡單網(wǎng)頁布局</title>
<style>
body {
background-color: lightgray;
color: darkblue;
}
.left-block {
width: 200px;
height: 300px;
background-color: lightblue;
margin: 10px;
}
.right-block {
width: 200px;
height: 300px;
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="left-block"></div>
<div class="right-block"></div>
</body>
</html>運(yùn)行以上代碼，您將會看到一個具有兩個背景色不同的區(qū)塊的網(wǎng)頁。左側(cè)的區(qū)塊寬度200像素，高度300像素，背景色為淺藍(lán)色，右側(cè)的區(qū)塊寬度和高度與左側(cè)相同，背景色為淺綠色。
第二個案例是一個響應(yīng)式網(wǎng)頁布局。響應(yīng)式布局是現(xiàn)代網(wǎng)頁設(shè)計(jì)的一個重要概念，使得網(wǎng)頁可以適應(yīng)不同的設(shè)備和屏幕尺寸。我們可以通過設(shè)置CSS樣式，使得<div>區(qū)塊在不同的屏幕尺寸下自動調(diào)整布局。以下是一個簡單的響應(yīng)式網(wǎng)頁布局的代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>響應(yīng)式網(wǎng)頁布局</title>
<style>
body {
background-color: lightgray;
color: darkblue;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 200px;
height: 300px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>在上述代碼中，我們使用了CSS的flexbox特性來創(chuàng)建一個容器（class為.container）和三個盒子（class為.box）。容器通過設(shè)置display屬性為flex，以及justify-content屬性為center，實(shí)現(xiàn)在頁面中居中顯示這三個盒子。而盒子的寬度固定為200像素，高度為300像素，背景顏色為淺藍(lán)色。
通過以上兩個案例，我們可以看到使用<div>標(biāo)簽及CSS樣式可以實(shí)現(xiàn)出美觀的網(wǎng)頁布局。根據(jù)具體的需求可以設(shè)置不同的寬度、高度、背景顏色、邊距等屬性，從而打造出令人滿意的網(wǎng)頁設(shè)計(jì)。希望這些案例能夠幫助您更好地理解如何使用<div>及CSS樣式創(chuàng)建美觀布局。