在当今的互联网时代，网页设计是大学生学习计算机科学与相关专业的重要组成部分。掌握 HTML、CSS 和 JavaScript 是网页设计和开发的基础。本文将介绍基本的网页设计实例代码，帮助初学者理解网页的结构及样式。
一、HTML 基础结构
HTML（超文本标记语言）是构建网页的基础。下面是一个简单的 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="styles.css">
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
<nav>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>主页</h2>
<p>这是我的第一个网页设计作业。希望你喜欢它！</p>
</section>
<section id="about">
<h2>关于我</h2>
<p>我是一个大学生，正在学习网页设计。</p>
</section>
<section id="contact">
<h2>联系方式</h2>
<p>你可以通过邮件与我联系：example@example.com</p>
</section>
</main>
<footer>
<p>© 2023 我的网页. 版权所有.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
二、CSS 样式
CSS（层叠样式表）用于控制网页的外观和布局。以下是与上述 HTML 代码配合使用的 CSS 示例，存储在 styles.css 文件中：
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background: #35424a;
color: #ffffff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
background: #ffffff;
padding: 15px;
margin: 15px 0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
footer {
background: #35424a;
color: #ffffff;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
三、JavaScript 功能
JavaScript 用于为网页添加动态功能。下面是一个简单的 JavaScript 示例，文件名为 script.js，实现点击按钮显示当前时间的功能：
document.addEventListener('DOMContentLoaded', function() {
const button = document.createElement('button');
button.innerText = '点击我获取当前时间';
document.body.appendChild(button);
button.addEventListener('click', function() {
const now = new Date();
alert('当前时间是: ' + now.toLocaleString());
});
});
四、总结
通过以上的代码示例，我们可以看到一个完整的网页由 HTML、CSS 和 JavaScript 三部分组成。HTML 提供结构，CSS 管理样式，JavaScript 处理动态交互。对于大学生而言，熟练掌握这些技术，不仅可以完成学业任务，也为日后进入职场打下坚实基础。希望本文能为你提供一些帮助，鼓励你在网页设计的路上不断探索与创新。
