Web之后台管理页面布局

最新推荐文章于 2022-11-14 15:44:42 发布

中國颜值的半壁江山

最新推荐文章于 2022-11-14 15:44:42 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/a17853481576/article/details/108849754

版权

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>

②不带fixed

<!DOCTYPE html>

最低0.47元/天解锁文章

中國颜值的半壁江山

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Web之后台管理页面布局

1、页面布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ background-color: #1E84E7; } </style></head>&
复制链接

扫一扫