HTML写一个好看的预约界面
时间: 2024-05-06 15:21:46 浏览: 9
好的,以下是一个简单的预约界面的HTML代码:
```HTML
<!DOCTYPE html>
<html>
<head>
<title>预约界面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
margin-top: 50px;
text-align: center;
color: #005792;
}
form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
input, select {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
input[type=submit] {
background-color: #005792;
color: #fff;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #003d64;
}
</style>
</head>
<body>
<h1>预约界面</h1>
<form>
<label for="name">姓名</label>
<input type="text" id="name" name="name" required>
<label for="email">电子邮件</label>
<input type="email" id="email" name="email" required>
<label for="date">预约日期</label>
<input type="date" id="date" name="date" required>
<label for="time">预约时间</label>
<input type="time" id="time" name="time" required>
<label for="service">服务项目</label>
<select id="service" name="service" required>
<option value="">请选择</option>
<option value="haircut">理发</option>
<option value="manicure">美甲</option>
<option value="massage">按摩</option>
</select>
<label for="message">备注</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="提交">
</form>
</body>
</html>
```
请注意,这只是一个简单的预约界面示例,仅供参考。具体的预约界面应根据实际需求进行设计和定制。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)