写一个酒店管理系统前段代码
时间: 2024-05-09 20:15:54 浏览: 19
以下是一个简单的酒店管理系统前端代码示例,使用HTML、CSS和JavaScript实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>酒店管理系统</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
padding: 5px;
}
nav a:hover {
background-color: #333;
color: #fff;
}
section {
padding: 20px;
}
table {
border-collapse: collapse;
width: 100%;
}
table th, table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>酒店管理系统</h1>
</header>
<nav>
<ul>
<li><a href="#">房间</a></li>
<li><a href="#">客户</a></li>
<li><a href="#">预订</a></li>
<li><a href="#">账单</a></li>
</ul>
</nav>
<section>
<h2>房间列表</h2>
<table>
<thead>
<tr>
<th>房间号</th>
<th>类型</th>
<th>价格</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>单人间</td>
<td>200</td>
<td>空闲</td>
</tr>
<tr>
<td>102</td>
<td>双人间</td>
<td>300</td>
<td>已预订</td>
</tr>
<tr>
<td>103</td>
<td>套房</td>
<td>500</td>
<td>入住中</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
```
这段代码实现了一个简单的酒店管理系统前端界面,包括一个顶部标题和一个导航栏,以及一个房间列表。你可以根据自己的需求添加更多功能和样式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)