對css滑動門技術的一些總結和歸納

css

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

　　其中有個人說"如果你是高手,那你就詳細介紹一下css滑動門技術",這句話把我刺激了,於是我連夜從網上搜羅了一些關於css滑動門技術的東西,並且自己做了一個滑動門,事實上在學習css滑動門技術之前,我發現我已經做過很多類似的菜單效果,最有代表性的就是搜狗網址導航的搜尋方塊,後來這個效果被廣泛運用到搜狗的搜尋引擎當中,我在這裡總結一下一些css滑動門的知識,希望能給大家對css的學習起到一個協助作用,另外結合javascript,css可以製作出更多炫目的效果.

　　背景:

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

　　定義:

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

　　應用範圍:

　　網站導覽功能表

　　技術要點:

　　1.用無序列表ul和li組成菜單結構

　　2.給li設定背景(如果有圓角,則設定為右置或左置,背景圖片遠遠超過該子功能表的長度)

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

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

　　5.用js控制滑鼠點擊以後的效果(先來一個迴圈把所有的按鈕背景重設,然後把改變當前按鈕樣式)