美文网首页
元素的层级,背景透明,背景固定,表格,长表格

元素的层级,背景透明,背景固定,表格,长表格

作者: 寻_4533 | 来源:发表于2019-05-31 16:46 被阅读0次

元素的层级(只有开启定位)

语法:z-index

数值越高,层级越高,在网页的最上层,

没有开启定位的元素不可以使用z-index,top,bottom,lef等

父元素层级在高,也不会盖住子元素

背景透明

语法:opacity

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

0 表示完全透明

1 表示完全不透明

0.5 表示半透明

在IE8及以下的浏览器需要使用如下属性代替

语法:  filter:alpha(opacity=透明度)

透明度,需要一个0-100之间的值

0 表示完全透明

100 表示完全不透明

50 半透明

这种方式支持IE6,但是这种效果在IE Tester中无法测试

背景:background-image:url(图片.png)如果元素比图片小图片默认显示左上角

如果图片比元素小默认图片平铺充满元素

background-color:设置背景颜色  同时设置背景图片和背景颜色,背景颜色设为底色

background-repeat:设置图片显示 no-repeat,仅显示一次 repeat-x,-y单方向平铺

背景的偏移与定位:background-position:定义坐标调整图片位置 用两个值来设置水平方向一个值垂直方向一个值

值:top left ;botton left  第二个值不写默认center

设置正负值比较灵活

背景固定:

background-attachment:设置图片是否跟随滚动条滚动 fixed;

按钮练习:设置hover background-position:-50px 0px

简写背景属性: background:#fff url(img。png) no-repeat ;背景的所有属性都可以设置 没有的设置的是默认值

表格:<table>

<tr>代表行

      <td ></td>代表列

</tr>

          </table>

cospan=2 横向合并单元格 rowspan=2纵向合并单元格

border-spacing:0;设置单元格距离

border-collapse:collapse;设置边框合并  设置后 border-spacing会失效

<th></th>:表头,特殊的td 用法和td一样 默认效果,居中加粗

长表格:

<table>

      <thead>表头 调换顺序不影响表格  分页打印

      <tbody>表体

      <tfoot>表尾

相关文章

  • 元素的层级,背景透明,背景固定,表格,长表格

    元素的层级(只有开启定位) 语法:z-index 数值越高,层级越高,在网页的最上层, 没有开启定位的元素不可以使...

  • 元素层级 背景 表格

    元素的层级 z-index 父元素层级在高,也不会盖住它的子元素 对于没有开启定位的元素不能使用z-index 如...

  • 元素层级、背景、表格

    元素层级 想要设置元素层级必须要开启定位(上一章有定位的描述) 后面的数字是设置层级的数字越大层级越高,但是父类的...

  • 前端六

    1.元素的层级 运行结果: 2.简写背景属性 运行结果: 3.表格 运行结果: 4.表格 运行结果: 5.长表格 ...

  • HTML 日常了解6

    固定定位 元素的层级 背景 背景偏移与定位 背景固定

  • 元素背景、表单、表格

    元素背景:background-color属性用来为元素设置背景颜色。需要指定一个颜色值,当指定了一个颜色以后,整...

  • 固定定位、背景、表格

    固定定位(fixed):元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位...

  • HTML-06day

    1、按钮练习 2、固定定位 3、电驴导航 4、表格样式 5、表格布局 6、表格 7、表格属性简写 8、背景 9、新...

  • 背景、表格

    z-inlin可以提升定位元素所在的层级;对于没有开启的时候不能用z-inline; z-index可以指定一个整...

  • 表格 、背景

    1.按钮练习 2.背景 3.背景属性 4.表格 5.给表格添加样式 6.导航标 7.固定单位 8.给表格添加样式 ...

网友评论

      本文标题:元素的层级,背景透明,背景固定,表格,长表格

      本文链接:https://www.haomeiwen.com/subject/qgsgtctx.html