在当今数字化时代，建立一个简单的网站已成为许多小企业和个人的基本需求。本文将探讨如何使用简单的HTML和CSS制作一个包含5个网页的网站，并提供相关代码示例，以帮助读者轻松入门。

网站结构概览

我们要创建的简单网站将包含以下5个网页：

  1. 首页 (index.html)
  2. 关于我们 (about.html)
  3. 服务 (services.html)
  4. 联系我们 (contact.html)
  5. 博客 (blog.html)

每个网页将使用一致的布局和风格，以提供良好的用户体验。接下来，我们将为每个网页编写基本的HTML结构和相关的CSS样式。

1. HTML代码

我们需要为每个网页创建基本的HTML文件。以下是每个网页的示例代码：

首页 (index.html)

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>首页</title>
</head>
<body>
<header>
<h1>欢迎来到我们的网站</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="blog.html">博客</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新动态</h2>
<p>欢迎访问我们的网站，我们提供各种服务。</p>
</section>
</main>
<footer>
<p>&copy; 2023 简单网站制作</p>
</footer>
</body>
</html>

关于我们 (about.html)

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>关于我们</title>
</head>
<body>
<header>
<h1>关于我们</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="blog.html">博客</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>我们的使命</h2>
<p>我们致力于提供优质的服务和产品。</p>
</section>
</main>
<footer>
<p>&copy; 2023 简单网站制作</p>
</footer>
</body>
</html>

服务 (services.html)

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>服务</title>
</head>
<body>
<header>
<h1>我们的服务</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="blog.html">博客</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>服务内容</h2>
<p>我们提供网站开发、SEO优化等服务。</p>
</section>
</main>
<footer>
<p>&copy; 2023 简单网站制作</p>
</footer>
</body>
</html>

联系我们 (contact.html)

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>联系我们</title>
</head>
<body>
<header>
<h1>联系我们</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="blog.html">博客</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>联系方式</h2>
<p>请填写表单与我们联系。</p>
</section>
</main>
<footer>
<p>&copy; 2023 简单网站制作</p>
</footer>
</body>
</html>

博客 (blog.html)

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>博客</title>
</head>
<body>
<header>
<h1>博客</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="blog.html">博客</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新文章</h2>
<p>欢迎阅读我们的博客文章。</p>
</section>
</main>
<footer>
<p>&copy; 2023 简单网站制作</p>
</footer>
</body>
</html>

2. CSS样式

为了让我们的网站看起来更美观，我们需要为其提供一些基本的CSS样式。以下是样式文件的内容 (styles.css):

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

header {
background: #007BFF;
color: #fff;
padding: 10px 0;
text-align: center;
}

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

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
}

footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
}

3. 文件结构

创建上述文件后，可以按照下面的文件结构进行组织：

/simple-website
├── index.html
├── about.html
├── services.html
├── contact.html
├── blog.html
└── styles.css

总结

以上代码提供了一个简单网站的基本框架，包含5个网页和CSS样式。通过这些基本的HTML和CSS知识，您可以自己制作一个网站，并根据需求进行扩展或修改。实现您理想网站的关键在于理解每个网页的结构，并运用适当的样式让网站更加美观实用。希望本文对您有所帮助，助您轻松入门网站制作的世界。