留言板html源码 免费
时间: 2023-08-01 11:13:28 浏览: 45
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<form action="#" method="post">
<label for="name">姓名:</label>
<input type="text" name="name" id="name"><br><br>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email"><br><br>
<label for="message">留言:</label><br>
<textarea name="message" id="message" cols="30" rows="10"></textarea><br><br>
<input type="submit" value="提交">
</form>
<h2>留言列表</h2>
<ul>
<li>
<h3>张三</h3>
<p>邮箱:zhangsan@example.com</p>
<p>留言内容:今天天气真好!</p>
</li>
<li>
<h3>李四</h3>
<p>邮箱:lisi@example.com</p>
<p>留言内容:这个留言板写得不错!</p>
</li>
</ul>
</body>
</html>
相关问题
html 留言板代码
以下是一个简单的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>
```
这个留言板包括一个留言列表和一个表单,用户可以在表单中输入留言的标题和内容,然后提交表单以添加新的留言到留言列表中。
html留言板完整代码
以下是一个简单的HTML留言板的完整代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<style>
#di1 {
border: 1px solid #D3D3D3;
width: 700px;
height: 500px;
background-color: azure;
}
p {
font-size: 10px;
color: #008000;
}
#di2 {
border: 1px solid #FFFFFF;
width: 400px;
height: 400px;
}
#di3 {
border: 1px solid #FFFFFF;
width: 400px;
height: 40px;
margin-left: 1.25rem;
}
#di4 {
border: 1px solid #FFFFFF;
width: 400px;
height: 100px;
margin-left: 1.25rem;
}
.cla3 {
text-align: center;
}
.disc {
list-style-type: disc;
}
</style>
</head>
<body>
<div id="di1">
<h1 class="cla3">留言板</h1>
<div id="di2">
<ul class="disc">
<li>留言1</li>
<li>留言2</li>
<li>留言3</li>
<!-- 添加更多留言 -->
</ul>
</div>
<div id="di3">
<form>
<input type="text" name="name" placeholder="姓名"><br>
<input type="text" name="message" placeholder="留言内容"><br>
<input type="submit" value="提交">
</form>
</div>
<div id="di4">
<p>提示:这是一个简单的留言板示例,没有做登录验证,请自行添加。</p>
</div>
</div>
</body>
</html>
```