后台管理页面1
1. html:标签
2.CSS：
position
background
text-align
margin
padding
font-size
z-index
overflow
hover
opacity
float(clear:both)
line-height
border
color
display
页面布局：
后台管理布局：
position:
fixed
relative
absolute
1. .left{ float:left; 因为float经常用，所以可以给它写一个样式，然后在下面直接应用这个样式就可以了。
2. 父亲定义了高度/宽度以后，里面的div才可以用%的形式来定义高度/宽度，定义的时候是以父亲div为标准的。现在的问题就卡在怎么样设置高度上了。是猜一下页面高度呢，还是设置100%呢（实际上无效）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
}
.pg-content .menu{
width:20%;
background-color:red;
min-width:200px;
}
.pg-content .content{
width:80%;
background-color:green;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">f</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
缩小以后，页面会发生布局混乱：
3. 思路，通过position完成完美布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.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;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
4. position: fixed---
relative: 单独使用无意义
absolute: 单独使用时，第一次会放到一个指定位置。
为了达到效果：当滚轮滚动的时候，menu和content都发生了滚动。可以用如下代码：position:absolute;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.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;
background-color:purple;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
效果：
5. 当内容比较多，出现滚轮的时候，下面没有颜色，太难看。我们可以取消掉style部分的背景色，然后在正文部分给他们套一个div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.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;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="background-color:purple;">
<p style="margin:0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
代码效果：
6. 加上 overflow:auto; 出现了另外一种效果；内容跟着滚动条移动。因为overflow是在content/content处设置的，跟其它地方没有关系。
<!--左侧菜单跟着滚动条移动-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.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;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="background-color:purple;">
<p style="margin:0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
7. 可以给content部分也设置一个min-width; 当小于这个值的时候，就会出现滚动条了。
8. 如果给一个div设置了一个高度，它里面的东西浮动的时候，你看起来是撑起来了，其实没有。
border-radius:50% 头像变成圆圈的了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
line-height:48px;
}
.pg-header .logo{
width:200px;
background-color:cadetblue;
text-align:center;
}
.pg-header .user{
width:160px;
background-color:wheat;
color:white;
height:48px;
}
.pg-header .user .a img{
height:40px;
width:40px;
margin-top:4px;
border-radius:50%;
}
.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;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
老男孩
</div>
<div class="user right">
<a class="a" href="#">
<img src="3.png"/>
</a>
</div>
</div>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="background-color:purple;">
<p style="margin:0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
9.头像处加了hover .pg-header .user:hover{ background-color:blue; }
10. 一点头像，就有了下拉菜单。Z-index 是没有单位的。
11. 补充知识： item:hover ，当鼠标放上去的时候，item下的都变成了红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
background-color:#dddddd;
}
.item:hover{
color:red;
}
</style>
</head>
<body>
<div class="item">
<div class="a">123</div>
<div class="b">456</div>
</div>
</body>
</html>
12. 当鼠标放上去的时候，item下的一个变成红色，一个变成绿色。.item:hover .b
给item下的hover下的b加上这个样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
background-color:#dddddd;
}
.item:hover{
color:red;
}
.item:hover .b{
background-color:green;
}
</style>
</head>
<body>
<div class="item">
<div class="a">123</div>
<div class="b">456</div>
</div>
</body>
</html>
效果：
13. 至此，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
line-height:48px;
}
.pg-header .logo{
width:200px;
background-color:cadetblue;
text-align:center;
}
.pg-header .user{
width:160px;
background-color:wheat;
color:white;
height:48px;
}
.pg-header .user:hover{
background-color:blue;
}
.pg-header .user .a img{
height:40px;
width:40px;
margin-top:4px;
border-radius:50%;
}
.pg-header .user .b{
z-index:20;
position:absolute;
top:38px;right:94px;
background-color:red;
width:160px;
display:none;
}
.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;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
老男孩
</div>
<div class="user right" style="position:relative">
<a class="a" href="#">
<img src="3.png" style="width:30px;height:30px;"/>
</a>
<div class="b">
<a>我的资料</a>
<a>注销</a>
</div>
</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;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
没有点击头像的时候：
点击头像的时候：
14. 为了好看些，自己调写颜色和大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
line-height:48px;
}
.pg-header .logo{
width:200px;
background-color:cadetblue;
text-align:center;
}
.pg-header .user{
margin-right:60px;
padding:0 20px;
width:160px;
color:white;
height:48px;
}
.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;
top:38px;right:94px;
background-color:white;
width:160px;
display:none;
color:black;
}
.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;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
老男孩
</div>
<div class="user right" style="position:relative">
<a class="a" href="#">
<img src="3.png" style="width:30px;height:30px;"/>
</a>
<div class="b">
<a>我的资料</a>
<a>注销</a>
</div>
</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;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
浙公网安备 33010602011771号