后台管理布局

最新推荐文章于 2025-05-26 13:42:33 发布

等一杯清茶

最新推荐文章于 2025-05-26 13:42:33 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

分类专栏：后台admin 前端文章标签： web

本文链接：https://blog.csdn.net/weixin_45223595/article/details/118028820

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

后台admin

5 篇文章

订阅专栏

本文介绍了一种常见的后台管理系统布局设计方案，包括顶部区域用于显示标题、logo及用户信息；左侧为固定菜单栏；右侧为主要功能区域。通过简单的 HTML 和 CSS 实现了基本的页面结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台管理布局

结构

一般分三个部分：
	顶：标题、logo、用户窗口
	左侧：菜单框
	右侧：功能区

简单写一个模板

base.html
<head>
    {% block title %}
    {% endblock %}
    
    {% block css %}
    <style>
        .header{
        	width: 100%;
        	height: 50px;
        	background-color: xxx;
        }
        .menu{
        	background-color: xxx;
        	position: fixed;
        	top: 50px;
        	left: xxx;
        	bottom: 0px;
        	width: 33px
        }
        .content{
        	position: fixed;
        	top: 50px;
        	bottom: 0px;
        	right: xxx;
        	left: 33px;
        	overflow: auto;
        	padding: xxx
        }
    </style>
    {% endblock %}
</head>
<body>
    <div class="header"></div>
    <div class="container">
        <div class="menu"></div>
        <div class="content"></div>
    </div>
</body>