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，和上面類別同名。如69aab999a64e75a9d5e7b7109fdc5db9。

然後設計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%，除非設定寬度

e388a4556c0f65e1904146cc1a846bee, e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1, ff9c23ada1bcecdd1a0fb5d5a0f18437, ff6d136ddc5fdfeffaf53ff6ee95f185 和25edfb22a4f469ecb59f1190150159c6是區塊元素的例子。相反地​​，inline元素的特徵是：

和其他元素都在一行上；

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

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

45a2772a6b6107b401db3c9b82c049c2, 3499910bf9dac5ae3c52d5ede7383485, 2e1cf0710519d5598b1f0f14c36ba674, d5fd7aea971a85678ba271703566ebfd, a1f02c36ba31691bcfe87b2722de723b, 8e99a69fbe029cd4e2b854e244eab143 和907fae80ddef53131f3292ee4f81644b是inline元素的例子。

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

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

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

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

控制inline元素的高度；

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

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