Web之后台管理页面布局

最新推荐文章于 2024-01-04 10:34:28 发布

中國颜值的半壁江山

最新推荐文章于 2024-01-04 10:34:28 发布

阅读量1.4k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/a17853481576/article/details/108849754

版权

本文探讨了后台管理页面的布局设计，包括两种主要类型：一类是左侧菜单跟随滑轮上下滑动的设计，另一类是左侧菜单和顶部菜单固定，只有内容区域滚动。此外，还提到了顶部的登录、注销和个人资料等元素布局，以及用户头像旁的消息提示布局策略。

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

1、页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
    
            background-color: #1E84E7;
        }
    </style>
</head>
<body>
    <div class="pg-header" >
        <div style="width: 980px;
        margin: 0 auto;			/*内容自动居中*/
        background-color: #5effb8">南村群童欺我老无力</div>
    </div>
    <div class="pg-content"></div>
    <div class="pg-footer"></div>
</body>
</html>

2、后台管理布局

position：
	fiexd			-- 让标签固定在窗口的某个位置
	relative		-- 单独无意义
	absolute		-- 第一次定位可以在指定位置，拖动滑轮就不行了

2.1、例子、第一类：左侧菜单跟随滑轮上下滑动

①先用带fixed的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
    
            margin: 0;
        }
        .left{
    
            float: left;
        }
        .right{
    
            float: right;
        }
        .pg-header{
    
            height: 48px;
            background-color: #1E84E7;
            color: white;
        }
        .pg-content .menu{
    
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #5effb8;
        }
        .pg-content .content{
    
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: #ff755f;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header">公安报茅入竹去</div>
    <div class="pg-content">
        <div class="menu left">唇焦口燥呼不得</div>
        <div class="content left">娇儿恶卧踏里裂
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
            <p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
        </div>
    </div>
    <div class="pg-flooter"></div>
</body>
</html>