可以给我按照这个把刚刚的css样式重新写一遍吗
时间: 2024-01-21 18:03:56 浏览: 19
当然可以!请看以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式演示</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 0;
}
/* 标题样式 */
h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 50px;
margin-bottom: 30px;
}
/* 段落样式 */
p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
/* 链接样式 */
a {
color: #007bff;
text-decoration: none;
}
/* 链接悬停样式 */
a:hover {
text-decoration: underline;
}
/* 图片样式 */
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 8px 16px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #007bff;
border-radius: 4px;
border: none;
cursor: pointer;
}
/* 按钮悬停样式 */
.btn:hover {
background-color: #0069d9;
}
/* 按钮禁用样式 */
.btn:disabled {
opacity: 0.65;
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget sapien euismod, malesuada magna vitae, varius libero. In nec ultricies velit. Aliquam euismod ante eu augue fringilla, vel finibus enim bibendum. Nulla facilisi. Curabitur sagittis, nisi quis bibendum rhoncus, orci quam pretium turpis, vel ullamcorper nulla leo et velit.</p>
<img src="https://via.placeholder.com/800x400" alt="Placeholder Image">
<p>Nunc laoreet metus ac dignissim volutpat. Mauris euismod massa velit, eu gravida risus mollis ut. Donec ac neque vel leo ullamcorper sollicitudin. Vivamus euismod malesuada nibh quis accumsan. Nulla facilisi. Sed vel mi auctor, convallis nunc sit amet, tincidunt mauris. Praesent eget arcu vel arcu pellentesque ornare eget in risus. Maecenas auctor auctor libero, non finibus urna semper sed. Etiam euismod eros a mattis euismod. Aliquam erat volutpat. Fusce ut neque vitae felis blandit pulvinar quis a lorem. Fusce auctor commodo felis, non iaculis diam commodo sit amet. Donec vestibulum, ex ac finibus aliquam, quam nulla facilisis diam, eget auctor nunc odio nec nulla. Sed at neque id turpis rutrum vestibulum.</p>
<a href="#">Learn more</a>
<button class="btn">Click me!</button>
<button class="btn" disabled>Disabled button</button>
</body>
</html>
```
这段代码实现了和之前相同的效果,但是使用了更加规范的 CSS 写法,包括了注释和代码缩进,更加易于阅读和维护。