<head> <style type="text/css"> .main { height:42px; 100%; text-align:center;} </style> <title>class选择器</title> </head> <body> <div class="main"> </div> </body> </html>
<head> <style type="text/css"> #main {height:42px; 100%; text-align:center; } </style> <title>id选择器</title> </head> <body> <div id="main"> </div> </body> </html>
<head> <title>格式与布局position:absolute</title> <style type="text/css"> .b {border:5px solid blue; 100px; height:100px; background-color:#0F3; right:50px; bottom:20px; position:absolute;相对于外层边框 } .c {border:2px solid red; 400px; height:200px; } </style> <style type="text/css"> .d {border:2px solid red; 400px;height:200px;position:absolute; } </style> </head> <body> <div class="c">c没有 <div class="b">b </div> </div> <div class="d">d有 <div class="b">2b </div> </div> </body> </html>
<html> <head> <title></title> <style type="text/css"> #a {border:5px solid blue;100px; height:100px;margin:10px;background-color:#0F6; position:fixed;锁定位置相对于游览器 z-index:2;分层,层数越高越考上 } #aa {border:5px solid blue;100px; height:100px;margin:10px;background-color:#0F6; left:20px;top:50px;position:relative;相对于默认位置的移动} </style> </head> <body> <div id="a"> a</div> <div id="aa">aa</div>相对于a移动 </body> </html>