前些天加了一個設(shè)計群,里面一幫人都在嚷嚷要學(xué)CSS,但是不知道從哪里入手,于是我就在群里隨便嘀咕了一句"哈哈,我是高手...." 結(jié)果引來罵聲無數(shù),雖然我心里不服,不過還是承認自己的css功底不夠,除了布局/文字/鏈接這些簡單的處理之外,其他的一些行為基本不會.

　　其中有個人說"如果你是高手,那你就詳細介紹一下css滑動門技術(shù)",這句話把我刺激了,于是我連夜從網(wǎng)上搜羅了一些關(guān)于css滑動門技術(shù)的東西,并且自己做了一個滑動門,事實上在學(xué)習(xí)css滑動門技術(shù)之前,我發(fā)現(xiàn)我已經(jīng)做過很多類似的菜單效果,最有代表性的就是搜狗網(wǎng)址導(dǎo)航的搜索框,后來這個效果被廣泛運用到搜狗的搜索引擎當(dāng)中,我在這里總結(jié)一下一些css滑動門的知識,希望能給大家對css的學(xué)習(xí)起到一個幫助作用,另外結(jié)合javascript,css可以制作出更多炫目的效果.

　　背景:

　　從我的理解來講,css滑動門是被刺激出來的,因為很多人認為css并不能做出漂亮的網(wǎng)頁,但是事實上恰恰相反,css不僅能做出相當(dāng)漂亮的網(wǎng)頁,還可以很好得把內(nèi)容和表現(xiàn)分開,給設(shè)計師和開發(fā)人員更大的空間去發(fā)揮;

　　定義:

　　滑動門技術(shù)就是:當(dāng)點擊頁面上的導(dǎo)航按鈕后這個導(dǎo)航按鈕的CSS特性發(fā)生變化，從而區(qū)別于該組的其他導(dǎo)航按鈕，提示給操作者，當(dāng)前瀏覽的內(nèi)容就是這個CSS特性發(fā)生變化的按鈕所指向的內(nèi)容。這種效果的一大好處在于，在多導(dǎo)航的頁面上能夠清晰地反映當(dāng)前瀏覽內(nèi)容隸屬于哪個欄目或者哪個類，同時給人以美觀、清晰、明了的視覺感受。滑動門技術(shù)的主角是被操作的對象，也就是這里被點擊的對象，其CSS特性主要是指該導(dǎo)航按鈕包括其中的其它元素的屬性發(fā)生變化，當(dāng)然，這個按鈕的形式可以是BUTTON、A、TD甚至可以是P或者DIV這樣的閉合元素，它們的屬性主要是指這個元素的邊框、背景、字體的顏色、大小、粗細以及外間距和內(nèi)間距等等，總之，其一切可以把自身的“地位”區(qū)別于其它屬主的屬性都可以被應(yīng)用起來使用在滑動門技術(shù)上。

　　應(yīng)用范圍:

　　網(wǎng)站導(dǎo)航菜單

　　技術(shù)要點:

　　1.用無序列表ul和li組成菜單結(jié)構(gòu)

　　2.給li設(shè)置背景(如果有圓角,則設(shè)置為右置或左置,背景圖片遠遠超過該子菜單的長度)

　　3.設(shè)置li中的a的display為block,并給a加背景屬性(如果有圓角,則設(shè)置為右置或左置,背景圖片只要是一個圓角的寬度就可以了)

　　4.設(shè)置當(dāng)前菜單a的屬性(padding-bottom加n個像素,覆蓋整個菜單的底邊,n根據(jù)具體效果決定)

　　5.用js控制鼠標點擊以后的效果(先來一個循環(huán)把所有的按鈕背景重置,然后把改變當(dāng)前按鈕樣式)

      出自csdn