在網(wǎng)頁設(shè)計中，頁眉頁腳是常常被用到的元素。它們位于頁面的頂部和底部，用于呈現(xiàn)重要信息和提高頁面的美觀度。而CSS則是實現(xiàn)這種效果的重要工具之一。
首先我們來看如何添加頁眉。在HTML結(jié)構(gòu)中，可以使用header標簽來表示頁眉，而使用CSS則可以通過設(shè)置元素的樣式來實現(xiàn)。以下是一段簡單的CSS樣式代碼，用于設(shè)置頁眉的背景色和文字顏色：
header {
background-color: #333;
color: #fff;
}下面是一個實際的例子：如果我們要在自己的網(wǎng)頁中添加頁眉，那么可以先在HTML中添加一個header標簽，再使用CSS來設(shè)置其樣式：
<html>
<head>
<style type="text/css">
header {
background-color: #333;
color: #fff;
height: 50px;
padding-top: 10px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<header>歡迎來到我的網(wǎng)頁</header>
</body>
</html>可以看到，我們在樣式中設(shè)置了頁眉的高度、文字對齊方式、字體大小和字體粗細等屬性。此外，我們還添加了padding-top屬性用于設(shè)置頁眉文字距離頂部的距離。
接下來，我們再看一下如何添加頁腳。同樣地，在HTML結(jié)構(gòu)中，可以使用footer標簽來表示頁腳，CSS則可以用來設(shè)置其樣式。以下是一段常用的CSS代碼，用于設(shè)置頁腳的背景色和文字顏色：
footer {
background-color: #333;
color: #fff;
}下面是一個具體的例子：同樣地，在HTML中添加一個footer標簽，并使用CSS來設(shè)置樣式：
<html>
<head>
<style type="text/css">
footer {
background-color: #333;
color: #fff;
height: 50px;
text-align: center;
font-size: 14px;
font-weight: normal;
}
</style>
</head>
<body>
<!-- Some content here -->
<footer>? 2022 My website. All rights reserved. </footer>
</body>
</html>可以看到，我們同樣在樣式中設(shè)置了頁腳的高度、文字對齊方式、字體大小和字體粗細等屬性。頁腳常常用于版權(quán)信息的展示，因此我們在頁腳中加入了版權(quán)信息。
總結(jié)來說，通過在HTML中使用header和footer標簽，再通過CSS來設(shè)置樣式，我們很容易就能實現(xiàn)頁面的頁眉和頁腳效果。而設(shè)置樣式時，可以根據(jù)自己的需求來調(diào)整元素的高度、背景色、文字樣式等屬性，從而使網(wǎng)頁更加美觀、清晰地呈現(xiàn)信息。