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 实现

只能实现左边菜单栏一直固定在左边的这种情况。

<!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;}.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">a</div><div class="content left"><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></div></div><div class="pg-footer"></div>
</body>
</html>

2、后台布局之：absolute 实现

通过改一个属性，就可以实现一下两种布局：

a. 左侧菜单跟随滚动条
b. 左侧以及上部不动

<!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;}.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">a</div><div class="content left"><!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>--><!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>--><div style="background-color: purple;"><p style="margin: 0;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></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">123</div><div class="b">567</div></div>
</body>

引入第三方css插件，好多图标就可以直接用了。

下载图标插件 —> The Icons 地址

总体实现

<!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"/><!--导入第三方图片插件，目录里两个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>  <!--比如5条消息--></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">a</div><div class="content left"><div style="background-color: purple"><p style="margin: 0;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></div></div></div><div class="pg-footer"></div>
</body>
</html>

转载请务必保留此出处：http://blog.csdn.net/fgf00/article/details/53365574

HTML 后台管理页面布局相关推荐

后台管理页面布局（左侧导航长度根据右侧内容无限延伸）
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...
Web之后台管理页面布局
1.页面布局 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
前端入门之——后台管理页面布局学习 day10
1.滚动滑轮事件监听 2.内容到窗口的距离 3.position:absolute 定位置:右下角滚动:不固定 ===========================后天管理页面的布局======= ...
后台管理页面布局、web页面布局
做一个简单的页面布局演示地址:https://genin.gitee.io/web-demo/web-layout.html 基本结构如下 <body> <!-- svg图标 -- ...
web后台管理页面布局
1.上层标签块: 2.左侧菜单块: 3.中部内容显示块: 需求:要求上层标签块.左侧菜单快固定不动,滚动条只对中部显示块作用: <div class="all" style ...
简易的后台管理页面布局（一）
这里先简易地写一个:(重在学习,现实中不怎么用这种) <!DOCTYPE html> <html lang="en"> <head> <m ...
页面布局 - 后台管理页面布局
需要制作出如下图片的效果 : <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
后台管理页面基本布局方式
经典页面布局简易后台管理页面布局 1 左边菜单栏固定 2 header固定高度(宽度自适应) 3 主体统计列表(宽度自适应) 代码如下 html <div class="main&q ...
用jquery-easyui的布局layout写后台管理页面
先在官网下载easyui文档引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...
css-演练-完成一个后台管理页面-不完整版
观注别人的后台对后台进行区块划分目标,完成后台管理的布局完成大体框架的布局 <!doctype html> <html lang="en"> < ...