CSS的技巧

有些經典的CSS技巧，我們還是需要記住的，這樣可以節省我們大量的時間，下面零度就為大家推薦幾個比較好的CSS技巧：

1.在不同頁面上使用相同的導航代碼

許多網頁上都有導航選單，當進入某頁時，選單上相應這一項就應該變灰，而其他頁亮起來。一般要達到這個效果，需要寫程式或專門為每一頁做設計，現在靠CSS就可以達到這個效果。

首先，在導覽程式碼中使用CSS類別：

<ul> 
<li><a href="#" class="home">首页</a></li> 
<li><a href="#" class="about">关于我们</a></li> 
<li><a href="#" class="contact">联系我们</a></li> 
</ul>

然後分別為每一頁的Body指定一個id，和上面類別同名。如。

然後設計CSS如下：

#home .home, #about .about, #contact .contact 
{ 
commands for highlighted navigation go here 
}

#這裡，當id設為home時，.home就會起作用，也就是class設為home的那一行導航條就會顯示出特殊效果來。其他頁也是如此。

怎麼樣，是不是很簡單呢？

2、Block與inline元素比較

所有的HTML元素都屬於block和inline之一。 block元素的特點是：

總是在新行上開始；

高度，行高以及頂和底邊距都可控制；

寬度缺省是它的容器的100%，除非設定寬度

,

,

,

,

和
• 是區塊元素的例子。相反地​​，inline元素的特徵是：

  和其他元素都在一行上；

  高，行高及頂和底邊距不可改變；

  寬度就是它的文字或圖片的寬度，不可改變。

  , , , , , 和是inline元素的例子。

  用code class="inline">display: inline 或display: block指令就可以改變一個元素的這個特性。什麼時候需要改變這個屬性呢？

  讓一個inline元素從新行開始；

  讓區塊元素和其他元素保持在一行上；

  控制inline元素的寬度（對導航條特別有用）；

  控制inline元素的高度；

  無須設定寬度即可為一個區塊元素設定與文字同寬的背景色。

  更多CSS的技巧相關文章請關注PHP中文網！