CSS 页面布局、后台管理示例

CSS 页面布局、后台管理示例

页面布局

  1、头部菜单

  2、中间内容/中间左侧菜单

  3、底部内容

<div class='pg-header'>
    <div style='width:980px;margin:0 auto;'>
        内容自动居中
    </div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>

 

网站图片推荐:fontawesome.io
下载:font-awesome-4.7.0   推荐:使用压缩过的min
导入:放入当前路径   

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

 

后台管理示例

后台管理2:加入overflow: auto;后左侧菜单不动
后台管理2:未加入overflow: auto;菜单跟随右侧延伸
后台管理2:两者切换更方便

<!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: #2459a2;
            color: white;
        }

        /*左边菜单内的.menu*/
        .pg-content .menu {
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: cornflowerblue;
        }

        /*y右边菜单内的.content*/
        .pg-content .content {
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: powderblue;
            /*加入滚动条*/
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu left">菜单</div>
    <div class="content left">
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>
后台管理布局1 :左侧菜单跟随滚动条
<!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: #2459a2;
            color: white;
        }

        /*左边菜单内的.menu*/
        .pg-content .menu {
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: cornflowerblue;
        }

        /*y右边菜单内的.content*/
        .pg-content .content {
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            /*加入滚动条*/
            /*      */
        }
    </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: powderblue;">
            <p style=" margin: 0;">内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>
后台管理布局2:左侧以及上部不动 **常用**

 

后台管理完整版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>

        /*去页面间距*/
        body{
            margin: 0;
        }

        /*标签左侧飘起*/
        .left{
            float: left;
        }

        /*标签右侧飘起*/
        .right{
            float: right;
        }

        /*头部菜单区域*/
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
            /*设置文字上下居中*/
            line-height: 48px;
        }

        /*设置网站log区域*/
        .pg-header .log{
            /*log区域设置菜单大小*/
            width: 200px;
            background-color: darkblue;
            /*设置文字左右居中*/
            text-align: center;
        }

        /* 其他图标区域边距设置*/
        .pg-header .icons{
            padding: 0 20px;
        }

        /*消息提示个数文字背景色*/
        .pg-header .zbjj {
            border-radius: 50%;
            display: inline-block;
            padding: 10px 7px;
            line-height: 1px;
            background-color: red;
            font-size: 12px;
        }

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

        /*添加登陆管理区域*/
        .pg-header .user{
            /*user区域设置菜单大小*/
            margin-right: 60px;
            padding: 0 20px;
            color: white;
            /*飘起后防止出去*/
            height: 48px;
            /*user文字左右居中*/
            /*text-align: center;*/
        }

        /*鼠标点击后背景颜色更改*/
        .pg-header .user:hover{
            background-color:mediumslateblue ;
        }

        /*用户头像图片*/
        .pg-header .user .a img{
            height: 40px;
            width: 40px;
            margin: 4px;
            /*图片变为圆形*/
            border-radius: 50%;
        }

        /*用户选择框*/
        .pg-header .user .b{
            position: absolute;
            top: 48px;
            right: -1px;
            width: 160px;
            background-color: white;
            color: black;
            /*解决分层*/
            z-index:20;
            /*不适用当前函数*/
            display: none;
        }

        /*鼠标指向用户管理区域触发用户选择框*/
        .pg-header .user:hover .b{
            display: block;
        }

        /*用户选择框解决分行*/
        .pg-header .user .b a{
            display: block;
        }

        /*左边菜单内的.menu*/
        .pg-content .menu{
            position: absolute;
            top:48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: cornflowerblue;
        }

        /*y右边菜单内的.content*/
        .pg-content .content{
            position: absolute;
            top:48px;
            right: 0;
            bottom: 0;
            left: 200px;
            overflow: auto;
            z-index: 9;
        }

    </style>
</head>
<body>

    <!--上部区域-->
    <div class="pg-header">
        <!--log-->
        <div class="log left">
            Kevin.Xiang
        </div>

        <div class="user right" style="position: relative">
            <!--点击头像跳转-->
            <a class="a" href="#">
                <!--添加图片-->
                <img src="xsk.jpg">
            </a>
            <div class="b">
                <a>我的资料</a>
                <a>注销</a>
            </div>
        </div>

        <!--消息-->
        <div class="icons right">
            <i class="fa fa-comment-o" aria-hidden="true"></i>
            <!--消息个数-->
            <span class="zbjj">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: powderblue;">
                <p style=" margin: 0;">内容</p><p>内容</p><p>内容</p>
                <p>内容</p><p>内容</p><p>内容</p>
                <p>内容</p><p>内容</p><p>内容</p>
                <p>内容</p><p>内容</p><p>内容</p>
                <p>内容</p><p>内容</p><p>内容</p>
                <p>内容</p><p>内容</p><p>内容</p>
                <p>内容</p><p>内容</p><p>内容</p>
                <p>内容</p><p>内容</p><p>内容</p>
            </div>
        </div>
    </div>

    <!--底层区域-->
    <div class="pg-footer"></div>

</body>
</html>
后台管理

 

posted @ 2019-02-21 17:29  kevin.Xiang  阅读(1913)  评论(0编辑  收藏  举报