1. 顶部导航栏：包含 Logo、搜索框、用户信息、通知和系统设置。
  2. 侧边栏菜单：可折叠，包含常用功能模块，如首页、订单、商品、会员、营销、数据、设置等。
  3. 区：展示不同模块的页面内容，这里我们以一个“仪表盘”首页为例。
  4. 响应式设计：在移动设备上，侧边栏会自动隐藏，通过汉堡菜单呼出。
  5. 交互效果：菜单折叠、页面切换、卡片悬浮效果等。

最终效果预览

代码实现

您可以将以下所有代码复制到一个 .html 文件中，然后用浏览器打开即可查看效果。

仿微盟用户后台管理界面html模板
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">微盟后台管理系统</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* --- 全局样式 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #333;
            background-color: #f0f2f5;
        }
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
        /* --- 布局容器 --- */
        .layout-container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }
        /* --- 侧边栏 --- */
        .sidebar {
            width: 240px;
            background-color: #001529;
            color: #fff;
            transition: width 0.2s ease-in-out;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .sidebar.collapsed {
            width: 64px;
        }
        .sidebar-header {
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #001529;
        }
        .sidebar-header .logo {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            transition: opacity 0.2s;
        }
        .sidebar.collapsed .logo {
            opacity: 0;
        }
        .sidebar-menu {
            list-style: none;
            padding: 16px 0;
        }
        .menu-item {
            position: relative;
        }
        .menu-link {
            display: flex;
            align-items: center;
            padding: 14px 24px;
            color: #fff;
            text-decoration: none;
            transition: all 0.2s;
        }
        .menu-link:hover {
            background-color: #1890ff;
        }
        .menu-link.active {
            background-color: #1890ff;
            color: #fff;
        }
        .menu-link.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: #fff;
        }
        .menu-icon {
            font-size: 18px;
            width: 24px;
            text-align: center;
            margin-right: 16px;
        }
        .menu-text {
            flex: 1;
        }
        .sidebar.collapsed .menu-text,
        .sidebar.collapsed .menu-submenu {
            display: none;
        }
        .menu-submenu {
            list-style: none;
            background-color: rgba(0, 0, 0, 0.2);
        }
        .menu-submenu .menu-link {
            padding-left: 48px;
            font-size: 13px;
        }
        /* --- 主内容区 --- */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        /* --- 顶部导航栏 --- */
        .header {
            height: 64px;
            background-color: #fff;
            box-shadow: 0 1px 4px rgba(0,21,41,.08);
            display: flex;
            align-items: center;
            padding: 0 24px;
            z-index: 10;
        }
        .header-left {
            display: flex;
            align-items: center;
        }
        .menu-toggle {
            font-size: 20px;
            color: #333;
            cursor: pointer;
            margin-right: 24px;
            transition: color 0.2s;
        }
        .menu-toggle:hover {
            color: #1890ff;
        }
        .header-title {
            font-size: 18px;
            font-weight: 500;
        }
        .header-right {
            margin-left: auto;
            display: flex;
            align-items: center;
        }
        .search-box {
            position: relative;
            margin-right: 24px;
        }
        .search-input {
            width: 200px;
            padding: 6px 11px 7px;
            padding-left: 32px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            outline: none;
            transition: width 0.2s;
        }
        .search-input:focus {
            width: 250px;
            border-color: #40a9ff;
        }
        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #8c8c8c;
        }
        .header-action {
            display: flex;
            align-items: center;
        }
        .header-icon {
            font-size: 16px;
            color: #8c8c8c;
            padding: 8px;
            margin-left: 12px;
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
        }
        .header-icon:hover {
            color: #1890ff;
        }
        .notification-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 6px;
            height: 6px;
            background-color: #ff4d4f;
            border-radius: 50%;
        }
        .user-dropdown {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 6px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        .user-dropdown:hover {
            background-color: #f0f2f5;
        }
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #1890ff;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
        }
        .user-info {
            display: flex;
            flex-direction: column;
        }
        .user-name {
            font-size: 14px;
            font-weight: 500;
        }
        .user-role {
            font-size: 12px;
            color: #8c8c8c;
        }
        /* --- 页面内容 --- */
        .page-content {
            flex: 1;
            padding: 24px;
            overflow-y: auto;
        }
        .breadcrumb {
            margin-bottom: 16px;
        }
        .breadcrumb-item {
            color: #8c8c8c;
            text-decoration: none;
        }
        .breadcrumb-item:hover {
            color: #1890ff;
        }
        .breadcrumb-item:last-child {
            color: #333;
            cursor: text;
        }
        /* --- 仪表盘卡片 --- */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 24px;
            margin-bottom: 24px;
        }
        .dashboard-card {
            background-color: #fff;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.03);
            transition: box-shadow 0.2s;
        }
        .dashboard-card:hover {
            box-shadow: 0 4px 12px 0 rgba(0,0,0,.1);
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .card-title {
            font-size: 14px;
            color: #8c8c8c;
        }
        .card-icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #fff;
        }
        .card-icon.blue { background-color: #1890ff; }
        .card-icon.green { background-color: #52c41a; }
        .card-icon.orange { background-color: #fa8c16; }
        .card-icon.red { background-color: #f5222d; }
        .card-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        .card-footer {
            font-size: 13px;
            color: #52c41a;
            display: flex;
            align-items: center;
        }
        .card-footer i {
            margin-right: 4px;
        }
        /* --- 响应式设计 --- */
        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                z-index: 1000;
                transform: translateX(-100%);
            }
            .sidebar.mobile-open {
                transform: translateX(0);
            }
            .sidebar-overlay {
                display: block;
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 999;
            }
            .search-box {
                display: none;
            }
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="layout-container">
        <!-- 侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo">WOS</div>
            </div>
            <ul class="sidebar-menu">
                <li class="menu-item">
                    <a href="#" class="menu-link active">
                        <i class="fas fa-home menu-icon"></i>
                        <span class="menu-text">首页</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#" class="menu-link">
                        <i class="fas fa-shopping-cart menu-icon"></i>
                        <span class="menu-text">订单管理</span>
                    </a>
                    <ul class="menu-submenu">
                        <li><a href="#" class="menu-link">全部订单</a></li>
                        <li><a href="#" class="menu-link">待付款</a></li>
                        <li><a href="#" class="menu-link">待发货</a></li>
                        <li><a href="#" class="menu-link">已完成</a></li>
                    </ul>
                </li>
                <li class="menu-item">
                    <a href="#" class="menu-link">
                        <i class="fas fa-box menu-icon"></i>
                        <span class="menu-text">商品管理</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#" class="menu-link">
                        <i class="fas fa-users menu-icon"></i>
                        <span class="menu-text">会员管理</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#" class="menu-link">
                        <i class="fas fa-bullhorn menu-icon"></i>
                        <span class="menu-text">营销中心</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#" class="menu-link">
                        <i class="fas fa-chart-line menu-icon"></i>
                        <span class="menu-text">数据统计</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#" class="menu-link">
                        <i class="fas fa-cog menu-icon"></i>
                        <span class="menu-text">系统设置</span>
                    </a>
                </li>
            </ul>
        </aside>
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="header">
                <div class="header-left">
                    <i class="fas fa-bars menu-toggle" id="menuToggle"></i>
                    <h1 class="header-title">仪表盘</h1>
                </div>
                <div class="header-right">
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索订单、商品、会员...">
                    </div>
                    <div class="header-action">
                        <i class="fas fa-bell header-icon">
                            <span class="notification-badge"></span>
                        </i>
                        <i class="fas fa-envelope header-icon"></i>
                        <div class="user-dropdown">
                            <div class="user-avatar">A</div>
                            <div class="user-info">
                                <span class="user-name">Admin</span>
                                <span class="user-role">超级管理员</span>
                            </div>
                            <i class="fas fa-chevron-down" style="margin-left: 8px; color: #8c8c8c;"></i>
                        </div>
                    </div>
                </div>
            </header>
            <!-- 页面内容 -->
            <main class="page-content">
                <div class="breadcrumb">
                    <a href="#" class="breadcrumb-item">首页</a>
                    <span style="color: #ccc; margin: 0 8px;">/</span>
                    <span class="breadcrumb-item">仪表盘</span>
                </div>
                <div class="dashboard-grid">
                    <div class="dashboard-card">
                        <div class="card-header">
                            <span class="card-title">今日订单</span>
                            <div class="card-icon blue">
                                <i class="fas fa-shopping-bag"></i>
                            </div>
                        </div>
                        <div class="card-value">1,258</div>
                        <div class="card-footer">
                            <i class="fas fa-arrow-up"></i>
                            <span>较昨日 12.5%</span>
                        </div>
                    </div>
                    <div class="dashboard-card">
                        <div class="card-header">
                            <span class="card-title">今日销售额</span>
                            <div class="card-icon green">
                                <i class="fas fa-yen-sign"></i>
                            </div>
                        </div>
                        <div class="card-value">¥ 32,568</div>
                        <div class="card-footer">
                            <i class="fas fa-arrow-up"></i>
                            <span>较昨日 8.2%</span>
                        </div>
                    </div>
                    <div class="dashboard-card">
                        <div class="card-header">
                            <span class="card-title">新增会员</span>
                            <div class="card-icon orange">
                                <i class="fas fa-user-plus"></i>
                            </div>
                        </div>
                        <div class="card-value">86</div>
                        <div class="card-footer">
                            <i class="fas fa-arrow-down"></i>
                            <span>较昨日 3.1%</span>
                        </div>
                    </div>
                    <div class="dashboard-card">
                        <div class="card-header">
                            <span class="card-title">库存预警</span>
                            <div class="card-icon red">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                        </div>
                        <div class="card-value">12</div>
                        <div class="card-footer">
                            <i class="fas fa-arrow-up"></i>
                            <span>较昨日 2 件</span>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <!-- 遮罩层 (移动端) -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>
    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const menuToggle = document.getElementById('menuToggle');
        const sidebarOverlay = document.getElementById('sidebarOverlay');
        menuToggle.addEventListener('click', () => {
            if (window.innerWidth <= 768) {
                // 移动端逻辑
                sidebar.classList.toggle('mobile-open');
                sidebarOverlay.style.display = sidebar.classList.contains('mobile-open') ? 'block' : 'none';
            } else {
                // PC端逻辑
                sidebar.classList.toggle('collapsed');
            }
        });
        // 点击遮罩层关闭侧边栏 (移动端)
        sidebarOverlay.addEventListener('click', () => {
            sidebar.classList.remove('mobile-open');
            sidebarOverlay.style.display = 'none';
        });
        // 菜单项点击高亮
        const menuLinks = document.querySelectorAll('.menu-link');
        menuLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                // 移除所有active类
                menuLinks.forEach(l => l.classList.remove('active'));
                // 给当前点击的元素添加active类
                link.classList.add('active');
                // 如果是移动端，点击后关闭菜单
                if (window.innerWidth <= 768) {
                    sidebar.classList.remove('mobile-open');
                    sidebarOverlay.style.display = 'none';
                }
            });
        });
        // 窗口大小改变时，重置侧边栏状态
        let isResizing = false;
        window.addEventListener('resize', () => {
            if (!isResizing) {
                isResizing = true;
                setTimeout(() => {
                    if (window.innerWidth > 768) {
                        sidebar.classList.remove('mobile-open');
                        sidebarOverlay.style.display = 'none';
                    } else {
                        // 如果是从小屏幕放大，确保侧边栏是折叠状态
                        if (!sidebar.classList.contains('collapsed')) {
                            sidebar.classList.add('collapsed');
                        }
                    }
                    isResizing = false;
                }, 250);
            }
        });
    </script>
