元素层级和背景

2019-05-31  本文已影响0人  张明越

元素的层级

z-index 设立层级

没有开启,是不能使用z-index

子元素层级再高也永远盖不住父元素

元素的透明属性:opacity

(在IE8以下版本没有效果)

filter(滤镜): alpha(opacity=50)透明滤镜


背景: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 ;背景的所有属性都可以设置 没有的设置的是默认值

表格

tableRow 缩写<tr></tr>行

有几个单元格td列


合并

colspan 横合并

<td colspan="2">D3</td>

rowspan 纵合并

<td rowspan="2">D3</td>

border-spacing

border-collapse

th标签

它是td的特殊版

它的特点就是加粗和居中


长表格

thead表头

tbody表体

tfoot表尾


表格的布局

table布局实现,table标签使用如下:

<table>定义一个HTML表格,一个简单的HTML表格由<table> 元素以及<tbody> 和一个或多个 <tr>、<td>、<th>元素组成。、

<tr>:定义表格的行,一般不定义行的高度

<td>:定义表格的列、一般不定义列的高度

<th>:定义表头

<tbody>:定义表格主体。

属性:

align:left、center、right  (表格相对周围元素的对齐方式)

background:背景图片

border:边框宽度

cellpadding:单元格边沿与其内容之间的空白

cellspacing:单元格之间的空白

上一篇下一篇

猜你喜欢

热点阅读