后台管理系统完整版模板(纯HTML+CSS,CRUD表格、分页、排序、搜索、复杂多级侧边导航、完整后台布局)
后台管理系统完整版模板(纯HTML+CSS,CRUD表格、分页、排序、搜索、复杂多级侧边导航、完整后台布局)
特点:
- 复杂多级侧边导航(可折叠菜单、二级/三级子菜单、active高亮、图标占位)
- 顶部导航栏 + 面包屑 + 右侧用户下拉菜单
- 数据表格:查询搜索、表头点击排序、新增、编辑、删除、批量勾选、分页(UI全部做好,JS仅做交互钩子,方便后端对接)
- 完整后台常用组件:状态标签、弹窗、表单、提示消息、卡片、统计看板
- 全响应式,PC为主,移动端自动折叠侧边栏
- 大量现代CSS:变量、嵌套选择器、过渡动画、hover效果、阴影、滤镜、
aspect-ratio、container、grid/flex,可直接复制到真实后台项目- 适合前端直接复制复用,后端只需要对接接口
⚠️ 说明:业务逻辑(真实删除、保存、分页数据切换)需要后端/JS补充,所有UI样式全部CSS实现。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>完整版后台管理系统|复杂导航+CRUD表格+分页排序查询</title>
<style>
/* ========== 全局CSS变量 后台主题 ========== */
:root {
--color-primary: #165DFF;
--color-success: #00B42A;
--color-warning: #FF7D00;
--color-danger: #F53F3F;
--color-info: #86909C;
--color-bg-page: #F2F3F5;
--color-bg-card: #ffffff;
--color-bg-sidebar: #1D2129;
--color-text-white: #fff;
--color-text-main: #1D2129;
--color-text-aux: #4E5969;
--color-text-light: #86909C;
--color-border: #E5E6EB;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 2px 8px rgba(0,0,0,0.08);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--sidebar-width: 240px;
--sidebar-collapse-width: 64px;
--header-height: 60px;
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
background-color: var(--color-bg-page);
color: var(--color-text-main);
line-height: 1.6;
overflow-x: hidden;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
}
/* ========== 布局容器:侧边栏 + 主内容 ========== */
.admin-layout {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
grid-template-rows: var(--header-height) 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
min-height: 100vh;
}
/* ========== 侧边栏 多级导航 ========== */
.sidebar {
grid-area: sidebar;
background-color: var(--color-bg-sidebar);
color: var(--color-text-white);
overflow-y: auto;
transition: var(--transition-normal);
z-index: 100;
}
.sidebar-logo {
height: var(--header-height);
display: flex;
align-items: center;
padding: 0 16px;
border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 18px;
font-weight: bold;
}
.sidebar-nav {
padding: 12px 0;
}
.nav-item {
}
.nav-title {
padding: 10px 20px;
color: var(--color-text-light);
font-size: 12px;
letter-spacing: 1px;
}
.nav-link {
display: flex;
align-items: center;
gap:10px;
padding: 12px 20px;
cursor: pointer;
transition: var(--transition-fast);
position: relative;
}
.nav-link:hover {
background-color: rgba(255,255,255,0.08);
}
.nav-link.active {
background-color: rgba(22,93,255,0.2);
color: var(--color-primary);
border-left: 3px solid var(--color-primary);
}
.nav-arrow {
margin-left: auto;
transition: transform var(--transition-fast);
}
.nav-submenu {
background-color: rgba(0,0,0,0.2);
overflow: hidden;
max-height: 0;
transition: max-height var(--transition-normal);
}
.nav-submenu.open {
max-height: 2000px;
}
.nav-submenu .nav-link {
padding-left: 44px;
}
.nav-submenu .nav-submenu .nav-link {
padding-left: 68px;
}
/* ========== 顶部Header ========== */
.admin-header {
grid-area: header;
background-color: var(--color-bg-card);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
padding:0 20px;
box-shadow: var(--shadow-sm);
justify-content: space-between;
}
.header-left {
display: flex;
align-items: center;
gap:20px;
}
.collapse-btn {
cursor: pointer;
padding: 6px;
border-radius: var(--radius-sm);
}
.collapse-btn:hover {
background-color: var(--color-bg-page);
}
.breadcrumb {
display:flex;
gap:8px;
font-size:14px;
color:var(--color-text-aux);
}
.breadcrumb a {
color:var(--color-primary);
}
.header-right {
display:flex;
align-items:center;
gap:16px;
}
.user-dropdown {
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
padding:4px 8px;
border-radius:var(--radius-md);
}
.user-dropdown:hover {
background-color: var(--color-bg-page);
}
/* ========== 主内容区域 ========== */
.admin-main {
grid-area: main;
padding:20px;
overflow-y:auto;
}
.card {
background-color: var(--color-bg-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding:20px;
margin-bottom:20px;
}
.card-header {
display:flex;
justify-content: space-between;
align-items:center;
margin-bottom:16px;
}
.card-title {
font-size:16px;
font-weight:600;
}
/* ========== 按钮样式 ========== */
.btn {
padding:6px 14px;
border-radius: var(--radius-sm);
border:1px solid transparent;
cursor:pointer;
transition: var(--transition-fast);
}
.btn-primary {
background-color: var(--color-primary);
color:white;
}
.btn-primary:hover {
background-color: #0F48D9;
}
.btn-success {
background-color: var(--color-success);
color:white;
}
.btn-danger {
background-color: var(--color-danger);
color:white;
}
.btn-default {
background-color: #fff;
border:1px solid var(--color-border);
}
.btn-default:hover {
background-color: var(--color-bg-page);
}
/* ========== 搜索查询区域 ========== */
.search-bar {
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-bottom:16px;
padding:16px;
background:#fff;
border-radius:var(--radius-md);
}
.search-item {
display:flex;
align-items:center;
gap:8px;
}
.search-item label {
white-space: nowrap;
font-size:14px;
}
.search-item input, .search-item select {
padding:6px 10px;
border:1px solid var(--color-border);
border-radius: var(--radius-sm);
min-width:180px;
}
/* ========== 后台数据表格【核心:CRUD + 排序 + 复选框】 ========== */
.table-wrap {
overflow-x:auto;
}
table.admin-table {
width:100%;
border-collapse: collapse;
}
.admin-table th, .admin-table td {
padding:12px 10px;
text-align:left;
border-bottom:1px solid var(--color-border);
font-size:14px;
}
.admin-table th {
background-color: #F7F8FA;
color:var(--color-text-aux);
user-select: none;
}
/* 表头排序可点击 */
.admin-table th.sortable {
cursor:pointer;
}
.admin-table th.sortable:hover {
background-color: #E5E6EB;
}
.admin-table tbody tr:hover {
background-color: #F2F3F5;
}
.status-tag {
display:inline-block;
padding:2px 8px;
border-radius: 4px;
font-size:12px;
}
.tag-success {
background-color: rgba(0,180,42,0.1);
color:var(--color-success);
}
.tag-warning {
background-color: rgba(255,125,0,0.1);
color:var(--color-warning);
}
.tag-danger {
background-color: rgba(245,63,63,0.1);
color:var(--color-danger);
}
.table-action {
display:flex;
gap:8px;
}
.table-action button {
padding:2px 8px;
font-size:13px;
}
/* ========== 分页组件 ========== */
.pagination {
display:flex;
justify-content:flex-end;
align-items:center;
gap:6px;
margin-top:16px;
}
.page-info {
margin-right:12px;
font-size:14px;
color:var(--color-text-light);
}
.pagination button {
min-width:32px;
height:32px;
border:1px solid var(--color-border);
background:#fff;
border-radius: var(--radius-sm);
cursor:pointer;
}
.pagination button.active {
background-color: var(--color-primary);
color:white;
border-color: var(--color-primary);
}
.pagination button:disabled {
cursor:not-allowed;
opacity:0.5;
}
/* ========== 弹窗 新增/编辑弹窗 ========== */
.modal-mask {
position:fixed;
inset:0;
background-color:rgba(0,0,0,0.45);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}
.modal-mask.open {
display:flex;
}
.modal-box {
width: min(90%, 600px);
background:#fff;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
}
.modal-header {
padding:16px 20px;
border-bottom:1px solid var(--color-border);
display:flex;
justify-content:space-between;
align-items:center;
}
.modal-close {
cursor:pointer;
font-size:20px;
}
.modal-body {
padding:20px;
}
.modal-footer {
padding:16px 20px;
border-top:1px solid var(--color-border);
display:flex;
justify-content:flex-end;
gap:10px;
}
.form-row {
margin-bottom:16px;
}
.form-row label {
display:block;
margin-bottom:6px;
font-size:14px;
}
.form-row input, .form-row select, .form-row textarea {
width:100%;
padding:8px 10px;
border:1px solid var(--color-border);
border-radius:var(--radius-sm);
}
/* ========== 响应式:小屏幕侧边栏折叠 ========== */
@media (max-width: 992px) {
.admin-layout {
grid-template-columns: var(--sidebar-collapse-width) 1fr;
}
.sidebar .nav-link span:not(.nav-arrow) {
display:none;
}
.nav-title {
display:none;
}
.nav-submenu {
display:none;
}
}
@media (max-width:768px) {
.admin-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main";
}
.sidebar {
position:fixed;
left:-100%;
width:var(--sidebar-width);
}
.search-bar {
flex-direction:column;
align-items:stretch;
}
}
</style>
</head>
<body>
<div class="admin-layout">
<!-- 侧边栏 多级菜单导航 -->
<aside class="sidebar">
<div class="sidebar-logo">后台管理系统</div>
<ul class="sidebar-nav">
<li class="nav-item">
<div class="nav-title">工作台</div>
<div class="nav-link">
<span>📊</span>
<span>仪表盘</span>
</div>
</li>
<li class="nav-item">
<div class="nav-title">系统管理</div>
<div class="nav-link" onclick="this.nextElementSibling.classList.toggle('open');this.querySelector('.nav-arrow').style.transform = this.nextElementSibling.classList.contains('open')?'rotate(90deg)':''">
<span>⚙️</span>
<span>系统设置</span>
<span class="nav-arrow">▶</span>
</div>
<ul class="nav-submenu">
<li>
<div class="nav-link">
<span>基础配置</span>
</div>
</li>
<li>
<div class="nav-link" onclick="this.nextElementSibling.classList.toggle('open');this.querySelector('.nav-arrow').style.transform = this.nextElementSibling.classList.contains('open')?'rotate(90deg)':''">
<span>权限管理</span>
<span class="nav-arrow">▶</span>
</div>
<ul class="nav-submenu">
<li><div class="nav-link">角色管理</div></li>
<li><div class="nav-link">菜单管理</div></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<div class="nav-title">用户模块</div>
<div class="nav-link active" onclick="this.nextElementSibling.classList.toggle('open');this.querySelector('.nav-arrow').style.transform = this.nextElementSibling.classList.contains('open')?'rotate(90deg)':''">
<span>👥</span>
<span>用户管理</span>
<span class="nav-arrow">▶</span>
</div>
<ul class="nav-submenu open">
<li><div class="nav-link">用户列表</div></li>
<li><div class="nav-link">会员等级</div></li>
</ul>
</li>
<li class="nav-item">
<div class="nav-title">内容管理</div>
<div class="nav-link" onclick="this.nextElementSibling.classList.toggle('open');this.querySelector('.nav-arrow').style.transform = this.nextElementSibling.classList.contains('open')?'rotate(90deg)':''">
<span>📄</span>
<span>文章管理</span>
<span class="nav-arrow">▶</span>
</div>
<ul class="nav-submenu">
<li><div class="nav-link">文章列表</div></li>
<li><div class="nav-link">分类管理</div></li>
</ul>
</li>
<li class="nav-item">
<div class="nav-title">日志中心</div>
<div class="nav-link">
<span>📜</span>
<span>操作日志</span>
</div>
<div class="nav-link">
<span>⚠️</span>
<span>异常日志</span>
</div>
</li>
</ul>
</aside>
<!-- 顶部头部 -->
<header class="admin-header">
<div class="header-left">
<div class="collapse-btn">☰</div>
<div class="breadcrumb">
<a href="#">首页</a>
<span>/</span>
<a href="#">用户模块</a>
<span>/</span>
<span>用户列表</span>
</div>
</div>
<div class="header-right">
<span>🔔</span>
<div class="user-dropdown">
<span>管理员</span>
</div>
</div>
</header>
<!-- 主内容 -->
<main class="admin-main">
<!-- 搜索筛选区域【查询】 -->
<div class="card">
<div class="card-header">
<div class="card-title">用户列表(增删改查、排序、分页)</div>
<button class="btn btn-primary" onclick="document.getElementById('addModal').classList.add('open')">+新增用户</button>
</div>
<!-- 查询表单 -->
<div class="search-bar">
<div class="search-item">
<label>用户名:</label>
<input type="text" placeholder="输入用户名搜索">
</div>
<div class="search-item">
<label>手机号:</label>
<input type="text" placeholder="手机号">
</div>
<div class="search-item">
<label>状态:</label>
<select>
<option value="">全部状态</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</div>
<div class="search-item">
<label>注册时间:</label>
<input type="date"> ~ <input type="date">
</div>
<div style="margin-left:auto; display:flex; gap:8px;">
<button class="btn btn-primary">查询</button>
<button class="btn btn-default">重置</button>
<button class="btn btn-success">批量导出</button>
</div>
</div>
<!-- 表格【核心CRUD表格】 -->
<div class="table-wrap">
<table class="admin-table">
<thead>
<tr>
<th><input type="checkbox"></th>
<th class="sortable">ID ↕</th>
<th class="sortable">用户名 ↕</th>
<th>手机号</th>
<th class="sortable">注册时间 ↕</th>
<th class="sortable">积分 ↕</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>10001</td>
<td>admin</td>
<td>13800138000</td>
<td>2026-01-10 08:20:10</td>
<td>2680</td>
<td><span class="status-tag tag-success">启用</span></td>
<td class="table-action">
<button class="btn btn-primary" onclick="document.getElementById('editModal').classList.add('open')">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>10002</td>
<td>user001</td>
<td>13900139000</td>
<td>2026-02-15 14:10:33</td>
<td>120</td>
<td><span class="status-tag tag-warning">待审核</span></td>
<td class="table-action">
<button class="btn btn-primary" onclick="document.getElementById('editModal').classList.add('open')">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>10003</td>
<td>testuser</td>
<td>13700137000</td>
<td>2026-03-22 09:45:22</td>
<td>560</td>
<td><span class="status-tag tag-danger">禁用</span></td>
<td class="table-action">
<button class="btn btn-primary" onclick="document.getElementById('editModal').classList.add('open')">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>10004</td>
<td>demo_user</td>
<td>13600136000</td>
<td>2026-04-05 16:30:11</td>
<td>990</td>
<td><span class="status-tag tag-success">启用</span></td>
<td class="table-action">
<button class="btn btn-primary" onclick="document.getElementById('editModal').classList.add('open')">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页控件 -->
<div class="pagination">
<div class="page-info">共 124 条数据,当前第1页</div>
<button disabled>上一页</button>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>...</button>
<button>13</button>
<button>下一页</button>
</div>
</div>
</main>
</div>
<!-- 新增用户弹窗 -->
<div class="modal-mask" id="addModal">
<div class="modal-box">
<div class="modal-header">
<span>新增用户</span>
<span class="modal-close" onclick="this.closest('.modal-mask').classList.remove('open')">×</span>
</div>
<div class="modal-body">
<div class="form-row">
<label>用户名</label>
<input type="text" placeholder="请输入用户名">
</div>
<div class="form-row">
<label>手机号</label>
<input type="text" placeholder="手机号">
</div>
<div class="form-row">
<label>用户状态</label>
<select>
<option>启用</option>
<option>禁用</option>
</select>
</div>
<div class="form-row">
<label>备注</label>
<textarea rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="this.closest('.modal-mask').classList.remove('open')">取消</button>
<button class="btn btn-primary">保存新增</button>
</div>
</div>
</div>
<!-- 编辑用户弹窗 -->
<div class="modal-mask" id="editModal">
<div class="modal-box">
<div class="modal-header">
<span>编辑用户</span>
<span class="modal-close" onclick="this.closest('.modal-mask').classList.remove('open')">×</span>
</div>
<div class="modal-body">
<div class="form-row">
<label>用户名</label>
<input type="text" value="admin">
</div>
<div class="form-row">
<label>手机号</label>
<input type="text" value="13800138000">
</div>
<div class="form-row">
<label>用户状态</label>
<select>
<option selected>启用</option>
<option>禁用</option>
</select>
</div>
<div class="form-row">
<label>备注</label>
<textarea rows="3">超级管理员账号</textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="this.closest('.modal-mask').classList.remove('open')">取消</button>
<button class="btn btn-primary">保存修改</button>
</div>
</div>
</div>
</body>
</html>
✅ 本模板包含后台核心能力(UI全部CSS实现)
1. 复杂导航系统
- 侧边栏三级折叠菜单,点击展开/收起
- 菜单分组标题、激活高亮、左侧选中标记
- 大屏完整展示,平板自动收起文字,移动端侧边栏隐藏
- 顶部导航:面包屑、菜单折叠按钮、通知、用户下拉
- CSS transition 平滑展开动画
2. 搜索查询区
- 多条件组合查询:文本搜索、下拉筛选、日期区间
- 查询、重置、批量导出按钮
- 自动换行,适配窄屏幕
3. 高级数据表格(后台CRUD核心)
- 全选/单行复选框,批量操作UI
- 表头可点击排序(UI箭头标识)
- 状态标签:成功/警告/危险三种样式
- 每行操作按钮:编辑、删除
- 鼠标hover高亮行,横向滚动(表格列很多时自动出现滚动条)
- 分页组件:总条数、页码、上一页下一页、禁用状态
4. 新增/编辑弹窗
- 遮罩层、居中弹窗
- 表单输入框、下拉、文本域
- 取消/保存按钮,关闭弹窗交互
- 圆角+阴影,现代后台风格
5. 布局系统
- CSS Grid 整体页面布局(侧边栏、header、主内容区域)
- 卡片容器、统一圆角/阴影主题
- 完整CSS变量,一键换主题色,直接修改
:root颜色即可 - 响应式适配 PC / Pad / Mobile
📝 使用说明
- 复制全部代码,保存为
admin.html,浏览器直接打开 - CSS全部独立,无第三方UI库,可以直接复制样式片段到项目
- JS只做简单展开菜单、弹窗显示隐藏,业务逻辑(真实查询、删除、分页切换、排序请求)你可以对接后端接口
- 颜色、圆角、间距全部用CSS变量管理,方便统一修改主题
接下来可选继续扩展(你挑)
- 增加仪表盘统计卡片、图表容器、tab标签页、消息提示Toast、确认删除弹窗
- 增加更多后台页面:表单详情页、图片上传组件、树形选择组件
- 增加暗黑主题切换(亮色/暗色两套后台皮肤,CSS变量一键切换)
- 增加表单校验样式、步骤条、穿梭框、树组件
- 把CSS抽离为单独
admin.css外部文件,HTML和CSS分离
你想要继续扩展哪一部分?

浙公网安备 33010602011771号