页面布局
S2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.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;
min-width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: fixed;
top:48px;
right:0;
bottom:0;
left:200px;
background-color: purple;
overflow: auto;
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">aa</div>
<div class="content left">
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p></div>
</div>
<div class="pg-footer"></div>
</body>
</html>
S3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.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;
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">aa</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;">ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p></div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
position:
fixed --永远固定在窗口的某个位置
relative -- 单独无意义
absolute --第一次定位可以在指定位置,滚轮滚动时不在了
<p style="margin: 0"> p标签默认有边距
S4.html
<!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>
.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: cadetblue;
text-align: center;/*左右居中*/
}
.pg-header .user{
/*width:160px;*/
/**/
margin-right: 60px;
padding:0 30px;
color: white;
height:48px;
}
.pg-header .user:hover{
background-color: #396bb3;
}
.pg-header .user:hover .b{
display: block;
}
.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: 48px;
right: 44px;
background-color:white;
color: black;
width: 160px;
text-align: center;
margin: 0 -76px;
display: none;
}
.pg-header .user .b a{
display: block;
}
.pg-header .icons{
padding: 0 20px;
}
.pg-header .icons:hover{
background-color: #396bb3;
}
/*左侧菜单以及上面不动 右侧content内容会建滚动条 这种用的最多*/
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom: 0;
width:200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
min-width: 980px;
top:48px;
right:0;
bottom:0;
left:200px;
overflow: auto;
z-index: 9;
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header">
<div class="logo left">
腾讯网
</div>
<div class="user right" style="position: relative;">
<a class="a" href="#"> <!--点图标进行跳转-->
<img src="22.jpg">
</a>
<div class="b" >
<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-envelope-o" aria-hidden="true"></i>
<span style="display: inline-block;line-height: 1px;padding: 10px 7px;background-color: red;border-radius: 50%;font-size: 12px;">6</span>
</div>
</div>
<div class="pg-content">
<div class="menu left">aa</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;">ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p><p>ass</p>
<p>ass</p><p>ass</p><p>ass</p></div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
position:
fixed --永远固定在窗口的某个位置
relative -- 单独无意义
absolute --第一次定位可以在指定位置,滚轮滚动时不在了
<p style="margin: 0"> p标签默认有边距
min-width: 980px; 当浏览器显示的最小宽度小于980px时,下边会出现滚动条
overflow: auto; 切换两种布局s3.html s4.html
border-radius: 50% 变成圆形
.pg-header .user:hover .b{
display: block;
}当鼠标放到user下时,自动设置user下的b标签显示出来
padding:0 20px; 上下0 左移20px
line-height: 1px 图标占自己的高度
S4-1.html
<!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>
.item{
background-color: #dddddd;
}
.item:hover{
color: red;
}
.item:hover .b{
background-color: green;
}
</style>
</head>
<body>
<div class="item">
<div class="a">
<i class="fa fa-address-card-o" aria-hidden="true"></i>
</div>
<div class="b">456</div>
</div>
</body>
</html>
.item:hover .b{} 当鼠标上面这个hover时为b加上这个样式