给出代码及解释制作一个不单调留言板网页并插入一些插花背景
时间: 2024-04-29 17:23:38 浏览: 7
以下是一个示例代码,实现了一个不单调的留言板网页,并通过CSS样式添加了插花背景。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>留言板</h1>
</header>
<main>
<section class="message">
<h2>第一条留言</h2>
<p>这是第一条留言的内容。</p>
<span class="date">2019-01-01</span>
</section>
<section class="message">
<h2>第二条留言</h2>
<p>这是第二条留言的内容。</p>
<span class="date">2019-01-02</span>
</section>
<section class="message">
<h2>第三条留言</h2>
<p>这是第三条留言的内容。</p>
<span class="date">2019-01-03</span>
</section>
</main>
<footer>
<p>© 2019 留言板</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
background-image: url("flowers.jpg");
background-repeat: repeat;
}
header {
background-color: #555;
color: white;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
main {
margin: 20px;
}
.message {
background-color: white;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px #ccc;
margin-bottom: 20px;
padding: 20px;
}
.date {
float: right;
font-size: 12px;
}
footer {
background-color: #555;
color: white;
padding: 10px;
text-align: center;
}
p {
margin: 0;
}
```
解释:
1. HTML中使用了<header>、<main>、<section>、<span>和<footer>等标签,用于定义页面的整体结构和内容。其中<main>标签用于包含留言板的主要内容,<section>标签用于包含每条留言的内容和日期,<span>标签用于显示日期信息。
2. CSS中通过background-image属性和url()函数,将插花背景图片flowers.jpg应用于整个页面的背景。同时,使用background-repeat属性,使背景图片平铺到整个页面。
3. header、main和footer等区域的样式通过CSS进行定义。其中,header和footer的背景颜色为#555,文字颜色为白色,padding属性用于设置内边距,text-align属性用于设置文字对齐方式。main区域的margin属性用于设置上下左右的外边距。
4. 留言板的每条留言使用.message类进行样式定义。背景颜色为白色,边框为1px的#ccc颜色实线,box-shadow属性用于设置阴影效果。同时,使用margin-bottom属性设置每条留言之间的间距,padding属性用于设置内边距。日期信息使用float:right属性将其向右浮动,font-size属性设置字体大小。
5. 最后,使用p标签的margin属性设置默认的文字外边距。