把样式给我美化一下,并写出完整的例子
时间: 2024-06-05 20:06:32 浏览: 15
以下是一个简单的 HTML 页面,使用 CSS 美化样式:
<!DOCTYPE html>
<html>
<head>
<title>样式美化</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
color: #333;
line-height: 1.5;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: #fff;
padding: 20px;
}
h1 {
font-size: 36px;
margin: 0;
}
nav {
background-color: #444;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 5px;
}
main {
margin: 20px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
</style>
</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>
<main>
<p>这是一个简单的 HTML 页面,使用 CSS 美化样式。</p>
<p>可以看到,我们使用了 body、header、nav 和 main 元素来构建页面结构,然后使用 CSS 给它们添加样式。</p>
<p>例如,我们给 body 添加了背景颜色、字体、颜色和行高,而 header 添加了背景颜色、颜色和内边距。还有 nav、main 等元素也添加了相应的样式。</p>
<p>通过这种方式,我们可以轻松地实现页面的美化效果,让它看起来更加吸引人。</p>
</main>
</body>
</html>
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)