CSS難點總結

一、網頁居中顯示：

    須要設置兩個地方，一個是body，一個是外邊框div。

    CSS：

body{
 margin:0;
 padding:0;
  text-align:center;
}
#main{
 width:760px;
  margin:0 auto;
 padding:0
}

    二、文字垂直居中顯示：

    在DIV中定義一個行高與其高度相同便可。

    CSS：

.title{
 height:25px;
  line-height:25px;
 vertical-align:middle;
 }

    三、圖片垂直居中顯示：

    在<img>標籤中加入align="absmiddle" 便可。

    四、清除浮動：

    若是在同一行上有幾個DIV並列顯示，那麼必須在其中加入清除浮動代碼，若是在一行上只是一個DIV，好象沒必要清除浮動。

    CSS：

.clear{clear: both;}

    HTML示例：

<div id="main">
     <div class="left"></div>
     <div class="center"></div>
     <div class="right"></div>
      <div class="clear"></div>
</div>
<!--清除浮動後，後面的代碼排列就不會有任何變形了，無論是在IE仍是FF中，都很正確-->
<div ……

    五、三列結構中的的DIV寫法：

    適用於左右欄是窄幅，中欄爲主要內容顯示，讓其寬度自適應。
    
    CSS:

#main{
     width:760px;
     margin:0 auto;
     }
.left{
     width:100px;
     float:left;
    }
.right{
     width:120px;
     float:right;
    }
.center{
     margin:0 120px 0 100px;
     width:auto;
    }
.clear{clear: both;}

    HTML：

<!--注意：center這個DIV的位置-->
<div id="main">
     <div class="left"></div>
     <div class="right"></div>
      <div class="center"></div>
     <div class="clear"></div>
</div>

   六、設置<ul>表列縮進值：

 

    默認狀況下，<ul>列表是縮進兩個字符顯示列表項目的，咱們能夠經過設置負邊界值達到控制其縮進值的目的。

    CSS：

ul{
 margin-left:   -24px;
}

    默認值是0，負值表示向左移，正值表示向右移。

    七、水平導航條的製做示例：

    HTML代碼以下：

<ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">News</a></li>
     <li><a href="#">Products</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Clients</a></li>
     <li><a href="#">Case Studies</a></li>
</ul>

    CSS中，首先清除ul的list-style、margin和padding：

ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
float: left;
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}

    而後，能夠將li的display屬性設置了inline或者設置float爲left，display li可能會出現bug，因此我通常用float left的方法：

ul li { float: left; } ul a { display: block; float: left;　 padding: 0 2em; line-height: 2.1em; background: url(images/divider.gif) repeat-y left top; text-decoration: none; color: #fff; } ul .first a { background: none; } ul a:hover { color: #333; }