1、 创建主页的HTML 文件
需要创建一个名为 index.html的HTML 文件，内容如下，
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人网站</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; }
header, footer { text-align: center; padding: 1em; background-color: #f3f3f3; }
nav { text-align: center; margin-top: 20px; }
nav a { margin: 0 10px; text-decoration: none; color: darkblue; }
a:hover { text-decoration: underline; }
main { margin-top: 20px; }
.content { max-width: 800px; margin: auto; }
</style>
</head>
<body>
<header>
<h1>欢迎来到我的个人网站</h1>
</header>
<nav>
<a href="index.html">主页</a>
<a href="about.html">关于我</a>
<a href="contact.html">联系方式</a>
</nav>
<main class="content">
<h2>首页</h2>
<p>这里是一些介绍我的文本和主要内容。</p>
</main>
<footer>
<p>版权所有 © 2024 我的名字</p>
</footer>
</body>
</html>
2、创建关于我们的HTML 文件
可以创建其他页面，about.html 和 contact.html。
1）about.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于我</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>关于我</h1>
</header>
<nav>
<a href="index.html">主页</a>
<a href="about.html">关于我</a>
<a href="contact.html">联系方式</a>
</nav>
<main class="content">
<h2>简介</h2>
<p>这里是我的一些背景介绍。</p>
</main>
<footer>
<p>版权所有 © 2024 我的名字</p>
</footer>
</body>
</html>
2）contact.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>联系方式</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>联系方式</h1>
</header>
<nav>
<a href="index.html">主页</a>
<a href="about.html">关于我</a>
<a href="contact.html">联系方式</a>
</nav>
<main class="content">
<h2>如何联系我</h2>
<p>您可以通过以下方式与我联系：电子邮件、电话或社交媒体。</p>
</main>
<footer>
<p>版权所有 © 2024 我的名字</p>
</footer>
</body>
</html>
3、使用相同的 CSS 文件
每个页面都引用了同一个外部 CSS 文件 styles.css。可以将上述内嵌的 CSS 样式保存到一个单独的文件中，并在所有页面中引用它。基础的网站结构是一个良好的起点，可以根据需要添加更多功能或内容，比如图片、视频或更复杂的布局。