做一个精美网页
时间: 2023-07-29 22:07:34 浏览: 58
好的,以下是一个简单的精美网页示例:
```
<!DOCTYPE html>
<html>
<head>
<title>精美网页</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #fff;
color: #333;
font-size: 16px;
line-height: 1.4;
}
header {
background-color: #f44336;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
font-weight: normal;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
p {
margin-bottom: 20px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
padding-left: 20px;
background-image: url('circle.png');
background-repeat: no-repeat;
background-position: 0 5px;
}
footer {
background-color: #333;
padding: 20px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>精美网页</h1>
</header>
<main>
<p>这是一个漂亮的网页示例,它包含一个页眉、一个主要内容部分和一个页脚。</p>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</main>
<footer>
<p>© 2021 精美网页</p>
</footer>
</body>
</html>
```
这个网页使用了 CSS 样式来美化页面。包括一个漂亮的页眉和页脚,以及一个主要内容部分,其中包括一个段落和有序列表。此外,列表项使用了自定义的圆形图像作为背景。
你可以将上述代码复制到一个文本编辑器中,然后将文件保存为 “index.html”(或其他任何文件名)。然后,用任何现代浏览器打开这个文件,就可以看到这个简单的精美网页了。