Layui后台管理系统基本框架模板【菜单展开/收起、全屏、个人信息、更多】

原创

已于 2025-06-16 15:47:49 修改 · 1.3k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

于 2025-01-09 15:59:30 首次发布

一、前言

适合初学开发者和学生使用，可做静态网页或者后台管理系统，支持基本功能。除引用layui外无任何多余依赖。

layui依赖：https://layui.dev/
如下图直接下载，引入项目中！
在这里插入图片描述

二、源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EASY后台</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<style>
    /* 顶部样式 */
    .layui-header {
     
     
        padding: 0 20px;
    }

    .layui-logo {
     
     
        line-height: 60px;
        text-align: center;
    }

    .easy-logo-img {
     
     
        width: 30px;
        height: 30px;
        vertical-align: middle;
        border-style: none;
    }

    .easy-logo-title {
     
     
        font-size: 20px;
        font-weight: bold;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        position: relative;
    }

    /* 侧边菜单样式 */
    .layui-side {
     
     
        width: 200px;
    }

    .layui-nav-tree .layui-nav-item a {
     
     
        overflow: visible;
    }

    /* 主体样式 */
    .layui-tab {
     
     
        margin: 0;
    }

    .layui-tab-content {
     
     
        padding: 0;
    }

    /* 底部样式 */
	.layui-footer-body {
     
     
        position: fixed;
        right: 20px;
    }
</style>
<div class="layui-layout layui-layout-admin">
    <!-- 顶部区域 -->
    <div class="layui-header">
        <div class="layui-logo">
            <img class="easy-logo-img" src="./static/images/logo.png">
            <span class="easy-logo-title">后台管理系统</span>
        </div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="spreadMenu">
                <i class="layui-icon layui-icon-shrink-right" id="spreadMenu"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="fullScreen">
                <i class="layui-icon layui-icon-screen-full" id="fullScreen"></i>
            </li>
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="./static/images/logo.png" class="layui-nav-img">张三
                </a>
                <dl class=