2020.02.19

2020.02.19学习

按钮和表格

按钮

按钮:
做完功能后，发现第一次切换图片时，会有一次非常快的闪烁
会造成一次不佳的用户体验
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
但是我们外部资源并不是同时加载，浏览器会在资源被使用是才加载资源
我们这个练习，一上来浏览器只会加载link.png，并不会加载hover，active的图片，
所以hover和active并不是立即加载
当hover被触发时，浏览器才回去加载hover.png
当active被触发时，浏览器才回去加载active.png
由于加载图片需要一定的时间，所以加载和现实过程会有一段时间，背景图片无法显示，导致出现闪烁
为了解决该问题，可以将三张图片整合成一张图片，就不会出现闪烁的问题
但是需要通过background-position来切换显示图片的位置，这种技术佳作图片整合技术
优点：
1，浏览器只需要发送一次请求，可以同时加载多个图片，提高效率，增加用户体验
2，将多个图片整合成一张图片，减少了图片的总大小

简写背景属性
background
可以通过该属性设置所有背景相关的样式
没有顺序的要求，也没有数量的要求，没写的就采用默认值

表格

表格：
用来表示一些格式化的数据，比如：课程表
在网页中也可以创建出表格
使用table标签来创建表格
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
colspan是横向合并单元格，rowspan用来合并纵向的单元格
table和td的边框之间默认有一个距离，通过border-spacing来设置
可以用border-collapse:collapse来设置边框合并设置之后border-spacing就没用用处了
可以使用th标签来设置表头，但是相比较于td有加粗和居中的效果
可以通过nth-child伪类来设置隔行变色，通过hover伪类来设置鼠标移入之后的效果

长表格：
优势表格是非常长的，这是就需要将表格分成三个部分，表头，表格的主题，表格底部
在html中为我们提供了三个标签：
thead 表头
tbody 主体
tfoot 底部
thead中的内容永远都会写在最前面，以此类推tfoot，tbody
如果在表格中没有写tbody，浏览器会自动添加tbody
并且将所有的tr放在tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table>tr无法选中行 需要通过tbody>tr