一:position:fixed
锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗
例如:
网页标题 练习
二:position:absolute(绝对的)
1)外层没有positon:absolute(或relative),那么div相对于浏览器定位。
2)外层有position:absolute(或relative),那么div相对于外层边框定位。
例如如下代码:
页面标题
三.position:relative
(相对于把此div包含住的div的某个位置进行固定,如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。)
相对于默认位置的移动。根据如下代码,a在用relative移动前的位置,aa为用relative移动后的位置,aa距原位置上部间距50像素,距原位置左边距20像素。
网页标题 aaa
(上述代码中,如果aa不包含在a里面,则a是停留在上层,不随着滚动条滚动,会锁定位置;如果aa包含在a里面,则aa会随着a定位的位置移动)
四.分层(z-index)
在z 轴方向分层,可以理解为凤城一摞纸,层数越高越靠上。
在上面relative的示例中,我们看到了aa盖住了a,这是 因为后写的代码会盖住前面的代码,那么在不改变代码顺序的情况下,如何让a盖住aa呢,代码示例如下:
网页标题 aaa
五.float:left、 rigth (float:流式布局流式布局常用值:left、rigth)
Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。
overflow:hidden; //超出部分隐藏;scroll,超出范围时出滚动条;
<div style="clear:both"></div> 截断流
网页标题 练习hi安居诶安居卡死的房价房价房价房价是打开v网号安居佛得角覅及覅手机覅工会卡少女夏萨
超链接样式:
(以上链接,在定义这些状态时有个顺序 l v h a (必须按照这个顺序),其中a:active:点击超链接时候的状态,可以省略不写,代表点击的时候没有任何状态)
cursor:pointer 表示鼠标指到上面时的形状。这里是小手形状的
半透明效果
透明区域//样式表中的代码:.box{ opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50) background-color:red; width:200px; heigth:200px;}
opacity:填充效果 -moz-opacity:透明度