用前端写一个页面,上面写酒店后台管理系统,左边是列表
时间: 2024-05-11 09:19:49 浏览: 14
好的,我可以给您提供一个简单的示例:
```html
<!DOCTYPE html>
<html lang="en">
<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;
}
.container {
display: flex;
flex-direction: row;
height: calc(100vh - 50px);
}
.sidebar {
background-color: #eee;
width: 200px;
padding: 20px;
}
.content {
flex: 1;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>酒店后台管理系统</h1>
</header>
<div class="container">
<aside class="sidebar">
<h2>列表</h2>
<ul>
<li><a href="#">酒店信息</a></li>
<li><a href="#">客房信息</a></li>
<li><a href="#">订单信息</a></li>
<li><a href="#">财务信息</a></li>
</ul>
</aside>
<main class="content">
<h2>欢迎使用酒店后台管理系统</h2>
<p>请点击左侧列表中的选项进行操作</p>
</main>
</div>
</body>
</html>
```
在这个示例中,我们使用了 `<header>` 标签来显示页面标题,使用了一个 `.container` 容器来包含左侧的导航栏和右侧的内容区域。导航栏使用了 `<aside>` 标签,内容区域使用了 `<main>` 标签。在导航栏中使用了 `<ul>` 和 `<li>` 标签来创建一个简单的列表。您可以根据自己的需求修改样式或添加其他元素。