<div class="container"></div>接下來(lái)，在CSS文件中為這個(gè)div元素設(shè)置一些樣式屬性。

.container {
width: 90%;
margin: 0 auto;
padding: 20px;
}

在上面的代碼中，我們?cè)O(shè)置了div元素的寬度為90%（相對(duì)于父元素的寬度），這樣它就能在不同尺寸的屏幕上顯示出合適大小的布局。另外，我們還設(shè)置了元素的左右邊距為auto，這樣可以將div元素水平居中于父元素中間。 接著，我們?yōu)槿萜魈砑右恍┰兀热缫粋€(gè)標(biāo)題和兩個(gè)段落。

<div class="container">
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是第一個(gè)段落</p>
<p>這是第二個(gè)段落</p>
</div>

最后，我們?yōu)闃?biāo)題和段落設(shè)置一些樣式屬性。

h1 {
font-size: 2.2em;
margin-bottom: 10px;
}
p {
font-size: 1.2em;
line-height: 1.5;
margin-bottom: 20px;
}

在上面的代碼中，我們?cè)O(shè)置了標(biāo)題的字體大小為2.2em，邊距下方為10px；設(shè)置了段落的字體大小為1.2em，行高為1.5，邊距下方為20px。 這樣我們就完成了一個(gè)簡(jiǎn)單的div css百分比布局。通過(guò)使用百分比來(lái)設(shè)置元素的大小和位置，我們可以輕松地創(chuàng)建一個(gè)響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)，從而適應(yīng)不同尺寸的屏幕和設(shè)備，提高用戶體驗(yàn)。