《基于HTML和CSS的网页设计》
1、引言
本次作业旨在通过HTML和CSS设计一个简单的网页，以展示我们所学的网页设计知识，我们将从简单的HTML结构开始，逐步添加CSS样式来提升网页的外观和用户体验。
2、HTML结构
我们需要创建一个基本的HTML结构，我们将使用HTML5的语义标签来定义网页的各个部分，以下是基本的HTML结构：
<!DOCTYPE html>
<html>
<head>
<title>基于HTML和CSS的网页设计</title>
</head>
<body>
<header>
<h1>欢迎来到我们的网页</h1>
</header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<main>
<section>
<h2>我们的使命</h2>
<p>我们致力于为客户提供最优质的体验。</p>
</section>
<section>
<h2>我们的愿景</h2>
<p>我们希望通过创新和技术来改变世界。</p>
</section>
</main>
<footer>
© 2023 我们的公司. 版权所有.
</footer>
</body>
</html>3、CSS样式
我们需要为网页添加一些基本的CSS样式，我们将使用外部样式表来定义样式，在HTML文件的同一目录下，创建一个名为styles.css的CSS文件，并在HTML文件中引入它，以下是基本的CSS样式：
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #555;
color: #fff;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}在HTML文件中引入CSS文件：
<!-- 在HTML文件的<head>标签内添加 --> <link rel="stylesheet" type="text/css" href="styles.css">
4、总结与展望
