div+css常用小技巧和概念解释（持续更新中...)

一、页面居中

margin:0px 0px 0px 0px

顺序是 上、右、下、左

div的样式中加入margin:0px auto;就可以居中了，0代表上下为0px，auto代表左右自动

二、超链接说明

a表示所有超链接

a:link表示超链接文字格式

a:visited表示浏览过的文字格式

a:active表示按下超链接的文字格式

a:hover表示鼠标移上超链接的文字格式

三、css优先级

• id优先级高于class
• 后面的样式覆盖前面的
• 指定的高于继承
• 行内样式高于内部或外部样式
• 总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的

四、典型布局

1、单行一列
body { margin: 0px; padding: 0px; text-align: center; } 
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

2、两行一列
body { margin: 0px; padding: 0px; text-align: center;} 
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} 
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

3、三行一列
body { margin: 0px; padding: 0px; text-align: center; } 
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 

#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

4、单行两列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } 
#bodycenter #dv1 {float: left;width: 280px;} 
#bodycenter #dv2 {float: right;width: 410px;}

5、两行两列
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} 
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 

#bodycenter #dv1 { float: left; width: 280px;} 
#bodycenter #dv2 { float: right;width: 410px;}

6、三行两列
#header{ width: 700px;margin-right: auto; margin-left: auto; } 
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; } 
#bodycenter #dv1 { float: left;width: 280px;} 
#bodycenter #dv2 { float: right; width: 410px;} 
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

7、单行三列
1）绝对定位
#left { position: absolute; top: 0px; left: 0px; width: 120px; }  
#middle {margin: 20px 190px 20px 190px; } 
#right {position: absolute;top: 0px; right: 0px; width: 120px;}

2）float定位一
<div id="warp">  <div id="column">  <div id="column1">这里是第一列</div>  <div id="column2">这里是第二列</div>  <div class="clear"></div>  </div>  <div id="column3">这里是第三列</div>  <div class="clear"></div>  </div>
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;}

3）float定位二
<div id="center" class="column">  <h1>This is the main content.</h1>  </div>  <div id="left" class="column">  <h2>This is the left sidebar.</h2>  </div>  <div id="right" class="column">  <h2>This is the right sidebar.</h2>  </div>
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;} 
.column {position: relative;float: left;} 
#center {width: 100%;} 
#left {width: 180px; right: 240px;margin-left: -100%;} 
#right {width: 130px;margin-right: -100%;}

8、两行三列
<div id="header">这里是顶行</div>  <div id="warp">  <div id="column">  <div id="column1">这里是第一列</div>  <div id="column2">这里是第二列</div>  <div class="clear"></div>  </P> <P></div>  <div id="column3">这里是第三列</div>  <div class="clear"></div>  </div>
#header{width:100%; height:auto;} 
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;}

9、三行三列
<div id="header">这里是顶行</div>  <div id="warp">  <div id="column">  <div id="column1">这里是第一列</div>  <div id="column2">这里是第二列</div>  <div class="clear"></div>  </div>  <div id="column3">这里是第三列</div>  <div class="clear"></div>  </div>  <div id="footer">这里是底部一行</div>
#header{width:100%; height:auto;} 
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;} 
#footer{width:100%; height:auto;}

五、始终居底部

<div style="position:fixed;_position:absolute;bottom:5px;_bottom:5px;right:160px;_right:160px;" id="gototopbutton"><a href="#" style="float:right"><img border="0px" src="/images/GoTo.gif"></a></div>

<script type="text/javascript">
  function set_to_foot()
  {
    var div=$("#gototopbutton")[0];
    div.style.marginTop=div.style.pixelHeight+document.documentElement.scrollTop;
    setTimeout("set_to_foot()",500);
  }
  set_to_foot()

</scirpt>

六、div相对布局

<style type="text/css">
.top_div{
 position:relative;
 width:300px;
 border:0;
 margin:0px auto;
}
.sub_div{
 position:absolute;
 top:20px;
 left:20px;
}
</style>
</head>
<body>
<div class='top_div' style='z-index:50'>
 <div>服务新干线</div>
 <div class='sub_div'>
  <table width='250' border='0' cellspacing='0' cellpadding='2' align='left'>
   <tr><td><img src='http://s.fwxgx.com/images/logo.gif' border=0></td></tr>
   <tr><td>建筑人员的网上家园</td></tr>
  </table>
  </div>
</div>

hanwenyu