后台管理布局（css）

后台管理布局1

应用：

width

min-width

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
    <style type="text/css">
        .body{
            margin: 0;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color: #2459a2;
        }
        .pg-content .menu{
            width: 20%;
            background-color:red;
            /* 当20%小于200px时应用min-width */
            min-width:200px;
            height: 800px;
        }
        .pg-content .content{
            width: 80%;
            background-color: green;
        }
    </style>

</head>
<body >
    <div class=‘pg-header‘></div>
    <div class=‘pg-content‘>
        <div class="menu left">a</div>
        <div class="content left">
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        </div>
    </div>
    <div class=‘pg-footer‘></div>
</body>
</html>

后台管理布局2

应用：position: fixed;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color: blue;
        }
        .pg-content .menu{
            position:fixed;
            top:48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background: green;
        }
        .pg-content .content{
            position:fixed;
            top: 48px;
            right: 0;
            bottom:0;
            left:200px;
            background-color: gray;
            overflow:auto;
        }
    </style>

</head>
<body>
    <div class=‘pg-header‘></div>
    <div class=‘pg-content‘>
        <div class="menu left"></div>
        <div class="content left">
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        </div>
    </div>
    <div class=‘pg-footer‘></div>

</body>
</html>

后台管理布局3 --左侧菜单

应用：

position: absolute;

overflow: auto;    通过 overflow 实现两种切换，去掉 overflow: auto 则和“后台管理布局2”效果相同，启用overflow: auto左侧菜单不动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color: blue;
        }
        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom:0;
            width:200px;
            background-color: green;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            left: 200px;
            right: 0;
            bottom:0;
            min-width:800px;
            overflow: auto;
            /*background-color: gray;*/
        }
    </style>

</head>
<body>
    <div class=‘pg-header‘></div>
    <div class=‘pg-content‘>
        <div class="menu left"></div>
        <div class="content left">
            <div style="background-color: gray">
            <p style="margin:0">asdf</p>
            <p>12341234123412341234123412341234123412341234123412341234123412341234123412341234123412341234</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </div>
        </div>
    </div>
    <div class=‘pg-footer‘></div>

</body>
</html>

后台管理布局4 -- 导航栏

应用：

position: relative;

position: absolute;

hover;

z-index;

border-radius: 50%; 使图标变成圆形

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color: blue;
            color:white;
            line-height: 48px;
        }
        .pg-header .logo{
            width: 200px;
            background-color: cadetblue;
            text-align: center;
        }
        .pg-header .user{
            margin-right: 60px;
            padding: 0 20px;
            background-color: cadetblue;
            color: white;
            height: 48px;
        }
        /*当鼠标移到头像时，显示下拉框*/
        .pg-header .user:hover{
            background-color: blue;
        }
        .pg-header .user .a img{
            height: 40px;width: 40px;border-radius: 50%;
        }
        .pg-header .user .b{
            z-index:20;
            position: absolute;
            top: 48px;
            right:40px;
            width:160px;
            background-color: white;
            display: none;
        }

        .pg-header .user:hover .b{
            display: block;
        }
        .pg-header .user .b a{
            display:block;
        }

        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom:0;
            width:200px;
            background-color: green;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            left: 200px;
            right: 0;
            bottom:0;
            min-width:800px;
            overflow: auto;
            z-index:9;
        }
    </style>

</head>
<body>
    <div class=‘pg-header‘>
        <div class="logo left">logo</div>
        <div class="user right" style="position: relative;">
            <a class="a" href="">
                <img src="1.png">
            </a>
            <div class="b">
                <a href="" >我的资料</a>
                <a href="" >注销</a>
            </div>
        </div>
    </div>
    <div class=‘pg-content‘>
        <div class="menu left"></div>
        <div class="content left">
            <div style="background-color: gray">
            <p style="margin:0">asdf</p>
            <p>12341234123412341234123412341234123412341234123412341234123412341234123412341234123412341234</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </div>
        </div>
    </div>
    <div class=‘pg-footer‘></div>

</body>
</html>

后台管理布局4 -- 导航栏（图标）

应用：