</body>
</html>

代码结构解析

  1. HTML 结构:

    • layout-container: 最外层容器，使用 flex 布局。
    • sidebar: 侧边栏，包含 Logo 和菜单列表。
    • main-content: 主内容区，包含 header (顶部导航) 和 page-content (页面主体)。
    • sidebar-overlay: 移动端遮罩层，用于点击关闭侧边栏。
    • 菜单项使用了嵌套的 <ul> 结构来展示二级菜单。

  2. CSS 样式:

    • 布局: 大量使用 Flexbox 实现灵活的布局，如侧边栏和主内容区的并排、顶部导航栏内部元素的排列。
    • 侧边栏: 通过 .sidebar.collapsed 类来控制宽度的变化，实现折叠效果，子元素（如 Logo、菜单文字）通过 opacity: 0 或 display: none 来隐藏。
    • 主题色: 使用了蓝色 (#1890ff) 作为主色调，符合现代后台管理系统的风格。
    • 卡片: 使用 grid 布局实现仪表盘的响应式网格效果，卡片添加了 hover 效果，提升交互体验。
    • 响应式: 通过 @media (max-width: 768px) 媒体查询，在移动设备上将侧边栏变为固定定位并默认隐藏，通过 transform 来控制显示/隐藏。

  3. JavaScript 交互:

    • 菜单折叠: 监听菜单按钮的点击事件，根据屏幕宽度判断是执行 PC 端的宽度切换还是移动端的显示/隐藏逻辑。
    • 菜单高亮: 监听所有菜单链接的点击事件，移除所有链接的 active 类，然后给当前点击的链接添加 active 类。
    • 移动端遮罩: 点击遮罩层可以关闭侧边栏。
    • 窗口调整: 监听 resize 事件，在窗口大小改变时重置侧边栏状态，确保在不同设备上体验一致。

这个模板提供了一个功能完整、视觉美观的后台管理界面基础，您可以在此基础上进行扩展，例如添加更多的页面内容、实现真正的路由跳转、集成数据图表等。

仿微盟用户后台管理界面html模板
（图片来源网络，侵删）
仿微盟用户后台管理界面html模板
（图片来源网络，侵删）