案例一：居中對(duì)齊
有時(shí)候我們希望將<div>中的內(nèi)容在頁(yè)面中居中對(duì)齊。下面是一個(gè)簡(jiǎn)單的示例：
<div class="center"> <p>這是居中對(duì)齊的文本</p> </div>
在上述代碼中，我們添加了一個(gè)名為"center"的CSS類(lèi)。接下來(lái)，在CSS樣式表中設(shè)置該類(lèi)的屬性，使其在水平和垂直方向上居中對(duì)齊：
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}上述代碼中的"flex"屬性將使<div>成為一個(gè)彈性容器，"justify-content"和"align-items"屬性分別用于水平和垂直方向上的對(duì)齊，"height"屬性則將<div>的高度設(shè)置為視口的高度。
案例二：網(wǎng)格布局
網(wǎng)格布局在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中越來(lái)越受歡迎，可以方便地創(chuàng)建多列布局。下面是一個(gè)示例：
<div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
在上述代碼中，我們創(chuàng)建了一個(gè)名為"grid"的<div>容器，并在其中嵌套了三個(gè)<div>，它們具有相同的"class"屬性。接下來(lái)，我們?cè)贑SS樣式表中設(shè)置這些類(lèi)的屬性，以創(chuàng)建一個(gè)網(wǎng)格布局：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
<br>
.item {
background-color: lightgray;
padding: 20px;
}上述代碼中的"display: grid"屬性將將<div>容器轉(zhuǎn)換為網(wǎng)格布局，"grid-template-columns"屬性指定了每列的寬度和數(shù)量，"grid-gap"屬性用于設(shè)置網(wǎng)格項(xiàng)之間的間隔。此外，我們還為網(wǎng)格項(xiàng)的類(lèi)添加了背景顏色和內(nèi)邊距。
案例三：響應(yīng)式布局
在移動(dòng)設(shè)備和不同屏幕尺寸上呈現(xiàn)的網(wǎng)頁(yè)越來(lái)越普遍，因此需要使用響應(yīng)式布局來(lái)適應(yīng)各種屏幕。下面是一個(gè)示例：
<div class="responsive"> <div>1</div> <div>2</div> <div>3</div> </div>
在上述代碼中，我們創(chuàng)建了一個(gè)名為"responsive"的<div>容器，并在其中嵌套了三個(gè)<div>，它們沒(méi)有指定任何類(lèi)或?qū)傩浴＝酉聛?lái)，我們?cè)贑SS樣式表中設(shè)置這些<div>的屬性，以創(chuàng)建一個(gè)響應(yīng)式布局：
.responsive {
display: flex;
flex-wrap: wrap;
}
<br>
.responsive div {
width: 50%;
}
<br>
@media screen and (max-width: 600px) {
.responsive div {
width: 100%;
}
}在上述代碼中，我們使用"display: flex"屬性將<div>容器轉(zhuǎn)換為彈性布局，并使用"flex-wrap"屬性將網(wǎng)格項(xiàng)折行。此外，我們使用@media查詢?yōu)樾∑聊唬▽挾刃∮?00px）下的網(wǎng)格項(xiàng)設(shè)置全寬度布局。
通過(guò)以上幾個(gè)代碼案例，我們介紹了一些常用的<div> CSS模板，包括居中對(duì)齊、網(wǎng)格布局和響應(yīng)式布局。這些模板可以幫助開(kāi)發(fā)者更快地創(chuàng)建各種網(wǎng)頁(yè)布局。通過(guò)靈活運(yùn)用CSS屬性和樣式，我們可以實(shí)現(xiàn)豐富多樣的界面效果和用戶體驗(yàn)。希望本文對(duì)您有所幫助！