有些經(jīng)典的CSS技巧，我們還是需要記住的，這樣可以節(jié)省我們大量的時(shí)間，下面零度就為大家推薦幾個(gè)比較好的CSS技巧：
1、在不同頁(yè)面上使用同樣的導(dǎo)航代碼
許多網(wǎng)頁(yè)上都有導(dǎo)航菜單，當(dāng)進(jìn)入某頁(yè)時(shí)，菜單上相應(yīng)這一項(xiàng)就應(yīng)該變灰，而其他頁(yè)亮起來(lái)。一般要實(shí)現(xiàn)這個(gè)效果，需要寫(xiě)程序或?qū)ｉT(mén)為每一頁(yè)做設(shè)計(jì)，現(xiàn)在靠CSS就可以實(shí)現(xiàn)這個(gè)效果。
首先，在導(dǎo)航代碼中使用CSS類(lèi)：
<ul> <li><a href="#" class="home">首頁(yè)</a></li> <li><a href="#" class="about">關(guān)于我們</a></li> <li><a href="#" class="contact">聯(lián)系我們</a></li> </ul>
然后分別為每一頁(yè)的Body指定一個(gè)id，和上面類(lèi)同名。如<body id="home">。
然后設(shè)計(jì)CSS如下：
#home .home, #about .about, #contact .contact { commands for highlighted navigation go here }這里，當(dāng)id設(shè)為home時(shí)，.home就會(huì)起作用，也就是class設(shè)為home的那一行導(dǎo)航條就會(huì)顯示出特殊效果來(lái)。其他頁(yè)也是如此。
怎么樣，是不是很簡(jiǎn)單呢？
2、Block和inline元素對(duì)比
所有的HTML元素都屬于block和inline之一。block元素的特點(diǎn)是：
總是在新行上開(kāi)始；
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。相反地，inline元素的特點(diǎn)是：
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
用code class="inline">display: inline 或display: block命令就可以改變一個(gè)元素的這一特性。什么時(shí)候需要改變這一屬性呢？
讓一個(gè)inline元素從新行開(kāi)始；
讓塊元素和其他元素保持在一行上；
控制inline元素的寬度（對(duì)導(dǎo)航條特別有用）；
控制inline元素的高度；
無(wú)須設(shè)定寬度即可為一個(gè)塊元素設(shè)定與文字同寬的背景色。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
