在现代网页设计中，HTML、CSS和JavaScript是构建网页的三大核心技术。HTML用于构建网页的结构，CSS用于样式的设计，而JavaScript则为网页提供交互功能。本文将为大家提供一个简单的网页设计实例，并详细解释每一部分的代码实现。
示例：简易个人主页
下面的代码展示了一个简易的个人主页，包含了个人信息、介绍和一个互动按钮。
1. HTML部分
<!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="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的个人主页</h1>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#skills">我的技能</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>关于我</h2>
<p>大家好，我是一名网页设计爱好者，热爱学习新技术。</p>
</section>
<section id="skills">
<h2>我的技能</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</section>
<section id="contact">
<h2>联系方式</h2>
<button id="contactBtn">点击获取我的邮箱</button>
<p id="email" style="display:none;">myemail@example.com</p>
</section>
<footer>
<p>© 2023 个人主页. 保留所有权利.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
2. CSS部分
接下来是这个网页的CSS样式文件style.css，用于美化网页：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
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;
}
section {
margin: 20px 0;
padding: 10px;
background: white;
border-radius: 5px;
}
footer {
text-align: center;
margin-top: 20px;
}
3. JavaScript部分
最后是JavaScript部分script.js，用于处理按钮点击事件，让邮箱信息显示出来。
document.getElementById("contactBtn").addEventListener("click", function() {
const email = document.getElementById("email");
if (email.style.display === "none") {
email.style.display = "block";
} else {
email.style.display = "none";
}
});
总结
以上是一个简单的个人主页实例，整体由HTML、CSS和JavaScript三部分构成。我们使用HTML定义了页面的结构，包括导航栏和几个内容部分；利用CSS增强了网页的视觉效果；最后，通过JavaScript实现了一个简单的交互功能。通过本示例，大家可以了解到网页的基本设计过程，以及如何结合这三种技术来实现一个完整的网页。希望这个示例对你的网页设计学习有所帮助！
