1z-index
开启定位以后。z-index：1；数越大层级越高。 层级z轴。
父元素层级比子元素高，但是父元素也不会盖住子元素。
.box1{
width: 200px;
height: 200px;
position: relative;
z-index: 2;
}
opacity设置背景透明度。0（完全透明）-1（完全不透明）取值 ie8以下浏览器不支持。filter()滤镜：olpha（透明度）(opacity=0.5)
2背景
1.图片小于界面大小，默认平铺。
可以同时设置背景颜色图片。color默认背景颜色。
渐变平铺设置。（不设置x方向平铺，下方也会被拉长）
background-repeat
repeat：默认值，图片左右上下平铺
no-repeat：只显示图片一次，不会平铺
repeat-x：沿x轴水平平铺一张图片
repeat-y：沿y轴水平平铺一张图片
2背景偏移与定位
background-position写一个值另一个值默认center
3.背景固定
一般是设置给body
设置给div div滚动没背景就会没。
background-attachment用来设置背景图 片是否随页面滚动。
可选值：
scroll：随页面滚动
fixed：不随页面滚动
加载 内粗发请求，出现闪屏
雪碧图，多个图片在一张图片里，请求一次，kb减少（颜色表减少，放图片的颜色）
4.简写背景属性
background: green url(1.jpg) no-repeat center center fixed;
表格的基本设置
使用table标签创建一个表格。
tr表示表格中的一行。
tr中可以编写一个或多个th或td。
th表示表头。
td表示表格中的一个单元格。
caption表示表格的标题。
thead表示表格的头部。
tbody表示表格的主体。
tfoot表示表格的底部。
合并单元格
横向合并
colspan
纵向合并
rowspan
表格样式
text-align：设置文本的水平对齐。
vertical-align：设置文本的垂直对齐。
可选值：top、baseline、middle、bottom
border-spacing：边框间距
border-collapse：合并边框
collapse：合并边框
separate：不合并边框
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xuebi</title>
<style type="text/css">
.a{
width: 119px;
height: 43px;
}
.a1{
display: block;
width: 119px;
height: 44px;
background-image: url(img/雪碧图.png);
background-repeat: no-repeat;
/*background-position: 39px -35px;*/
}
.a1:hover{
width: 115px;
height: 31px;
background-position: -9px -51px;
}
.a1:active{
width: 83px;
height: 26px;
background-position: -9px -90px;
}
.b{
width: 47px;
height: 34px;
}
.b1{
display: block;
width: 47px;
height: 34px;
background-image: url(img/雪碧图.png);
background-repeat: no-repeat;
background-position: -8px -339px;
}
.b1:hover{
background-position: -59px -339px;
}
.b1:active{
background-position: -118px -337px;
}
</style>
</head>
<body>
<div class="a"><a href="#" class="a1"></a></div>
<div class="b"><a href="#" class="b1"></a></div>
</body>
</html>
11576306-145d399e899bbd6e.png
网友评论