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=“header”>顶</div>
<div class=“content”>主体</div>
<div class=“footer”>底</div>
后台管理布局:
position:
fixed 永远固定在窗口的某个位置,不受滚轮滚动影响
relative 相对定位,单个使用时无意义
absolute 定位在指定位置,是绝对位置,受滚轮滚动影响
------------编程实例
EG--fixed--要求:左侧菜单需要跟随滚轮滚动变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0 auto;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
}
.pg-content .menu{
position:fixed;
top:48px;
left:0px;
bottom:50px;
width:200px;
background-color:#dddddd;
}
.pg-content .content{
position:fixed;
top:48px;
right:0px;
bottom:0px;
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">左侧管理菜单</div>
<div class="content left">
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
</div>
</div>
</body>
</html>
EG--absolute--要求:左侧菜单需要跟随滚轮滚动变化(应用更多)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0 auto;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
}
.pg-content .menu{
position:absolute;
top:48px;
left:0px;
bottom:50px;
width:200px;
background-color:#dddddd;
}
.pg-content .content{
position:absolute;
top:48px;
right:0px;
bottom:0px;
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">左侧管理菜单</div>
<div class="content left">
<div style="position:fixed;bottom:0px;right:0px;width:50px;height:50px;">返回顶部</div>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
</div>
</div>
</body>
</html>
EG--完整的主页及后台管理编写模板
<!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 auto;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
line-height:48px;
}
.pg-header .logo{
width:200px;
background-color:cadetblue;
text-align:center;
font-size:32px;
}
.pg-header .user{
color:white;
height:48px;
margin-right:160px;
padding:0px 20px;
}
.pg-header .user:hover{
background-color:cadetblue;
}
.pg-header .user .a img{
width:40px;height:40px;margin-top:4px;border-radius:50%;
}
.pg-header .user .b{
z-index:10;
width:160px;
position:absolute;
top:47px;
right:-70px;
display:none;
}
.pg-header .user:hover .b{
display:block;
background-color:white;
}
.pg-header .user .b a{
display:block;
color:black;
}
.pg-header .icons{
padding:0px 8px;
}
.pg-header .icons:hover{
background-color:#204982;
}
.pg-header .c a{
color:red;
padding:1px 2px;
background-color:red;
border-radius:50%;
color:white;
font-size:8px;
position:relative;
top:10px;
right:4px;
}
.pg-content .menu{
position:absolute;
top:48px;
left:0px;
bottom:50px;
width:200px;
background-color:#dddddd;
}
.pg-content .content{
position:absolute;
top:48px;
right:0px;
bottom:0px;
left:200px;
background-color:purple;
overflow:auto;
z-index:9;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">TIM</div>
<div class="user right" style="position:relative;">
<a class="a" href="www.baidu.com">
<img src="11.jpg">
</a>
<div class="b">
<a href="">我的资料</a>
<a href="">注销</a>
</div>
</div>
<div class="c icons right">
<i class="fa fa-bell" aria-hidden="true"></i>
<a>1</a>
</div>
<div class="c icons right">
<i class="fa fa-envelope" aria-hidden="true"></i>
<a >2</a>
</div>
</div>
<div class="pg-content">
<div class="menu left">左侧管理菜单</div>
<div class="content left">
<div style="position:fixed;bottom:0px;right:0px;width:50px;height:50px;">返回顶部</div>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
<p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
</div>
</div>
</body>
</html>
效果:
知识点:
先定外height,再定内width,内部标签超出外height,再通过设定内height拉回标签!!!
内外属性作用于标签,标签本身也可以设置属性,这则涉及优先级原则!