给我写一个html后台管理页面
时间: 2023-12-17 10:02:15 浏览: 29
很抱歉,由于我是一个文本 AI 模型,无法直接生成 HTML 页面。但是我可以给您提供一个示例模板,您可以根据自己的需求进行修改和调整。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<!-- 引入 Bootstrap 样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<!-- 引入 Font Awesome 字体库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">后台管理系统</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">仪表盘</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">用户管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">订单管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">商品管理</a>
</li>
</ul>
</div>
</nav>
<!-- 主体内容 -->
<div class="container mt-3">
<div class="row">
<div class="col-md-3">
<!-- 左侧菜单 -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
用户管理
</a>
<a href="#" class="list-group-item list-group-item-action">添加用户</a>
<a href="#" class="list-group-item list-group-item-action">编辑用户</a>
<a href="#" class="list-group-item list-group-item-action">删除用户</a>
</div>
</div>
<div class="col-md-9">
<!-- 右侧内容 -->
<div class="card">
<div class="card-body">
<h5 class="card-title">用户列表</h5>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">用户名</th>
<th scope="col">邮箱</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>张三</td>
<td>zhangsan@example.com</td>
<td>
<a href="#" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i> 编辑</a>
<a href="#" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i> 删除</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>李四</td>
<td>lisi@example.com</td>
<td>
<a href="#" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i> 编辑</a>
<a href="#" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i> 删除</a>
</td>
</tr>
<!-- 更多用户数据 -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 jQuery 和 Bootstrap JavaScript 插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
```
这是一个简单的用户管理页面示例,包括了导航栏、左侧菜单、用户列表等基本元素,您可以根据需要进行修改和扩展。