08 前端学习

背景定位和背景固定

background-position:top-left

top-center
top-right
center-left
center-center(如果第二个值没有写,则默认是center)
center-right
bottom-left
bottom-center
bottom-right
正代表右,负代表左

background-attachment:fixed(页面其他部分滚动,背景图像不会移动)

background-attachment:scroll(默认值,背景图像会随着页面其余部分的滚动而移动)

简写背景属性

设置一个背景颜色background-color: #bfa;
设置一个背景图片background-image: url(img/3.png);
设置背景不重复background-repeat: no-repeat;
设置背景图片的位置background-position: center center;
设置背景图片不随滚动条滚动
background-attachment: fixed;

background
通过该属性可以同时设置所有背景相关的样式
没有顺序的要求，谁在前睡在后都行
也没有数量的要求，不写的样式就使用默认值

表格

表示表格中的一行:tr
一个单元格:td
th表示表头

td rowspan用来设置纵向的单元格
td clospsn用来设置合并单元格

表格样式

通过border-spacing属性可以设置间距
border-collapse可以用来设置表格的边框合并
设置隔行变色:
tbody > tr:nth-child(even){
background-color: #bfa;
}

长表格

有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：thead 表头
tbody 表格主体
tfoot 表格底部
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素通过table > tr 无法选中行 需要通过tbody > tr