css滑動門技術的介紹及執行個體分享

 "如果你是一個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代碼:

<div id="menu">    
 
  <ul>
   <li><a href="index.html"><span>Home</span></a></li>
   <li><a href="index.html"><span>News</span></a></li>
   <li><a href="index.html"><span>Downloads</span></a></li>
   <li><a href="index.html"><span>Services</span></a></li>
   <li><a href="index.html"><span>Support</span></a></li>
   <li><a href="index.html"><span>About</span></a></li>  
  </ul> 
             
 </div>

CSS樣式代碼如下:

a{ text-decoration:none; color:#FFFFFF;}

#menu ul{ margin:0px; padding:0px; list-style:none;}

#menu li{ display:inline;}

#menu a{ float:left; background:url(tableft.gif) left top no-repeat; padding-left:4px;}

#menu span{ display:block; background:url(tabright.gif) right top no-repeat; padding:4px 10px 4px 6px;}

#menu a:hover{ background:url(tableft.gif) left -42px no-repeat;}

#menu a:hover span{ background:url(tabright.gif) right -42px no-repeat;}
本文轉自 "百洋軟體研究實驗室" listly的部落格