CSS頁眉教程
隨著網頁設計的不斷發展，CSS樣式已經成為了網頁設計必不可少的一部分。而頁眉是網頁中常見的一種設計，通常用于添加頁眉信息，如頁碼、頁眉頁腳、產品列表等。本文將介紹如何使用CSS來創建一個簡單的頁眉。
1. 了解頁眉的基本結構
頁眉通常包含以下信息：
- 產品列表
我們可以使用HTML來創建頁眉，其中頁碼可以使用<h1>標簽來創建，而其他信息可以使用<div>標簽來創建。
例如，以下是一個簡單的HTML頁眉示例：
```html
<div class="page-header">
<h1>頁眉</h1>
<div class="page-header-link">
</div>
<div class="product-list">
<ul>
<li>產品1</li>
<li>產品2</li>
<li>產品3</li>
</ul>
</div>
</div>
2. 使用CSS設置頁眉樣式
要設置頁眉的樣式，我們可以使用CSS。在CSS中，我們可以使用類名來定義頁眉的樣式，例如“page-header”。
例如，以下是一個簡單的CSS頁眉樣式示例：
```css
.page-header {
background-color: #F5F5F5;
color: #333;
padding: 10px;
text-align: center;
.page-header h1 {
font-size: 28px;
margin-bottom: 20px;
.page-header-link {
color: #4CAF50;
font-size: 16px;
margin-bottom: 20px;
.product-list {
font-size: 14px;
margin-bottom: 20px;
3. 使用JavaScript添加頁眉信息
除了使用CSS來設置頁眉的樣式外，我們還可以使用JavaScript來添加頁眉信息。我們可以使用JavaScript來創建一個新的HTML元素，并將其添加到頁眉中。
例如，以下是一個簡單的JavaScript添加頁眉信息示例：
```javascript
var header = document.createElement("div");
header.classList.add("page-header");
document.body.appendChild(header);
var link = document.createElement("a");
link.classList.add("page-header-link");
link.classList.add("active");
header.appendChild(link);