CSS頁(yè)面示例是一個(gè)很好的展示CSS語(yǔ)言強(qiáng)大功能的教學(xué)案例。下面我們來(lái)看一個(gè)簡(jiǎn)單的 CSS頁(yè)面示例:
<html>
<head>
<title>CSS頁(yè)面示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div class="header">
<h1>CSS頁(yè)面示例</h1>
<p>用CSS更好的美化頁(yè)面！</p>
</div>
<div class="content">
<p>這是一個(gè)用CSS設(shè)計(jì)的簡(jiǎn)單頁(yè)面。</p>
<p>我們使用了CSS的樣式來(lái)渲染頁(yè)面，包括文字樣式、背景樣式等等。</p>
<p>CSS的強(qiáng)大在于可以對(duì)整個(gè)頁(yè)面進(jìn)行統(tǒng)一的樣式設(shè)置，而無(wú)需對(duì)每個(gè)元素進(jìn)行逐一設(shè)置。</p>
</div>
<div class="footer">
<p>©2021 CSS 頁(yè)面示例。</p>
</div>
</div>
</body>
</html>上面這個(gè) HTML 文件中，首先引入了一個(gè)名為style.css的樣式表，這個(gè)樣式表定義了這個(gè)頁(yè)面的樣式。然后在
標(biāo)簽中，使用了一個(gè)元素將頁(yè)面劃分為三部分，分別是header、content和footer，這三部分分別用不同的顏色和字體樣式來(lái)顯示。
/* style.css */
#container {
width: 600px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
.header {
background-color: #ccf;
color: #333;
text-align: center;
}
.header h1 {
font-size: 2.5em;
margin: 0;
}
.content {
background-color: #eef;
}
.footer {
background-color: #ccf;
color: #333;
text-align: center;
padding: 10px;
clear: both;
}在 style.css 文件中，我們對(duì)上面代碼中的每一個(gè)元素進(jìn)行了樣式設(shè)置，使得頁(yè)面呈現(xiàn)了強(qiáng)烈的視覺(jué)效果。這個(gè)示例中，我們使用了寬度、顏色、字體等 CSS 屬性來(lái)設(shè)置頁(yè)面的樣式。其中，header、content和footer這三個(gè)部分分別應(yīng)用了不同的背景顏色，而在 header 部分中還使用了兩個(gè)內(nèi)部元素（h1 和 p）。
因?yàn)?CSS 的功能非常強(qiáng)大，我們可以用它來(lái)完成任何復(fù)雜的頁(yè)面設(shè)計(jì)。這里只是一個(gè)簡(jiǎn)單的 CSS頁(yè)面示例，但是它可以說(shuō)明CSS對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的重要性。