使用CSS如何创建Header/Content/Footer布局

在本文中，我们将介绍如何使用CSS创建一个典型的Header/Content/Footer布局。这种布局是网页设计中常见的一种，适用于各种类型的网站，无论是个人博客、公司网站还是电子商务平台。

阅读更多：CSS 教程

1. 定义HTML结构

首先，我们需要定义适当的HTML结构来容纳Header、Content和Footer。这些部分可以分别用<header>、<div>和<footer>元素表示。以下是一个基本的HTML结构示例：

<!DOCTYPE html>
<html>
<head>
  <title>Header/Content/Footer布局</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="#">导航链接1</a></li>
        <li><a href="#">导航链接2</a></li>
        <li><a href="#">导航链接3</a></li>
      </ul>
    </nav>
  </header>

  <div id="content">
    <h2>内容标题</h2>
    <p>这里是网页的主要内容。</p>
  </div>

  <footer>
    <p>版权信息 © 2022</p>
  </footer>
</body>
</html>

2. 创建CSS样式

接下来，我们需要编写CSS样式来定义Header、Content和Footer的外观和布局。我们可以使用CSS选择器来选择相应的元素，并为其应用样式。

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

header h1 {
  margin: 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
}

#content {
  padding: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}