CSS 是一种用于网页样式布局的语言，可以配合 HTML 一起使用，来美化网页的样式和外形。下面我们介绍一些关于 CSS 如何制作一个简单网页的技巧。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
body {
background-color: gray;
font-family: Arial,sans-serif;
color: white;
}
header {
background-color: black;
padding: 20px;
}
h1,h2,h3 {
text-align: center;
margin-bottom: 20px;
}
p {
margin: 10px;
}
.container {
width: 80%;
margin: 0 auto;
}
footer {
background-color: black;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>我的网页</h1>
<p>这是一个简单的网页</p>
</header>
<div class="container">
<h2>欢迎来到我的网页</h2>
<p>这是一段文字内容。</p>
<p>这是另一段文字内容。</p>
<h3>联系方式</h3>
<p>我的邮箱地址是 [email protected]。</p>
</div>
<footer>
<p>版权所有 © 2021 我的网页</p>
</footer>
</body>
</html>
在上述代码中，我们首先在样式表中定义了整个页面的样式。例如，我们给页面添加了一个灰色（gray）的背景色，使用了 Arial 字体（如果计算机没有 Arial 字体，则使用系统自带的 sans-serif 字体）。我们还使用了类选择器（class selector），自定义了名为 container 的容器的样式，使其宽度为 80%，居中显示。我们还定义了 header 和 footer 的样式，让其背景色为黑色（black）。
接下来我们在页面中添加了 header、div 和 footer 三个元素。其中 header 元素包含了网页的标题和简介，div 元素包含了网页的主要内容，而 footer 元素包含了网页的版权信息。
最后，我们在 div 元素中添加了一些文字内容。注意，我们使用了标题元素（h1 和 h2）和段落元素（p）。标题元素可以让文字看起来更加突出，而段落元素可以让文字内容更加清晰易懂。
通过这些简单的 CSS 技巧，我们可以轻松地制作出一个美观实用的网页。当然，如果您想要制作更加复杂的网页，可以深入学习 CSS 的更多知识。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
