html 留言板代码
时间: 2023-12-23 20:26:25 浏览: 29
以下是一个简单的HTML静态网页留言板的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style>
#container {
width: 700px;
margin: 0 auto;
padding: 20px;
border: 1px solid #D3D3D3;
background-color: azure;
}
#messages {
margin-top: 20px;
padding: 10px;
border: 1px solid #D3D3D3;
background-color: #FFFFFF;
}
.message {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #D3D3D3;
background-color: #F5F5F5;
}
.message h3 {
margin-top: 0;
}
.message p {
margin-bottom: 0;
}
.form {
margin-top: 20px;
padding: 10px;
border: 1px solid #D3D3D3;
background-color: #FFFFFF;
}
.form label {
display: block;
margin-bottom: 5px;
}
.form input[type="text"], .form textarea {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #D3D3D3;
border-radius: 3px;
box-sizing: border-box;
}
.form textarea {
height: 100px;
}
.form input[type="submit"] {
background-color: #008000;
color: #FFFFFF;
border: none;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div id="messages">
<div class="message">
<h3>留言标题</h3>
<p>留言内容</p>
</div>
<!-- 可以添加更多留言 -->
</div>
<div class="form">
<form>
<label for="title">标题:</label>
<input type="text" id="title" name="title" required>
<label for="content">内容:</label>
<textarea id="content" name="content" required></textarea>
<input type="submit" value="提交">
</form>
</div>
</div>
</body>
</html>
```
这个留言板包括一个留言列表和一个表单,用户可以在表单中输入留言的标题和内容,然后提交表单以添加新的留言到留言列表中。