网页设计期末作业前端
时间: 2025-01-11 11:53:46 浏览: 12
### 关于网页设计期末作业前端部分的示例
#### HTML 结构
创建一个简单的个人主页结构,此页面将展示个人信息、技能以及联系方式。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到我的个人主页</h1>
</header>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
<section id="about">
<h2>关于我</h2>
<p>这里是自我介绍的内容。</p>
</section>
<section id="skills">
<h2>技能</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<footer id="contact">
<h2>联系我们</h2>
<address>
邮箱:<a href="mailto:someone@example.com">someone@example.com</a>
</address>
</footer>
</body>
</html>
```
#### CSS 样式表 (styles.css)
为了使页面更加美观,定义一些基本样式:
```css
/* styles.css */
body {
font-family: Arial, sans-serif;
}
header h1 {
color: #007BFF;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 1em;
}
nav a {
text-decoration: none;
color: #007BFF;
}
```
上述代码展示了如何构建一个基础的静态网页框架[^1]。通过这种方式可以更好地理解HTML标签的作用及其布局原理;同时利用外部链接引入CSS文件实现样式的分离管理,便于维护和修改。
阅读全文