格式与布局
position:
1、fixed——position:fixed; /*根据显示窗口的第一显示界面进行定位 ，直接定死在页面上，跟着滚动条更换位置*/
2、absolute——position:absolute; /*固定显示，一直悬着，不随着滚动条更换位置 */
3、relative——position:relative;/*相对的定位，相对的是上一句代码，使用relati时要先看上一句代码结束的位置*/
<style> #a { border:3px solid blue; height:100px; width:100px; background-color:#0F0; right:100px; bottom:100px; position:fixed; } .b { border:3px solid blue; height:100px; width:100px; background-color:#0F0; right:100px; bottom:100px; position:absolute; } .c { border:2px solid red; height:200px; width:400px; } .d { border:2px solid red; height:200px; width:400px; position:absolute; } </style> </head> <body><br /> <div class="c">c<div class="b">b</div></div><!--b在c里边，但b不是相对c定的位 --> <div class="d">d<div class="b">bb</div></div> <div id="a">a</div> </body>
<style> #a{ background-color:#0F0; border:2px solid blue; height:100px; width:100px; top:30px; left:30px; position:fixed; /*z-index:2;/*写上z-index:2后，默认情况下，只要比1大，都是第一层*/ /*overflow:hidden;超出的隐藏*/ overflow:scroll;/*滚动条,aa还是在a里边，把外层边框撑大，加着滚动条，背景颜色都是绿色*/ } #aa{ background-color:#0F0; border:2px solid blue; height:100px; width:100px; top:80px; left:80px; position:relative;/*相对的定位，相对的是上一句代码，使用relati时要先看上一句代码结束的位置*/ } </style> </head> <body> <div id="a">a<div id="aa">aa</div></div> </body> </html>
z-index:2;写上z-index:2后，默认情况下，只要比1大，都是第一层
/*overflow:hidden;超出的隐藏*/
overflow:scroll;/*滚动条,aa还是在a里边，把外层边框撑大，加着滚动条，背景颜色都是绿色*/
float:right;/*float流式布局，不占用文字的空，两侧广告，照片。占用左右两边空白，在一行上。针对于最后一行代码执行。
title>无标题文档</title> <style> #a{ border:2px solid green; height:300px; width:100px; float:left;} #b{ border:2px solid green; height:300px; width:100px; float:right;}/*float流式布局，不占用文字的空，两侧广告，照片。占用左右两边空白，在一行上。针对于最后一行代码执行。*/ /*半透明效果： <div class="box">透明区域<div> 在样式表中的代码为：*/ .box { opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50) } </style> </head> <body>123 <div id="b">b</div><div id="a">a</div><!--先有的b，后有的a，区域留白 --> <div id="b">d</div><div id="a">c</div> </body> </html>
半透明效果：
<div class="box">透明区域<div>
在样式表中的代码为：
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)——背过、、、
}
360导航的布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>360导航</title> <style> * { margin:0px; padding:0px;} #a { border:1px solid #999; width:1000px; height:100px; margin-top:75px; left:200px; position:absolute;} #b { border:1px solid #999; width:1000px; height:60px; left:200px; top:185px; position:relative;} #c { border:1px solid #999; width:200px; height:250px; margin-top:195px; left:200px; position:relative} #d { border:1px solid #999; width:790px; height:300px; margin-top:-252px; left:410px; position:relative} #e { border:1px solid #999; width:200px; height:100px; margin-top:-40px; left:200px; position:relative} #f { border:1px solid #999; width:790px; height:250px; margin-top:-50px; left:410px; position:relative} #g { border:1px solid #999; width:200px; height:1200px; margin-top:-190px; left:200px; position:relative} #h { border:1px solid #999; width:790px; height:800px; margin-top:-980px; left:410px; position:relative} #i { border:1px solid #999; width:790px; height:166px; margin-top:10px; left:410px; position:relative} #j { border:1px solid #999; width:333px; height:300px; margin-top:10px; left:200px; position:relative} #k { border:1px solid #999; width:333px; height:300px; margin-top:-302px; left:534px; position:relative} #l { border:1px solid #999; width:332px; height:300px; margin-top:-302px; left:868px; position:relative} </style> </head> <body> <div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div> <div id="e"></div> <div id="f"></div> <div id="g"></div> <div id="h"></div> <div id="i"></div> <div id="j"></div> <div id="k"></div> <div id="l"></div> <br /> <br /> <br /> </body> </html>
