CSS 布局是網(wǎng)頁(yè)開(kāi)發(fā)中非常關(guān)鍵的一部分。從簡(jiǎn)單的網(wǎng)頁(yè)到復(fù)雜的應(yīng)用程序，布局都是重要的一環(huán)。下面是一個(gè)簡(jiǎn)單的 CSS 布局的例子：
<html>
<head>
<style>
#header {
height: 100px;
background-color: #005AAA;
color: #FFFFFF;
text-align: center;
line-height: 100px;
}
#content {
width: 50%;
height: 500px;
margin: 0 auto;
border: 1px solid #999999;
}
#footer {
height: 100px;
background-color: #005AAA;
color: #FFFFFF;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to my site!</h1>
</div>
<div id="content">
<p>This is some content.</p>
</div>
<div id="footer">
<p>Copyright 2022</p>
</div>
</body>
</html>該例子包含了三個(gè)主要部分：header、content 和 footer。header 和 footer 包含了網(wǎng)站的標(biāo)題和版權(quán)信息。content 部分則是主要內(nèi)容，占據(jù)了頁(yè)面的一半寬度。
在 CSS 部分，我們?cè)O(shè)置了一些基本樣式，例如顏色、文本對(duì)齊和邊框樣式。其中對(duì)于 content 部分，我們使用了“margin: 0 auto;”來(lái)使其水平居中。此外，我們還設(shè)置了 header 和 footer 的高度和行高，以確保頁(yè)面的可讀性。
通過(guò)這個(gè)簡(jiǎn)單的例子，我們可以看到 CSS 布局的強(qiáng)大之處，能夠使網(wǎng)站內(nèi)容清晰明了，易于閱讀。如果你想要學(xué)習(xí)更多關(guān)于 CSS 布局的知識(shí)，可以查看各種在線教程或書(shū)籍。