网站结构
- 主页 (index.html)
- 关于我 (about.html)
- 项目 (projects.html)
- 联系 (contact.html)
1. 创建文件结构
首先，创建一个文件夹来存放你的个人网站项目。文件结构如下：
personal_website/
│
├── index.html
├── about.html
├── projects.html
├── contact.html
└── styles.css
2. 编写 HTML 文件
index.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>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="projects.html">项目</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>我的简介</h2>
<p>这是我的个人网站，欢迎了解我的工作和项目！</p>
</section>
</main>
<footer>
<p>© 2024 你的名字</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">
<title>关于我</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>关于我</h1>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="projects.html">项目</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>我的背景</h2>
<p>这里是关于我的一些信息，比如我的教育背景、工作经历等。</p>
</section>
</main>
<footer>
<p>© 2024 你的名字</p>
</footer>
</body>
</html>
projects.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>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="projects.html">项目</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>项目列表</h2>
<ul>
<li>项目 1 - 描述</li>
<li>项目 2 - 描述</li>
<li>项目 3 - 描述</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 你的名字</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">
<title>联系</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>联系我</h1>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="projects.html">项目</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>联系方式</h2>
<p>你可以通过以下方式联系我：</p>
<ul>
<li>邮箱: your.email@example.com</li>
<li>电话: 123-456-7890</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 你的名字</p>
</footer>
</body>
</html>
3. 编写 CSS 文件
styles.css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #333;
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 {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}
4. 运行网站
将上述文件保存到你的项目文件夹中，然后用浏览器打开 index.html 文件，你就可以看到你的个人网站了。
5. 自定义内容
你可以根据自己的需要修改每个页面的内容、样式和项目列表。可以添加更多的样式、图片和功能，使网站更加个性化。
4028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
