<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人主页</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<header>
<nav class="nav">
<span class="nav-logo">个人主页</span>
<div class="nav-links">
<a href="#about">关于我</a>
<a href="#skills">技能</a>
<a href="#projects">项目</a>
<a href="#contact">联系方式</a>
<a href="login.html">登录</a>
<a href="register.html">注册</a>
</div>
<div class="nav-toggle" id="nav-toggle">☰</div>
</nav>
</header>
<div class="container">
<section id="about" class="section">
<h2>关于我</h2>
<p>您好！我是一名热爱编程的开发者，专注于前端开发和用户体验设计。通过不断学习和实践，我希望能为用户提供流畅、友好的使用体验。</p>
</section>
<section id="skills" class="section">
<h2>技能</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
<li>Git & GitHub</li>
</ul>
</section>
<section id="projects" class="section">
<h2>项目</h2>
<ul>
<li><strong>个人博客</strong> - 使用 HTML、CSS 和 JavaScript 构建的简单博客平台。</li>
<li><strong>电商网站</strong> - 通过 React 实现的在线购物网站。</li>
<li><strong>天气应用</strong> - 使用 API 提供实时天气信息的应用。</li>
</ul>
</section>
<section id="contact" class="section">
<h2>联系方式</h2>
<form class="contact-form">
<input type="text" placeholder="您的姓名" required>
<input type="email" placeholder="您的邮箱" required>
<textarea placeholder="您的留言" rows="5" required></textarea>
<button type="submit">提交</button>
</form>
</section>
</div>
<footer>
<p>© 2024 个人网站. 保留所有权利.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
