css 滑動門技術的介紹及實例分享

2024-07-11 08:45:31

字體：大中小

來源：轉載

供稿：網友

"如果你是一個css高手的話,那你就來詳細介紹一下css滑動門技術".看了這句話不得不學習一下這個所謂的css滑動門技術.我也想當高手啊.當時在百度知道里回答問題的時候發現有很多有問相關css滑動門技術的文章。當時真是不知道css里還有個滑動門技術. 所謂的滑動門，可以這樣理解，菜單的背景圖(圓角，直角，其它等)會根據文字的多少而自動變長(變短)，這好象一個可滑動的門一樣.

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

css滑動門技術的定義

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

網站導航菜單
總結幾個技術要點:
A:由于我們只用css來實現，且代碼要盡可能的少，那么ul和li標簽就是我們的首先了，
B:ui有默認的標屬性，我們要用margin:0px;padding:0px;list-style:none;來通用它
C:li默認是豎著排列的，我們要用display:inline;來讓它在單行中顯示
D:a默認是行內元素，我們要設置它float:left來讓它靠左邊
E:span默認也是行內元素，我們常用它來調菜單的高度，所以要設置display:block;
F:由于span在a標簽內，如果span高度被拉高了，那么a中的背景圖也會自動拉高
G:由于span背景圖在a背景圖內，如果不設置a標簽的padding-left:4px(它恰好為左背景圖的寬);左邊(a標簽的)的背景圖會被右邊(span標簽內的)的背景圖完全覆蓋
H:圖片的定位是由
background:url(tableft.gif) left top no-repeat;和
background:url(tableft.gif) left -42px no-repeat;
來實現的，一定要設置no-repeat,-42為圖片總高的一半

請看如下實例代碼：
html代碼:

復制代碼

上一篇：css 相對定位絕對定位浮動分析

下一篇：負邊距創建自適應寬度的流體布局的實現方法