作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
.Xia:link{
display: block;
width:43px;
height:31px;
background-image: url(img/48.png);
background-repeat: no-repeat;
background-position:-10px -337px;
}
.Xia:hover{
background-position:-58px -340px;
}
</style>
</head>
<body>
< a href=" " class="Xia"></a>
</body>
</html>
65. 动态图片按钮
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次 不佳的用户体验
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
我们这个练习，一上来浏览器只会加载link.png
由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
当hover被触发时，浏览器才去加载hover.png
当active被触发时，浏览器才去加载active.png
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
66. 简写背景属性
设置一个背景颜色
background-color: #bfa;
设置一个背景图片
background-image: url(img/4.png);
设置背景不重复
background-repeat: no-repeat;
设置背景图片的位置
ackground-position: center center;
设置背景图片不随滚动条滚动
background-attachment: fixed;
background
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序的要求，谁在前睡在后都行
- 也没有数量的要求，不写的样式就使用默认值
67. 表格
在HTML中，使用table标签来创建一个表格
在table标签中使用tr来表示表格中的一行，有几行就有几对tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
rowspan用来设置纵向的合并单元格
<td rowspan="2">B4</td>
colspan横向的合并单元格
<td colspan="2">D3</td>
table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-spacing: 10px;
border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
border-collapse: collapse;
设置隔行变色
tbody > tr:nth-child(even){
background-color: #bfa;
}
68. 表格样式
<！DOCTYPE html >
< html xmlns = “ http://www.img/hell/xhtml” >
< meta charset = “ utf-8” />
< title > 指定对象内表设置样式</ title >
< 样式>
.divcss5 {width：200px}
.divcss5表{背景：#CCC; 颜色：＃F00}
.divcss5表td {背景：#FFF}
</ style >
</ head >
< 身体>
< div class = “ divcss5” >
< 表格宽度= “ 100％” 边框= “ 0”单元间距= “ 1”单元格填充= “ 0” >
< tr >
< td > 内容一</ td >
< td > 内容一</ td >
< td > 内容一</ td >
</ tr >
< tr >
< td > 内容二</ td >
< td > 内容</ td >
< td > 内容</ td >
</ tr >
</ 表格>
</ div >
</ body >
</ html >
69. 长表格
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
70. 表格布局
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格
71. 完善
经过修改后的clearfix是一个多功能的样式，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
