请帮我写出一个html精美的留言板
时间: 2023-08-02 14:09:46 浏览: 53
以下是一个简单的 HTML 留言板,使用了 Bootstrap 框架和 CSS 样式来美化界面:
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
}
.card {
margin: 20px auto;
max-width: 800px;
border: none;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.card-header {
background-color: #fff;
border-bottom: none;
font-size: 24px;
font-weight: bold;
color: #007bff;
}
.card-body {
background-color: #fff;
border-top: none;
font-size: 16px;
}
.form-control:focus {
border-color: #007bff;
box-shadow: none;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
padding: 8px 20px;
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.btn-primary:hover {
background-color: #0069d9;
border-color: #0062cc;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">留言板</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="message">留言:</label>
<textarea class="form-control" id="message" name="message" rows="5" placeholder="请输入留言内容"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交留言</button>
</form>
</div>
</div>
</div>
</body>
</html>
```
你可以将这段代码保存为一个 HTML 文件,用浏览器打开即可看到留言板的界面。这个留言板使用了 Bootstrap 的网格系统和表单组件,可以适应不同的屏幕尺寸。你也可以根据自己的需求,对样式进行修改和调整,使之更符合你的品味和要求。