我的个人网站
个人网站作业成品代码
HTML结构
<!DOCTYPE html>
<html>
<head>
<title>我的个人网站</title>
<style>
/* 样式表可以在这里写，或者直接写在一个单独的CSS文件中 */
</style>
</head>
<body>
<header>
<h1>欢迎来到我的个人网站！</h1>
</header>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#projects">项目</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
<section id="about">
<h2>关于我</h2>
<p>这里可以写一些关于你的个人信息，比如你的名字、职业、兴趣爱好等。</p>
</section>
<section id="projects">
<h2>项目</h2>
<ul>
<li>项目一：简要描述第一个项目的内容和目的。</li>
<li>项目二：简要描述第二个项目的内容和目的。</li>
<li>项目三：简要描述第三个项目的内容和目的。</li>
</ul>
</section>
<section id="contact">
<h2>联系</h2>
<p>这里可以写一些联系方式，比如你的邮箱、电话、社交媒体账号等。</p>
</section>
<footer>
<p>版权所有 © 2023 我的个人网站</p>
</footer>
</body>
</html>CSS样式（可选）
如果你需要添加一些CSS样式来美化你的网站，可以在HTML文件的<style>标签中添加，或者将样式写在一个单独的CSS文件中，以下是一些示例样式：
1、美化标题：
```css
h1 {
color: #333; /* 标题颜色 */
font-size: 20px; /* 标题字体大小 */
text-align: center; /* 标题居中显示 */
}
```
2、美化导航栏：
```css
nav {
background-color: #f5f5f5; /* 导航栏背景颜色 */
border-radius: 5px; /* 导航栏边框圆角 */
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* 导航栏阴影效果 */
}
nav ul {
list-style-type: none; /* 移除列表前的点 */
padding: 0; /* 移除列表内部的空白 */
}
nav ul li {
display: inline-block; /* 将列表项转换为行内块元素，以便水平排列 */
margin-right: 10px; /* 每个列表项之间的间距 */
}
nav ul li a {
color: #333; /* 链接颜色 */
text-decoration: none; /* 移除链接下划线 */
}
```
3、美化关于我页面：
```css
#about {
background-color: #fff; /* 关于我页面的背景颜色 */
border-radius: 5px; /* 关于我页面的边框圆角 */
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* 关于我页面的阴影效果 */
padding: 20px; /* 关于我页面的内边距 */
}
```
...（其他页面的样式可以根据需要添加）...
JavaScript脚本（可选）
如果你需要添加一些JavaScript脚本来实现一些交互功能，可以在HTML文件的<script>标签中添加，以下是一些示例脚本：
1、添加鼠标悬停效果：
```javascript
// 鼠标悬停在导航栏上时改变颜色，并显示下拉菜单图标（如果需要）...（此处省略具体代码）...javascriptfunction() {javascriptvarnav = document.querySelector('nav');javascriptnav.onmouseover = function() {javascriptthis.style.backgroundColor = '#f0f0f0';javascript// 显示下拉菜单图标（如果需要）...（此处省略具体代码）...javascript};
