html的css怎么设置深度,CSS深度操作（2）

一、元素的层级

设置层级

如果定位元素的层级是一样，则下边的元素会盖住上边的

通过z-index属性可以用来设置元素的层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示

对于没有开启定位的元素不能使用z-index

.box2{

width: 200px;

height: 200px;

background-color: yellow;

/*开启绝对定位*/

position: absolute;

/*设置偏移量*/

top: 100px;

left: 100px;

z-index: 25;

}

设置元素的透明背景

opacity可以用来设置元素背景的透明，它需要一个0-1之间的值

0 表示完全透明

1 表示完全不透明

0.5 表示半透明

.box2{

width: 200px;

height: 200px;

background-color: yellow;

/*开启绝对定位*/

position: absolute;

/*设置偏移量*/

top: 100px;

left: 100px;

z-index: 25;

opacity: 0.5;

}

二、背景图片

使用background-image来设置背景图片

语法：background-image:url(相对路径);

- 如果背景图片大于元素，默认会显示图片的左上角

- 如果背景图片和元素一样大，则会将背景图片全部显示

- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色

一般情况下设置背景图片时都会同时指定一个背景颜色

.box2{

background-image: url(img/1.png);

}

background-repeat用于设置背景图片的重复方式

可选值：

repeat，默认值，背景图片会双方向重复(平铺)

no-repeat，背景图片不会重复，有多大就显示多大

repeat-x， 背景图片沿水平方向重复

repeat-y，背景图片沿垂直方向重复

.box2{

background-repeat: repeat-y;

}

偏移与定位

背景图片默认是贴着元素的左上角显示

通过background-position可以调整背景图片在元素中的位置

可选值：

该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置

top left 左上

bottom right 右下

如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量

第一个值是水平偏移量 第二个是垂直偏移量

.box2{

background-position: 50px 50px;

}

背景固定

background-attachment用来设置背景图片是否随页面一起滚动

可选值：

scroll，默认值，背景图片随着窗口滚动

fixed，背景图片会固定在某一位置，不随页面滚动

不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

.box2{

bbackground-attachment: fixed;

}

简写背景属性

.box2{

background: #bfa url(img/3.png) center center no-repeat fixed;

}

三、雪碧图

将几张图片一起加载然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术(CSS-Sprite)

优点：

1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。

2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

.box2{

btn:link{

/*将a转换为块元素*/

display: block;

/*设置宽高*/

width: 93px;

height: 29px;

/*设置背景图片*/

background-image: url(img/btn/btn2.png);

/*设置背景图片不重复*/

background-repeat: no-repeat;

}

.btn:hover{

/*当是hover状态时，希望图片可以向左移动*/

background-position: -93px 0px;

}

.btn:active{

/*当是active状态时，希望图片再向左移动*/

background-position: -186px 0px;

}

}

四、表格

-- 在HTML中，使用table标签来创建一个表格

-- 在table标签中使用tr来表示表格中的一行，有几行就有几对tr 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

colspan----横向合并单元格

rowspan----纵向合并单元格

B1	B2	B3	B4
C1	C2	C3
D1	D2	D3

给表格添加样式

.box2{

/*table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离*/

border-spacing: 10px;

/* border-collapse可以用来设置表格的边框合并

如果设置了边框合并，则border-spacing自动失效

*/

border-collapse: collapse;

}

/*设置隔行变色*/

tbody > tr:nth-child(even){

background-color: #bfa;

}

/*鼠标移入到tr以后，改变颜色*/

tr:hover{

background-color: yellow;}

长表格

有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签：

thead 表头----thead中的内容，永远会显示在表格的头部

tbody 表格主体---tbody中的内容，永远都会显示表格的中间

tfoot 表格底部----tfoot中的内容，永远都会显示表格的底部

这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中