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>

后台管理

CSS 页面布局、后台管理示例的更多相关文章

python：页面布局后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
Python实例---基于页面的后台管理[简单版]
后台管理菜单 + 母板[css/content/js] 向后台提交数据[2种]: 1. 模态对话框(数据少操作,且Js复杂): form表单 :优点:简单,前端提交后后台处 ...
css页面布局
写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...
CSS页面布局常见问题总结
在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉.其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题. 水平垂直居中的几种方法说到水平垂 ...
css页面布局总结
W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...
CSS页面布局与网格（上）
1.布局规划 1.1 网格网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样 ...
css做的后台管理页面，不考虑ie8一下的
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
一、CSS概述二、CSS的选择器（认识）三、CSS样式和属性（练习）四、重构商城首页DIV+CSS(页面布局)（重点）浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用样式定义 ...
第6天：DIV+CSS页面布局实战
今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...

随机推荐

Qt编写自定义控件5-柱状温度计
前言柱状温度计控件,可能是很多人练手控件之一,基本上都是垂直方向展示,底部一个水银柱,中间刻度尺,刻度尺可以在左侧右侧或者两侧都有,自适应分辨率改动,有时候为了美观效果,可能还会整个定时器来实现动画 ...
LeetCode - Subarray sum equals k
Given an array of integers and an integer k, you need to find the total number of continuous subarra ...
N - Asteroids
Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape of an N x N g ...
SIP消息
SIP消息有两种类型:从客户机到服务器的请求消息(Request)和从服务器到客户机的响应消息(Response). 呼叫控制请求: --INVITE:发起呼叫,并对会话进行描述 --ACK:主叫确认 ...
剑指offer——python【第56题】删除链表中的重复节点
题目描述在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...
python——shopping car
# _Author:huang# date: 2017/11/26 # 简单的购物车程序money = input("money:") product_list = [ (&quo ...
关于ie浏览器信任站点的代码
1检测用户当前浏览器是否将域名的ip添加信任站点 js代码 //域名ip的获取 var hostname = window.location.hostname; var WshShell ...
KMP algorithm challenge string.Contains
KMP: public int KMP (ReadOnlySpan<char> content, ReadOnlySpan<char> span) { _next = new ...
[No0000197]Windows用户都应该知道的运行命令
通过"运行"命令,运行Windows丰富工具的方法.如果您知道工具或任务的相应"运行"命令,那么您就知道访问所述工具或任务的最快方法. 以下是我们最喜欢的Run ...
全文索引&&地理空间索引
Ⅰ.全文索引搜索引擎的实现核心技术,搜索类似where col like '%xxx%';关键字可以出现再某个列任何位置这种查询条件,B+ tree索引是无法使用的.如果col上创建了索引,因为排 ...

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

CSS 页面布局、后台管理示例的更多相关文章

随机推荐

热门专题