HTML（超文本标记语言）和CSS（层叠样式表）是用于网页设计的关键技术。下面是一个简单的示例，展示如何使用HTML和CSS创建一个基本的网页设计。
首先，我们需要创建一个HTML文件，并使用<html>标签将内容包裹起来。在<head>标签中，我们可以添加一些元数据和样式表链接。在<body>标签中，我们可以添加页面的实际内容。
html
Copy Code
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
<section>
<h2>关于我们</h2>
<p>这是关于我们的部分内容。</p>
</section>
<footer>
<p>版权所有 © 2023 我的网页</p>
</footer>
</body>
</html>
上述代码呈现了一个基本的网页结构，包括标题、导航、内容区域和页脚。但是，要使页面具有美观的外观，我们需要使用CSS来添加样式。
创建一个名为styles.css的CSS文件，并将其链接到HTML文件中。在styles.css文件中，我们可以定义网页的样式。
css
Copy Code
/* Reset 样式（可选）*/
body, h1, h2, p, ul, li {
margin: 0;
padding: 0;
}
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
color: #333;
}
header, nav, section, footer {
padding: 20px;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #555;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #555;
}
footer {
text-align: center;
font-size: 12px;
color: #888;
}
在上述CSS代码中，我们使用选择器和属性来定义不同元素的样式，例如body、header、nav等。您可以根据自己的需求进行调整。
通过调整HTML和CSS代码，您可以创建丰富多样的网页设计。这只是一个简单的示例，但希望它能为您提供一个起点。如果你想要更深入了解HTML和CSS的知识，可以参考相关的教程和文档。
