元素的层级：我们可以使用z-index来设置元素的层级，后边跟着代表层级的数值。
同样的z-index属性也只有开启定位才会生效。
然后也可以用opacity来设置透明度，后边的值为0~1之间的数，IE8以下的不支持。
IE8以下的可以用如下属性代替
alpha(opacity=透明度)。透明度，需要一个0-100之间的值
背景图片
就是用background-image来加载图片url(图片路径)
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色一般情况下设置背景图片时都会同时指定一个背景颜色
background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
然后我们就可以实现背景图片的加载和导航条的设置
背景图片的偏移与定位
可以通过background-position来调整背景图片在元素中的位置
可选值：
top right left bottom center中的任意两个值，若只给一个值，则第二个值默认是center。
也可以直接指定数值为偏移量，第一个数代表x轴，第二个数代表y轴。
background-attachment用来设置背景图片是否随页面一起滚动可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
在按钮练习中，第一次切换图片时会有一个闪烁
产生问题的原因是：
每次加载图片都会单独发送请求，不会同时加载，
为了解决问题，就出现了雪碧图（将几个图片整合为一个图片）这种东西，然后通过background-positon来切换要显示图片的位置。
它的优点是：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
在这之前我们要设置一个背景图片要进行若干操作，但是每次都这么写太过冗余，所一我们可以进行代码的简化：
使得所有属性都在background中得以实现。
这样写有几个优点
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序的要求，谁在前睡在后都行
- 也没有数量的要求，不写的样式就使用默认值
表格
简单的表格由几个部分来实现：
在html中用table标签来创建一个表格
在table标签中使用tr来表示表格中的一行
在tr中需要使用td来创建一个单元格
rowspan用来设置纵向的合并单元格
colspan横向的合并单元格
这就是一个简单的表格
然后我们可以给表格添加不同的样式：
table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-collapse可以用来设置表格的边框合并如果设置了边框合并，则border-spacing自动失效
然后可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果：比如字体和字形
有的时候表格是非常的长的，这是就需要把表格分成三个部分：
表头 ：thead
表格主体： tbody
表格底部：tfoot
这三个标签用来区分表格的不同部分，它们都需要写到table中。
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
另外如果表格中没有写tbody，浏览器会自动在表格中添加tbody并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
表格的列数由td最多的那行决定表格是可以嵌套，
可以在td中在放置一个表格，但是并不建议这么做，因为后期的更改会一个地方会导致整个表格的崩溃。
雪碧图
网友评论