三、详细实现步骤
📁 步骤1：创建文件结构
lesson2/
├── index.html
├── css/
│ └── style.css
└── images/
└── avatar.jpg (可替换为自己的头像图片)
📄 步骤2：编写HTML结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的个人主页</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 头部 -->
<header class="header">
<div class="avatar">
<img src="images/avatar.jpg" alt="我的头像">
</div>
<h1>张三 - 前端开发爱好者</h1>
</header>
<!-- 导航栏 -->
<nav class="nav">
<ul>
<li><a href="#intro">个人介绍</a></li>
<li><a href="#skills">技能展示</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
<!-- 主要内容 -->
<main class="main">
<!-- 个人介绍 -->
<section id="intro" class="section">
<h2>个人介绍</h2>
<p>大家好！我是一名前端开发爱好者，熟悉HTML、CSS、JavaScript等前端技术，热爱网页设计与制作。</p>
</section>
<!-- 技能展示 -->
<section id="skills" class="section">
<h2>技能展示</h2>
<div class="skills-list">
<div class="skill-item">HTML5 ★★★★★</div>
<div class="skill-item">CSS3 ★★★★☆</div>
<div class="skill-item">JavaScript ★★★☆☆</div>
</div>
</section>
<!-- 联系方式 -->
<section id="contact" class="section">
<h2>联系方式</h2>
<ul class="contact-list">
<li>邮箱：zhangsan@example.com</li>
<li>微信：zhangsan123456</li>
<li>GitHub：github.com/zhangsan</li>
</ul>
</section>
</main>
<!-- 页脚 -->
<footer class="footer">
<p>© 2026 我的个人主页 - 版权所有</p>
</footer>
</body>
</html>
🎨 步骤3：编写CSS样式
/* 样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body {
font-family: "微软雅黑", sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}
/* 头部样式 */
.header {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 30px 0;
}
.header .avatar img {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid white;
margin-bottom: 15px;
}
/* 导航样式 */
.nav {
background-color: #34495e;
}
.nav ul {
display: flex;
justify-content: center;
}
.nav li {
margin: 0 15px;
}
.nav a {
color: white;
display: block;
padding: 15px 20px;
}
.nav a:hover {
background-color: #1abc9c;
}
/* 主要内容 */
.main {
width: 80%;
margin: 30px auto;
}
.section {
background-color: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.section h2 {
color: #2c3e50;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
/* 技能列表 */
.skills-list {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.skill-item {
background-color: #f1f1f1;
padding: 10px 20px;
border-radius: 20px;
}
/* 联系方式 */
.contact-list li {
margin: 10px 0;
padding-left: 5px;
border-left: 3px solid #1abc9c;
}
/* 页脚 */
.footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 30px;
}
▶️ 步骤4：运行与验证
- 替换
images/avatar.jpg 为实际图片（或使用占位图链接）
- 打开
index.html，验证：
- 页面结构完整（头部/导航/内容/页脚）
- 导航链接可跳转到对应模块
- 样式美观，布局合理
- hover效果正常显示