（1）固定定位:
当元素的position属性设置fixed时，则开启了元素的固定定位
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
IE6不支持固定定位
固定定位
(2)元素的层级:
opacity属性在IE8及以下的浏览器中不支持
IE8及以下的浏览器需要使用如下属性代替
alpha(opacity=透明度)
透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明
这种方式支持IE6，但是这种效果在IE Tester中无法测试
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
对于没有开启定位的元素不能使用z-index
设置元素的透明背景
opacity可以用来设置元素背景的透明，它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
元素的层级
(3)背景：
使用background-image来设置背景图片
语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
background-image: url(img/1.png);
background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
背景
(4)电驴导航条:
电驴导航条
(5)背景偏移与定位:
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
也可以直接指定两个偏移量
第一个值是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
背景偏移与定位
(6)背景固定:
当背景图片的background-attachment设置为fixed时，
背景图片的定位永远相对于浏览器的窗口
!DOCTYPE html>
背景固定
我是大哥
我是大哥
我是大哥
我是大哥
(7)按钮练习:
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
我们这个练习，一上来浏览器只会加载link.png
由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
当hover被触发时，浏览器才去加载hover.png
当active被触发时，浏览器才去加载active.png
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
按钮练习
（8）雪碧图:
雪碧图
(10)简写背景属性:
注意：background
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序的要求，谁在前睡在后都行
- 也没有数量的要求，不写的样式就使用默认值
简写背景属性
（11）表格:
在HTML中，使用table标签来创建一个表格
在table标签中使用tr来表示表格中的一行，有几行就有几对tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
表格
A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
D1
D2
D3
(12)给表格添加样式:
设置表格的宽度
border:1px solid black;
table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-spacing: 10px;
border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
可以使用th标签来表示表头中的内容，
它的用法和td一样，不同的是它会有一些默认
表格
学号
姓名
性别
住址
1
孙悟空
男
花果山
2
猪
男
高老庄
3
和尚
男
流沙河
4
唐僧
男
女儿国
1
孙悟空
男
花果山
2
猪
男
高老庄
3
和尚
男
流沙河
4
唐僧
男
女儿国
1
孙悟空
男
花果山
2
猪
男
高老庄
3
和尚
男
流沙河
4
唐僧
男
女儿国
1
孙悟空
男
花果山
2
猪
男
高老庄
3
和尚
男
流沙河
4
唐僧
男
女儿国
1
孙悟空
男
花果山
2
猪
男
高老庄
3
和尚
男
流沙河
4
唐僧
男
女儿国
1
孙悟空
男
花果山
2
猪
男
高老庄
3
和尚
男
流沙河
4
唐僧
男
女儿国
(13)长表格:
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
长表格
日期
收入
支出
合计
合计
100
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
2017.03.01
500
300
2000
(14)表格的布局:
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格
表格的布局
（1）
首页
公司简介
解决方案
公司新闻
行业动态
招贤纳才
联系我们
a.gif
(2)
玫瑰花
c.gif
q.gif
(3)
翻页
d.gif