Web之后台管理页面布局
1、页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
background-color: #1E84E7;
}
</style>
</head>
<body>
<div class="pg-header" >
<div style="width: 980px;
margin: 0 auto; /*内容自动居中*/
background-color: #5effb8">南村群童欺我老无力</div>
</div>
<div class="pg-content"></div>
<div class="pg-footer"></div>
</body>
</html>
2、后台管理布局
position：
fiexd -- 让标签固定在窗口的某个位置
relative -- 单独无意义
absolute -- 第一次定位可以在指定位置，拖动滑轮就不行了
2.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: #1E84E7;
color: white;
}
.pg-content .menu{
position: fixed;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #5effb8;
}
.pg-content .content{
position: fixed;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
background-color: #ff755f;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header">公安报茅入竹去</div>
<div class="pg-content">
<div class="menu left">唇焦口燥呼不得</div>
<div class="content left">娇儿恶卧踏里裂
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
</div>
</div>
<div class="pg-flooter"></div>
</body>
</html>
②不带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: #1E84E7;
color: white;
}
.pg-content .menu{
position: absolute;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #4F69B7;
}
.pg-content .content{
position: absolute;
top: 48px;
left: 200px;
right: 0;
bottom: 0;
background-color: #ff755f;
}
</style>
</head>
<body>
<div class="pg-header">公安报茅入竹去</div>
<div class="pg-content">
<div class="menu left">唇焦口燥呼不得</div>
<div class="content left">
娇儿恶卧踏里裂
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
</div>
</div>
<div class="pg-flooter"></div>
</body>
</html>
2.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: #1E84E7;
color: white;
}
.pg-content .menu{
position: absolute;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #4F69B7;
}
.pg-content .content{
position: absolute;
top: 48px;
left: 200px;
right: 0;
bottom: 0;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header">公安报茅入竹去</div>
<div class="pg-content">
<div class="menu left">唇焦口燥呼不得</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>-->
娇儿恶卧踏里裂
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
</div>
</div>
<div class="pg-flooter"></div>
</body>
</html>
2.3 例子3、顶部的登录图标、注销、个人资料等
<!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: #1E84E7;
color: white;
line-height: 48px;
}
.pg-header .logo{
width: 200px;
background-color: #283047;
text-align: center;
}
.pg-header .user{
width: 160px;
height: 48px;
background-color: aquamarine;
}
.pg-header .user .a img{
height: 40px;
width: 40px;
margin-top: 4px;
border-radius: 50%;
}
.pg-header .user .b{
z-index: 10;
position: absolute;
top: 48px;
right: 80px;
background-color: cadetblue;
width: 80px;
display: none;
}
.pg-header .user .b a{
display: block;
}
.pg-header .user:hover{
background-color: #ff755f;
}
.pg-content .menu{
position: absolute;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #4F69B7;
}
.pg-content .content{
position: absolute;
top: 48px;
left: 200px;
right: 0;
bottom: 0;
min-width: 980px;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
old boy
</div>
<div class="user right" style="position: relative">
<a class="a" href="https://www.zhihu.com"> <!--跳转的网址-->
<img src="33.jpg">
</a>
<div class="b">
<a>个人资料</a>
<a>注销</a>
<a>更改密码</a>
</div>
</div>
</div>
<div class="pg-content">
<div class="menu left">唇焦口燥呼不得</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>-->
娇儿恶卧踏里裂
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
</div>
</div>
<div class="pg-flooter"></div>
</body>
</html>
2.4 例子4、用户头像旁边的消息提示等
<!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: #1E84E7;
color: white;
line-height: 48px;
}
.pg-header .logo{
width: 200px;
background-color: #283047;
text-align: center;
}
.pg-header .user{
width: 160px;
height: 48px;
/*background-color: aquamarine;*/
background-color: #1E84E7;
}
.pg-header .icons{
padding: 0 10px 0 0;
}
.pg-header .icons:hover{
background-color: #5effb8;
}
.pg-header .user .a img{
height: 40px;
width: 40px;
margin-top: 4px;
border-radius: 50%;
}
.pg-header .user .b{
z-index: 10;
position: absolute;
top: 48px;
right: 80px;
background-color: cadetblue;
width: 80px;
display: none;
}
.pg-header .user:hover .b{
display: block;
}
.pg-header .user .b a{
display: block;
}
.pg-header .user:hover{
background-color: #ff755f;
}
.pg-content .menu{
position: absolute;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #4F69B7;
}
.pg-content .content{
position: absolute;
top: 48px;
left: 200px;
right: 0;
bottom: 0;
min-width: 980px;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
old boy
</div>
<div class="user right" style="position: relative">
<a class="a" href="https://www.zhihu.com"> <!--跳转的网址-->
<img src="33.jpg">
</a>
<div class="b">
<a>个人资料</a>
<a>注销</a>
<a>更改密码</a>
</div>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i>
</div>
<div class="icons right">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span>5 </span>
</div>
</div>
<div class="pg-content">
<div class="menu left">唇焦口燥呼不得</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>-->
娇儿恶卧踏里裂
<p>
<i class="fa fa-heart-o" aria-hidden="true" style="font-size: 100px"></i>
</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
<p>dada</p><p>dada</p><p>dada</p><p>dada</p><p>dada</p>
</div>
</div>
<div class="pg-flooter"></div>
</body>
</html>
浙公网安备 33010602011771号