HTML 后台管理页面布局
设计网页，让网页好看：网上找模板
- 搜 HTML模板
- BootStrap
一、内容回顾：
HTML
一大堆的标签：块级、行内CSS
position
background
text-align
margin
padding
font-size
z-index
over-flow
:hover
opacity
float (clear:both)
line-height
border
color
display二、页面布局之主站页面
主站布局一般不占满页面，分为菜单栏、主页面、底部 上中下三部分。伪代码如下：
<div class='pg-header'>
<div style='width:980px;margin:0 auto;'>
内容自动居中
div>
div>
<div class='pg-content'>div>
<div class='pg-footer'>div>三、页面布局之后台布局
后台页面一般分为上面顶部菜单、左侧操作栏、中右为内容三部分。有的后台可能会有个底部栏。
首先，左侧操作栏和中间内容栏怎么分，按照百分比的话，为了防止页面拖拽导致布局变化，可以设置最小宽度：
width: 20%;
min-width: 200px; /*当宽度小于200像素时生效*/其次，左侧操作栏一般都是直接到底的，高度怎么设置呢？
后台管理布局：position:
- fixed – 永远固定在窗口的某个位置
- relative – 单独无意义
- absolute – 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。。
1、后台布局之：fixed 实现
只能实现左边菜单栏一直固定在左边的这种情况。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
}
.pg-content .menu{
position: fixed;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: fixed;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
background-color: purple;
overflow: auto; /***************当内容多时，出现滚动条**************/
/*不加overflow的话，内容多就不可见了*/
}
style>
head>
<body>
<div class="pg-header">div>
<div class="pg-content">
<div class="menu left">adiv>
<div class="content left">
<p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap>
div>
div>
<div class="pg-footer">div>
body>
html>2、后台布局之：absolute 实现
通过改一个属性，就可以实现一下两种布局：
- a. 左侧菜单跟随滚动条
- b. 左侧以及上部不动
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
}
.pg-content .menu{
position: absolute;
top:48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto; /*注释不注释，两种布局效果*/
}
style>
head>
<body>
<div class="pg-header">div>
<div class="pg-content">
<div class="menu left">adiv>
<div class="content left">
<div style="background-color: purple;">
<p style="margin: 0;">ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap>
div>
div>
div>
<div class="pg-footer">div>
body>
html>四、后台布局之菜单栏设计
后台管理页面一般顶部菜单栏，左侧有个logo，右侧有登录用户，以及报警信息，会话信息等。
- 用户头像设计为圆的
border-radius: 50%; /*设计头像图片是圆的*/- 鼠标移动过去之后，多个内容显示出不同的样式
<head>
<style>
.item{
background-color: #dddddd;
}
.item:hover{
color: red;
}
.item:hover .b{
background-color: greenyellow;
}
style>
head>
<body>
<div class="item">
<div class="a">123div>
<div class="b">567div>
div>
body>- 引入第三方css插件，好多图标就可以直接用了。
下载图标插件 —> The Icons 地址
总体实现
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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;
}
.pg-header .logo{
width: 200px;
background-color: #204982;
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;
color: white;
height: 48px;
position: relative;
}
.pg-header .user:hover{
background-color: #204982;
}
.pg-header .user .a img{
height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;
}
.pg-header .user .b{
z-index: 20;
position: absolute;
/*相对于用户div定位*/
top: 48px;
right: 0;
background-color: white;
color: black;
width: 160px;
display: none;
font-size: 14px;
line-height: 30px;
}
.pg-header .user .b a{
padding: 5px;
color: black;
text-decoration: none;
}
.pg-header .user .b a:hover{
background-color: #dddddd;
}
.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: #dddddd;
}
.pg-content .content{
position: absolute;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto;
z-index: 9;
}
/* 设置消息样式，数字外边加个圆圈 */
.info {
border-radius: 50%;
line-height: 1px;
background-color: red;
padding: 10px 7px;
font-size: 12px;
display: inline-block;
}
style>
head>
<body>
<div class="pg-header">
<div class="logo left">
顺势而为
div>
<div class="user right">
<a class="a" href="#">
<img src="22.jpg">
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 class="info">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">adiv>
<div class="content left">
<div style="background-color: purple">
<p style="margin: 0;">ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap><p>ap>
div>
div>
div>
<div class="pg-footer">div>
body>
html>转载请务必保留此出处：http://blog.csdn.net/fgf00/article/details/53365574