后台管理系统完整版模板(纯HTML+CSS,CRUD表格、分页、排序、搜索、复杂多级侧边导航、完整后台布局)

后台管理系统完整版模板(纯HTML+CSS,CRUD表格、分页、排序、搜索、复杂多级侧边导航、完整后台布局)

特点:

  1. 复杂多级侧边导航(可折叠菜单、二级/三级子菜单、active高亮、图标占位)
  2. 顶部导航栏 + 面包屑 + 右侧用户下拉菜单
  3. 数据表格:查询搜索、表头点击排序、新增、编辑、删除、批量勾选、分页(UI全部做好,JS仅做交互钩子,方便后端对接)
  4. 完整后台常用组件:状态标签、弹窗、表单、提示消息、卡片、统计看板
  5. 全响应式,PC为主,移动端自动折叠侧边栏
  6. 大量现代CSS:变量、嵌套选择器、过渡动画、hover效果、阴影、滤镜、aspect-ratio、container、grid/flex,可直接复制到真实后台项目
  7. 适合前端直接复制复用,后端只需要对接接口

⚠️ 说明:业务逻辑(真实删除、保存、分页数据切换)需要后端/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

📝 使用说明

  1. 复制全部代码,保存为 admin.html,浏览器直接打开
  2. CSS全部独立,无第三方UI库,可以直接复制样式片段到项目
  3. JS只做简单展开菜单、弹窗显示隐藏,业务逻辑(真实查询、删除、分页切换、排序请求)你可以对接后端接口
  4. 颜色、圆角、间距全部用CSS变量管理,方便统一修改主题

接下来可选继续扩展(你挑)

  1. 增加仪表盘统计卡片、图表容器、tab标签页、消息提示Toast、确认删除弹窗
  2. 增加更多后台页面:表单详情页、图片上传组件、树形选择组件
  3. 增加暗黑主题切换(亮色/暗色两套后台皮肤,CSS变量一键切换)
  4. 增加表单校验样式、步骤条、穿梭框、树组件
  5. 把CSS抽离为单独admin.css外部文件,HTML和CSS分离

你想要继续扩展哪一部分?

posted @ 2026-10-16 11:42  华腾智算  阅读(25)  评论(0)    收藏  举报
https://damo.alibaba.com/ https://tianchi.aliyun.com/course?spm=5176.21206777.J_3941670930.5.87dc17c9BZNvLL