注意：
span b u a img 行内元素
div p h1-h6 块级元素
1. 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。
3. a里面可以放块级元素
常用样式
行高：line-height: 50px;
CSS三大特性：层叠性、继承性、优先级性
层叠性：同样的样式修饰会存在覆盖，只层叠冲突的样式，不冲突的正常显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: red;
font-size: 25px;
}
div {
color: pink;
}
</style>
</head>
<body>
<div>hello world!</div> 粉色
</body>
</html>继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.jianlin {
color: pink;
font-size: 50px;
height: 100px;
}
</style>
</head>
<body>
<div class="jianlin">
<p>王思聪</p> 粉色
</div>
</body>
</html>优先级性
这里边有一个权重的概念，权重越高优先级越高
* 0 0 0 0
div 0 0 0 1
.clas 0 0 1 0
#id 0 1 0 0
style='' 1 0 0 0
important 正无穷。。。
注：如果想要改变这种优先级体系，可以使用 !important来实现，语法：color: hotpink!important;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#ya { 权重 0,1,0,0
color: blue;
}
.yase { 类选择器权重 高于 标签选择器 权重 0, 0, 1, 0
color: green;
}
div {
权重 0, 0, 0, 1
color: red;
}
div {
权重 0, 0, 0, 1
color: hotpink!important;
}
* { 0 0 0 0
}
</style>
</head>
<body>
<div class="yase" id="ya" style="color: orange">高渐离</div>
</body>
</html>权重的计算
*同一标签样式权重会相加
*如果权重相同会采用就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.p{ 0010
color: red;
}
div{ 0000 因为这里的div是p标签的父标签所以传递的是0000
color:green;
}
p{ 0001=0000+0001 父标签传递的是0000,自身是0001权重还是低
color: green;
}
div p{ 0010=0001+0001 层叠样式相加，和第一个样式权重一样，就近选择。
color:black;
}
</style>
</head>
<body>
<div>
<p class="p">hello world</p> 黑色
</div>
</body>
</html>背景
背景色：background-color: pink;
背景图片：background-image: url(images/3.jpg);
背景平铺：
background-repeat:[no-repeat] 不平铺
纵向横向平铺： repeat
背景图片不平铺：no-repeat
横向平铺：repeat-x
纵向平铺：repeat-y
背景位置：background-position: 10px center;
[任意像素px | top | bottom | left | right ] 任取其二，第一个代表左右，第二个代表上下位置上的
背景滚动(鼠标滚轮滚动的时候，背景图是否跟随滚轮滚动)：background-attachment: [fixed | scroll];
组合技：background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: #000 url(images/sm.jpg) no-repeat scroll center top ;
背景半透明：background: rgba(0, 0, 0, .3);
前三个参数为三原色值 【red green blue 最后一个参数是alpha 透明度 取值范围 0~1之间】
盒子模型
边框
border-width: 1px;
border-color: red;
border-style: [ solid 实线 | dashed 虚线 | dotted 点线 ];
border:1px solid red;
border-top: 1px solid red; /*上边框*/
border-bottom: 2px solid green;
border-left: 1px solid blue;
border-right: 5px solid pink;
案例：表格细线边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; 合并相邻为单一边框
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>天王盖地虎</td>
<td>天王盖地虎</td>
<td>天王盖地虎</td>
</tr>
<tr>
<td>宝塔镇河妖</td>
<td>宝塔镇河妖</td>
<td>宝塔镇河妖</td>
</tr>
</table>
</body>
</html>内边距（理解为文本内容距离边框的填充）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
padding: 10px; 有一个上下左右10像素的边框
}
a {
height: 35px;
background-color: #ccc;
display: inline-block;
line-height: 35px;
color: #fff;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<div>文本信息</div>
<a href="#">首页</a>
<a href="#">移动客户端</a>
</body>
</html>案例：新浪导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
height: 50px;
border-top: 3px solid #FF8500;
border-bottom: 1px solid #EDEEF0;
background-color: #FCFCFC;
}
.nav a { 鼠标正常时候的样子
height: 50px;
line-height: 50px;
display: inline-block; 转换为块
color: #4c4c4c;
text-decoration: none;
padding: 0 18px; 左右填充18
font-size: 14px;
}
.nav a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">首页</a>
<a href="#">新闻客户端</a>
<a href="#">设为首页</a>
<a href="#">奔跑吧</a>
</div>
</body>
</html>*padding: 20px; 上下左右都是 20px
*padding: 10px 20px; 上下 10 左右 20
*padding: 10px 20px 30px; 上 10 左右 20 下 是 30
*padding: 10px 20px 30px 40px; 上 10 右20 下 30 左 40 顺序像时钟一样
*padding给的太猛了，使得原先的div被撑开。注意padding的和width的大小之间的关系。如下 ↓
宽400 高180 撑开了。。。
div {
width: 180px;
height: 180px;
padding-left: 200px;
padding-right: 200px;
}案例：新闻列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0; /*清除内外边距*/
}
body {
background-color: #eee;
}
.article {
width: 380px;
height: 263px;
border: 1px solid #ccc;
margin: 100px;
padding: 20px 15px 0; /*上 20 左右 15 下 0*/
}
.article h4 {
color: #202026;
font-size: 20px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
li {
list-style: none; /*取消li 前面的小点*/
}
.article ul li {
height: 38px;
line-height: 38px;
border-bottom: 1px dashed #ccc; /* 1像素的虚线边框*/
text-indent: 2em;
}
.article a {
font-size: 12px;
color: #333;
text-decoration: none;
}
.article a:hover {
text-decoration: underline; /*添加下划线*/
}
.article ul {
margin-top: 12px;
}
</style>
</head>
<body>
<div class="article">
<h4>最新文章/New Articles</h4>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">体验javascript的魅力</a></li>
<li><a href="#">jquery世界来临</a></li>
<li><a href="#">网页设计师的梦想</a></li>
<li><a href="#">jquery中的链式编程是什么</a></li>
</ul>
</div>
</body>
</html>外边距：只有一个元素的时候，指的是浏览器边框。如果说有多个标签，margin是指距离前一个元素的距离，不然页面元素重叠，理解上的偏差。。。
margin:0 auto; 水平居中
margin:100px auto; 水平居中，距上100
margin-left:auto; 自动填满
margin:auto; 上下左右都是auto和水平居中效果相同
外边距的合并（两个人在一条起跑线，第一个人走了100步，说我们距离100.第二个人反方向走了50，此时的距离当然是150）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
background-color: purple;
}
.xiongda {
margin-bottom: 100px;
}
.xionger {
background-color: pink;
margin-top: 150px; 最终两个盒子的距离是 最大的那个为准 150
}
</style>
</head>
<body>
<div class="xiongda">1</div>
<div class="xionger">2</div>
</body>
</html>外边距塌陷：父元素和子元素，想让子元素在垂直方向上移动，父元素不动，可以通过margin-top，但是结果发现，父元素也跟着移动了。这种现象叫做外边距塌陷。
*通过在父标签中设置overflow:hidden，可以解决该问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
overflow: hidden; 可实现子元素垂直方向上的移动的关键
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>盒子的默认宽度
*给定了盒子的宽，在加填充自然会撑大了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
height: 200px;
background-color: pink;
width: 300px;
padding-left: 30px; 因为父盒子有宽度给定值了，则padding会撑开200+30
}
.son {
padding-left: 30px;
儿子没有给定宽度用的是默认的， 所以 padding 不会撑开盒子
如果内容太多的话，显示会溢出父元素的框框
}
</style>
</head>
<body>
<div class="father">
<div class="son">123</div>
</div>
</body>
</html>圆角边框：border-radius 其值为每个角的半径值，可以设置一个值，两个值，%值都可以。用法上和填充有点类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 312px;
height: 312px;
margin: 100px auto;
border-radius: 50%; 让一个正方形 变成圆圈
border: 1px solid red;
border-radius: 150px 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>案例：修改超链接样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
.radius a {
width: 172px;
height: 172px;
background-color: #fff;
display: inline-block;
margin: 30px;
border-radius: 50%;
text-align: center;
line-height: 172px;
color: red;
text-decoration: none;
font-weight: 700;
}
.radius a:hover {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div class="radius">
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
</div>
</body>
</html>盒子阴影
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
第一个参数为水平阴影，正值向右走，负值向左走
第二个参数为垂直阴影，正值向下走，负值向上走
第三个参数为模糊程度，0的话实边的。
第四个参数为阴影尺寸，表示的是阴影的范围。
第五个参数就是色调了，也可以是具体的色调：red...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
margin:100px auto;
}
div:hover { 鼠标经过div时候的样子。。。
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
transition:all 1s; 渐渐显示效果，1s为显示的时间界值
}
</style>
</head>
<body>
<div></div>
</body>
</html>float属性:通过举例来说明吧
对其特性：如果使用了float属性，其他的div在位置上会忽视第一个div的存在，会存在在位置上的覆盖。
两个元素div，都没有使用float，块级标签，两行显示
两个元素div，第一个使用float属性，第二个没有。第二个div会当第一个不存在，占用该位置。第一个元素在zIndex上级别更高
两个元素div，都使用float，块级标签，显示在一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.up {
width: 300px;
height: 200px;
background-color: pink;
float: left; 第一个放弃了治疗，位置被第二个占了。显示上占优
}
.down {
width: 320px;
height: 220px;
background-color: purple;
}
</style>
</head>
<body>
<div class="up"></div>
<div class="down"></div>
</body>
</html>浮动特性（父盒子）：父子元素之间的float关系
*父子元素在显示上是有层级关系的。如下个案例，子元素显示在父元素的右上角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 600px;
height: 600px;
background-color: pink;
padding: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>浮动：隐藏模式的转换
*div如果使用了float属性，可以是块级标签转为行内标签，这也是为什么可以使块级元素可以在一行显示。
*span标签如果使用了，float属性可以使隐式行内元素转变为块级元素，从而设置宽高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
background-color: green;
float: left;
}
span{
background-color: blue;
float: left;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>hello world!</div>
<span>ok you are snake!</span>
</body>
</html>案例：一列固定宽度且居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:900px;
background-color: #eee;
border: 1px dashed #ccc;
margin: 0 auto;
}
.top{
height: 80px;
}
.banner{
height: 120px;
margin: 5px auto;
}
.main{
height: 500px;
}
.footer{
height: 100px;
margin: 5px auto 0;
}
</style>
</head>
<body>
<div class="top box">top</div>
<div class="banner box">banner</div>
<div class="main box"></div>
<div class="footer box"></div>
</body>
</html>案例：通栏结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.top{
height: 80px;
background-color: pink;
}
.top-inner{
width: 900px;
height: 80px;
margin: 0 auto;
}
.banner{
width: 900px;
height: 150px;
margin: 0 auto;
}
.banner li{
float: left;
width: 217px;
height: 150px;
margin-right: 10px;
}
.one{
background-color: black;
}
.two{
background-color: blue;
}
.three{
background-color:green;
}
.banner .four{
background-color: red;
margin-right: 0;
float: right;
}
.main{
width: 900px;
height: 500px;
background-color: skyblue;
margin: 0 auto;
}
.left{
width:288px;
height: 500px;
background-color: blue;
float: left;
border: 1px solid deeppink;
}
.right{
width: 600px;
height: 500px;
background-color:green;
float:right;
}
.footer{
width: 900px;
height: 120px;
background-color:black;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top">
<div class="top-inner">123</div>
</div>
<div class="banner">
<ul>
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
</ul>
</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>案例：左右型结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top{
width: 900px;
height: 80px;
background-color: blue;
margin: 0 auto;
}
.banner{
width: 900px;
height: 150px;
background-color: purple;
margin: 0 auto;
}
.main{
width:900px;
height: 500px;
background-color: skyblue;
margin: 0 auto;
}
.left{
width: 288px;
height: 500px;
background-color: orange;
float: left;
border: 1px solid black;
}
.right{
width: 600px;
height: 500px;
background-color: darkslategrey;
float: right;
}
.footer{
width: 900px;
height: 120px;
background-color: black;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer"></div>
</body>
</html>清除浮动：元素使用了浮动相当于放弃了自己的地盘，所以会和下一个没有使用浮动的的元素地盘契合在一起。
*clear：both | left | right 这都能忘了。。
*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准，相对的如果没有清除浮动父元素的宽高，将会变得很奇怪。
清除浮动的第一种用法：在最后元素后添加一个div用来清除浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 200px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<div class="clear"></div> 最后一个浮动标签的后，新添加一个标签 清除浮动
</div>
<div class="footer"></div>
</body>
</html>清除浮动的第二种用法，使用overflow：
*父元素添加此属性才可以起到作用。
*不是所有的浮动都需要清除，影响布局的浮动进行清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;
width: 300px;
overflow: hidden;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 180px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>清除浮动的第三种方式：通过伪元素after来清除浮动。
*除了after以外还有一个，before元素，用法和after相同，可以有选择的进行浮动的清除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:after { 正常浏览器 清除浮动
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; zoom 1 就是ie6 清除浮动方式 ie7一下的版本所识别
}
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>相对定位：当初自己最头疼的一个。。。
*理解上有点像我们的坐标系一样，指定了position的为relative之后，通过top和left属性来指定坐标。占有地盘的，和没有清除浮动时是一样的。
*其后的元素，因为还是使用的默认的绝对定位，所以位置不会发生变化，如果发生重叠，相对定位的显示优先级比默认的显示级别要高。
.top {
position: relative;
top: 100px;
left: 100px;
}绝对定位：使用方式上和相对定位是一样的，但是，不占用位置，和清除了浮动的效果是一样的。
.top {
position: absolute;
right: 0;
bottom: 0;
}父子元素的定位方式
*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。
*若父元素有定位，以父元素为准对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 310px;
height: 190px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.top{
position: absolute;
top: 0;
left: 0;
}
.bottom{
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>
<img src="images/top_tu.gif" class="top">
<img src="images/br.gif" class="bottom">
<img src="images/adv.jpg" height="190" width="310">
</div>
</body>
</html>绝对定位是完整意义上的托标
*自己的理解：有两个元素，其中都包含一些内容，第一个元素使用了float属性，那么第二个元素的显示就会被第一个元素压住，
但是文字内容比较特殊，文字除非使用绝对定位，否则还是在第一个元素下边正常显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
border: 1px solid black;
float: left; 加浮动了之后，由于文字的特殊性，所以文字托标了
position: absolute; 解决托标的方法
left: 0;
top: 0;
}
.bottom {
border: 1px solid red;
background-color: purple;
}
</style>
</head>
<body>
<div class="top">123123</div>
<div class="bottom">adsfadfasdfasdfasdf</div>
</body>
</html>案例：实现盒子的居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: green;
margin: 100px auto; 通过这种方式可以实现居中的效果
float: left; 有了浮动上边那个就失效了
position: absolute;
left: 50%;
margin-left: -100px; 使用的是绝对定位，通过外边距来使div实现居中效果
top: 50%;
margin-top: -100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>案例：顺丰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.sf{
width: 1259px;
height: 472px;
margin: 100px auto;
position: relative;
}
.nav{
width: 960px;
height: 80px;
background-color: #000;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -480px;
}
.nav li{
float: left;
width: 160px;
height: 80px;
}
.nav li a{
width: 160px;
height: 80px;
display: block;
text-align: center;
line-height: 80px;
color: #fff;
text-decoration: none;
}
.nav li a:hover{
background: #fff;
color:#000;
}
</style>
</head>
<body>
<div class="sf">
<a href="#">
<img src="images/sf.png" height="472" width="1259">
</a>
<div class="nav">
<ul>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
</ul>
</div>
</div>
</body>
</html>案例：轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.tb{
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
position: relative;
}
.tb a{
width: 24px;
height: 36px;
display: block;
position: absolute;
top: 50%;
margin-top: -18px;
border: 1px solid black;
}
.left{
left: 0;
background:url("images/left.png") no-repeat;
}
.right{
right: 0;
background:url("images/right.png") no-repeat;
}
.tb ul{
width: 70px;
height: 13px;
background: rgba(255,255,255,.3);
position: absolute;
bottom: 18px;
left: 50%;
margin-left: -35px;
border-radius: 8px;
}
.tb ul li{
width: 8px;
height: 8px;
background-color: #fff;
float: left;
margin: 3px;
border-radius: 50%;
}
.tb .current{
background-color: #f40;
}
</style>
</head>
<body>
<div class="tb">
<img src="images/tb.jpg">
<a href="#" class="left"></a>
<a href="#" class="right"></a>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>固定定位：页面滚动，某个标签不滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: purple;
margin: 100px;
position: relative;
}
.ad{
width: 200px;
height: 200px;
background-color: pink;
position: fixed;
left: 0;
top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="ad"></div>
</div>
<p>hello world!</p>
...若干个...
</body>
</html>