元素层级 背景 表格
2018-07-11 本文已影响0人
会说话的乌鸦
元素的层级 z-index
- 父元素层级在高，也不会盖住它的子元素
- 对于没有开启定位的元素不能使用z-index
- 如果定位元素的层级是一样，则下边的元素会盖住上边的
- 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
设置背景元素透明 opacity: 透明度
opacity可以用来设置元素背景的透明，它需要一个0-1之间的值
- 0 表示完全透明
- 1 表示完全不透明
- 0.5 表示半透明
！在IE8及以下的浏览器中不支持 用下面这个
alpha(opacity=透明度)
透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明
背景设置
background-image :url(图片路径) ：为元素指定背景图片
background-repeat：控制背景图片重复的方式
可选值
- repeat ：默认值 图片会左右上下平铺
- no-repeat：在左上角显示一次图片
- repeat-x：沿x轴水平平铺一张图片
- repeat-y：沿y轴水平平铺一张图片
background-position ：用来控制背景图片在元素中的位置
可以使用，关键字，百分比和数值
background-attachment：用来设置背景图片是否随页面滚动
可选值 - scroll：随页面滚动
- fixed：不随
背景的简写：例如
background：green url(图片路径) no-repeat center center fixed;
雪碧图的运用：使用背景的定位实现图片的点击效果
表格的运用
image.png
image.png
默认没有边框
基本属性有 border，width
rowspan : 合并列
colspan：合并行
还可以通过表格进行布局
=========作业=========
11.png
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标</title>
<style type="text/css">
.er{
width:130px;
height: 50px;
background: green url(../images/QQ图片20180711193327.png) no-repeat;
}
.er:hover{
background-position: 0px -41px;
}
.ion{
width: 25px;
height: 25px;
background: green url(../images/QQ图片20180711193327.png) no-repeat;
background-position: -8px -288px;
}
.ion:visited{
background-position: -38px -288px;
}
.ion:hover{
background-position: -98px -288px;
}
.ion:active{
background-position: -68px -288px;
}
</style>
</head>
<body>
<div class="er"></div>
<div class="ion"></div>
<div class="ser"></div>
</body>
</html>
