- 动态图片按钮
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次 不佳的用户体验
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
我们这个练习，一上来浏览器只会加载link.png
由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
当hover被触发时，浏览器才去加载hover.png
当active被触发时，浏览器才去加载active.png
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验 - 亚马逊_雪碧图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>亚马逊雪碧图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.btn{
display: block;
width: 125px;
height: 40px;
background-image: url(img/1.png);
background-repeat: repeat;
background-attachment: fixed;
}
.btn1{
display: block;
width: 42px;
height: 28px;
background-position: -10px -340px;
background-image: url(img/1.png);
}
.btn1:hover{
background-position: -10px -340px;
}
.btn1:active{
background-position: -57px -340px;
}
</style>
</head>
<body>
<a href="#" class="btn"></a>
<a href="#" class="btn1"></a>
</body>
</html> - 简写背景属性
设置一个背景颜色
background-color: #bfa;
设置一个背景图片
background-image: url(img/3.png);
设置背景不重复
background-repeat: no-repeat;
设置背景图片的位置
ackground-position: center center;
设置背景图片不随滚动条滚动
background-attachment: fixed;
background- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序的要求，谁在前睡在后都行
- 也没有数量的要求，不写的样式就使用默认值
- 表格
在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;
} - 表格样式
<！DOCTYPE html >
< html xmlns = “ http://www.w3.org/1999/xhtml” >
< meta charset = “ utf-8” />
< title > 指定对象内表设置样式</ title >
< 样式>
.divcss5 {width：400px}
.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 > - 长表格
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr - 表格布局
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格 - 完善
经过修改后的clearfix是一个多功能的样式，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
前端第八天
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 元素得层级 如果定位元素的层级是一样，则下边的元素会盖住上边的 通过z-index属性可以用来设置元素的层级 可以...
- 元素的层级： 如果定位元素的层级是一样，则下边的元素会盖住上边的 通过z-index属性可以用来设置元素的层级 可...
