前端武器库系列之html后台管理页面布局
设计网页，让网页好看：网上找模板
- 搜 HTML模板
- BootStrap
一、页面布局之主站页面
主站布局一般不占满页面，分为菜单栏、主页面、底部 上中下三部分。伪代码如下：
<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>
前端武器库系列之html后台管理页面布局的更多相关文章
- HTML后台管理页面布局
设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...
- python：页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- HTML高级标签（2）————窗体分帧（2）————后台管理页面
使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...
- 8 功能6：后台管理页面，编辑文章,xss攻击
1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...
- 老男孩Day16作业：登录、注册、后台管理页面（动态）
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
- go语言实战教程之 后台管理页面统计功能开发（2）
上节内容介绍了后台管理页面统计功能开发(1),从功能介绍,到接口请求分析和归类,最后是代码设计.经过上节内容的介绍,已经将业务逻辑和开发逻辑解释清楚,本节内容侧重于编程代码实现具体的功能. 当日增长数 ...
- 用jquery-easyui的布局layout写后台管理页面
先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...
- Django用户登陆以及跳转后台管理页面3
Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html Django用户登陆以及跳转后台管理页面2http://www.cnbl ...
- Django用户登陆以及跳转后台管理页面2
请先写好以下,再来替换文件 Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html from django.shortcuts ...
随机推荐
- MQ与logstash实现ES与数据库同步区别
Logstash 实现ES 与数据库同步: 使用定时器(使用sql 定时的去查询数据进行同步).实现方式比较简单. MQ 实现 ES 与数据库同步: 实时性,消息放到MQ中,消费者会自动的消费,复杂性 ...
- 淘宝API总结
1. 淘宝客API https://open.alimama.com/?spm=a219t.11816995.1998910419.d8546b700.2a8f75a5C0NajI#!/documen ...
- HTTP无状态协议理解
TTP协议是无状态协议. 无状态是指协议对于事务处理没有记忆能力.缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大.另一方面,在服务器不需要先前信息时它的应 ...
- VBA日期时间函数（十三）
VBScript日期和时间函数帮助开发人员将日期和时间从一种格式转换为另一种格式,或以适合特定条件的格式表示日期或时间值. 日期函数 编号 函数 描述 1 Date 一个函数,它返回当前的系统日期. ...
- iOS - SceneKit 3D引擎初探
最近到处搜集资料研究3D最后还是决定锁定OC框架,找到的学习资料随后慢慢整理 SceneKit 是一个OC 框架,开始之前,先熟悉一下SceneKit 的三维坐标系: 很清楚的看到,SceneKit ...
- mysql建表常用命令
MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...
- https、加密安全
1.Https HTTPS在传输的过程中会涉及到三个密钥: 服务器端的公钥和私钥,用来进行非对称加密 客户端生成的随机密钥,用来进行对称加密 一个HTTPS请求实际上包含了两次HTTP传输,可以细分为 ...
- 2602978 - [How to] Content Synchronization between SLDs
http://47.101.174.212:52000/sld http://47.101.176.136:56000/sld Symptom As described in Planning Gui ...
- SAP云平台上的ABAP编程环境里如何消费第三方服务
在ABAP On-Premises环境下,使用ABAP编程消费第三方服务,相信很多ABAP顾问都已经非常熟悉了,无非就是使用CL_HTTP_CLIENT或者CL_REST_HTTP_CLIENT来发送 ...
- 算法学习：我终于明白二分查找的时间复杂度为什么是O(logn)了
最近发现了个好东西,就是一个学算法的好东西,是网易公开课的一个视频. 直通车 这是麻省理工学院的公开课,有中英字幕,感谢网易.. 也可以在App把视频缓存下来之后再放到电脑上面看,因为我这样可以倍速, ...