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，和上面類同名。如<body id="home">。
然後設計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%，除非設定一個寬度
<p>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。相反地，inline元素的特點是：
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
用code class="inline">display: inline 或display: block命令就可以改變一個元素的這一特性。什麼時候需要改變這一屬性呢？
讓一個inline元素從新行開始；
讓塊元素和其他元素保持在一行上；
控制inline元素的寬度（對導航條特別有用）；
控制inline元素的高度；
無須設定寬度即可為一個塊元素設定與文字同寬的背景色。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