font-awesome.min.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
    <link rel="stylesheet" type="text/css" href="./font-awesome-4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        body{
            margin: 0;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color: blue;
            color:white;
            line-height: 48px;
        }
        .pg-header .logo{
            width: 200px;
            background-color: cadetblue;
            text-align: center;
        }

        .pg-header .icons{
            padding: 0 20px;
        }        

        .pg-header .icons:hover{
            background-color: #204982;
        }

        .pg-header .user{
            margin-right: 60px;
            padding: 0 20px;
            background-color: cadetblue;
            color: white;
            height: 48px;
        }
        /*当鼠标移到头像时，显示下拉框*/
        .pg-header .user:hover{
            background-color: blue;
        }
        .pg-header .user .a img{
            height: 40px;width: 40px;border-radius: 50%;
        }
        .pg-header .user .b{
            z-index:20;
            position: absolute;
            top: 48px;
            right:40px;
            width:160px;
            background-color: white;
            display: none;
        }

        .pg-header .user:hover .b{
            display: block;
        }
        .pg-header .user .b a{
            display:block;
        }

        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom:0;
            width:200px;
            background-color: green;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            left: 200px;
            right: 0;
            bottom:0;
            min-width:800px;
            overflow: auto;
            z-index:9;
        }
    </style>

</head>
<body>
    <div class=‘pg-header‘>
        <div class="logo left">logo</div>

        <div class="user right" style="position: relative;">
            <a class="a" href="">
                <img src="1.png">
            </a>
            <div class="b">
                <a href="" >我的资料</a>
                <a href="" >注销</a>
            </div>
        </div> 

        <div class="icons right">
            <i class="fa fa-commenting-o" aria-hidden="true"></i>
            <span>5</span>
        </div>

        <div class="icons right">
            <i class="fa fa-bell-o" aria-hidden="true"></i>
        </div>

    </div>
    <div class=‘pg-content‘>
        <div class="menu left"></div>
        <div class="content left">
            <div style="background-color: gray">
            <p style="margin:0">asdf</p>
            <p>12341234123412341234123412341234123412341234123412341234123412341234123412341234123412341234</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </div>
        </div>
    </div>
    <div class=‘pg-footer‘></div>

</body>
</html>

时间： 2024-10-01 04:40:35

后台管理布局（css）的相关文章

基本后台管理布局

页面html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>首页</title> <link href="/Content/site.css" rel=&

django后台管理布局

在model模块里设置 class pc_info(models.Model): ip = models.CharField(max_length=64) sn = models.CharField(max_length=64) addr = models.CharField(max_length=64) room_num = models.CharField(max_length=64) pc_type = models.CharField(max_length=64) brand = mod

最简单的后台管理布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin:0; } .left{ float: left; } .right{ float: right; } .pg-header{ position:fixed; top: 0; left:0

BBS（仿博客园系统）项目05（后台管理功能实现：文章添加、富文本编辑器使用、xss攻击、BeautifulSoup4模块、富文本编辑器上传图片、修改头像）

摘要 布局框架搭建 随笔添加 后台管理富文本编辑器KindEditor xss攻击 文章简介的截取,BeautifulSoup4模块 富文本编辑器上传图片 头像修改 一.后台管理框架布局搭建 后台管理布局框架分析:导航条.左侧功能区.右侧主要功能显示和实现区 实现: 导航条:使用bootstrap模板:JavaScript>>导航条 左侧:使用bootstrap模板:组件>>列表组 右侧:使用bootstrap模板:JavaScript>>标签页 新建后台管理路由(注意

后台管理页面布局

1 <!DOCTYPE html> 2 <!--后台管理页面布局1--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .rig

简单css后台管理登录

<!doctype html><html> <head> <meta charset="UTF-8"> <title>后台管理</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 14px/1.5 '微软雅黑'; background: #f9f9f9; } a { color: #000

css做的后台管理页面，不考虑ie8一下的

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>盒子模型</title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; width:100%; overflow:hidden; } .wrap { he

后台管理UI

后台管理UI 目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十.LigerUI 十一.其它UI 十二.总结 最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容IE8.不考虑兼容IE6/IE7,因为现在还有很多公司在使用Wi

后台管理UI的选择

后台管理UI的选择 目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十.LigerUI 十一.FineUI 十二.其它UI 十三.总结 最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容IE8.不考虑兼容IE6/IE7,因为