html效果代码
<!DOCTYPE html>
<html>
<head>
<title>HTML效果代码</title>
<style>
/* 设置页面背景颜色 /
body {
background-color: #f2f2f2;
}
/ 设置标题样式 /
h1 {
color: #333;
font-size: 36px;
text-align: center;
margin-top: 50px;
}
/ 设置段落样式 /
p {
color: #666;
font-size: 18px;
line-height: 1.5;
margin: 20px 0;
text-align: justify;
padding: 0 20px;
}
/ 设置链接样式 /
a {
color: #007bff;
text-decoration: none;
}
/ 设置按钮样式 /
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
/ 设置图片样式 */
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>HTML效果代码</h1>
<p>这是一个演示HTML效果代码的页面。在这里，我们可以使用HTML和CSS来创建各种各样的效果，比如设置页面背景颜色、设置标题样式、设置段落样式、设置链接样式、设置按钮样式、设置图片样式等等。</p>
<p>如果你想学习更多关于HTML和CSS的知识，可以访问<a href="https://www.w3schools.com/" target="_blank">W3Schools</a>网站。</p>
<button>点击这里</button>
<img src="https://via.placeholder.com/500x300" alt="示例图片">
</body>
</html>
这段代码展示了如何使用HTML和CSS来设置页面背景颜色、标题样式、段落样式、链接样式、按钮样式和图片样式。具体来说：
在<style>标签中，设置了body元素的背景颜色为#f2f2f2。
使用<h1>标签来创建一个标题，设置了标题的颜色、字体大小、文本对齐方式和上边距。
使用<p>标签来创建段落，设置了段落的颜色、字体大小、行高、上下边距、文本对齐方式和左右内边距。
使用<a>标签来创建链接，设置了链接的颜色和文本装饰。
使用<button>标签来创建按钮，设置了按钮的背景颜色、字体颜色、边框、内边距、边框半径和鼠标指针样式。
使用<img>标签来插入图片，设置了图片的显示方式、外边距和最大宽度。
这些样式可以根据需要进行修改，以实现不同的效果。
