css滑動門技術總結

2020-03-24 18:20:50

字體：大中小

來源：轉載

供稿：網友

前些天加了一個設計群,里面一幫人都在嚷嚷要學css,但是不知道從哪里入手,于是我就在群里隨便嘀咕了一句"哈哈,我是高手...." 結果引來罵聲無數,雖然我心里不服,不過還是承認自己的css功底不夠,除了布局/文字/鏈接這些簡單的處理之外,其他的一些行為基本不會. 其中有個人說"如果你是高手,那你就詳細介紹一下css滑動門技術",這句話把我刺激了,于是我連夜從網上搜羅了一些關于css滑動門技術的東西,并且自己做了一個滑動門,事實上在學習css滑動門技術之前,我發現我已經做過很多類似的菜單效果,最有代表性的就是搜狗網址導航的搜索框,后來這個效果被廣泛運用到搜狗的搜索引擎當中,我在這里總結一下一些css滑動門的知識,希望能給大家對css的學習起到一個幫助作用,另外結合javascript,css可以制作出更多炫目的效果. 背景: 從我的理解來講,css滑動門是被刺激出來的,因為很多人認為css并不能做出漂亮的網頁,但是事實上恰恰相反,css不僅能做出相當漂亮的網頁,還可以很好得把內容和表現分開,給設計師和開發人員更大的空間去發揮; 定義: 滑動門技術就是:當點擊頁面上的導航按鈕后這個導航按鈕的CSS特性發生變化，從而區別于該組的其他導航按鈕，提示給操作者，當前瀏覽的內容就是這個CSS特性發生變化的按鈕所指向的內容。這種效果的一大好處在于，在多導航的頁面上能夠清晰地反映當前瀏覽內容隸屬于哪個欄目或者哪個類，同時給人以美觀、清晰、明了的視覺感受。滑動門技術的主角是被操作的對象，也就是這里被點擊的對象，其CSS特性主要是指該導航按鈕包括其中的其它元素的屬性發生變化，當然，這個按鈕的形式可以是BUTTON、A、TD甚至可以是P或者DIV這樣的閉合元素，它們的屬性主要是指這個元素的邊框、背景、字體的顏色、大小、粗細以及外間距和內間距等等，總之，其一切可以把自身的“地位”區別于其它屬主的屬性都可以被應用起來使用在滑動門技術上。應用范圍: 網站導航菜單技術要點: 1.用html' target='_blank'>無序列表ul和li組成菜單結構 2.給li設置背景(如果有圓角,則設置為右置或左置,背景圖片遠遠超過該子菜單的長度) 3.設置li中的a的display為block,并給a加背景屬性(如果有圓角,則設置為右置或左置,背景圖片只要是一個圓角的寬度就可以了) 4.設置當前菜單a的屬性(padding-bottom加n個像素,覆蓋整個菜單的底邊,n根據具體效果決定) 5.用js控制鼠標點擊以后的效果(先來一個循環把所有的按鈕背景重置,然后把改變當前按鈕樣式) 本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS學習者-2008年不要作浮躁的人

下一篇：對CSS知識的簡單介紹