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