css中的滑動(dòng)門技術(shù)--.

《css中的滑動(dòng)門技術(shù)--.》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。

1、CSS中的滑動(dòng)門技術(shù)>>.在CSS中，一個(gè)經(jīng)常被人們討論的先進(jìn)之處即背景圖像的可層疊性，并允許他們?cè)诒舜酥线M(jìn)行滑動(dòng)，以創(chuàng)造一些特殊的效果。根據(jù)CSS2.0當(dāng)前的規(guī)定，每一個(gè)背景圖像都需要各自的HTML元素。在許多情況下，典型的標(biāo)記已經(jīng)為一般的接口組件提供了多種元素以供我們使用。標(biāo)簽導(dǎo)航欄就是其中的一個(gè)例子。過(guò)去，我們頻繁的使用這些標(biāo)簽，并已成為了一種非常流行的站點(diǎn)導(dǎo)航方式?，F(xiàn)今，在CSS已被廣泛支持的前景下，我們可以為我們站點(diǎn)制作出更高質(zhì)量和更好外觀的標(biāo)簽導(dǎo)航欄來(lái)。你也許知道CSS可以用來(lái)“馴服”無(wú)序的列表，或許你還曾經(jīng)看到過(guò)這種樣式的標(biāo)簽列表：如果我們想用和以上類似的標(biāo)記，將導(dǎo)航標(biāo)簽變

2、成這種樣式，該怎么辦呢？經(jīng)過(guò)簡(jiǎn)單的設(shè)計(jì)，我們是可以做到的。創(chuàng)新于何處？我見過(guò)的許多基于CSS的導(dǎo)航標(biāo)簽大都具有一類的特征：矩形的色塊，也許僅僅是一個(gè)輪廓，對(duì)于當(dāng)前選中的標(biāo)簽則沒(méi)有邊框，標(biāo)簽在鼠標(biāo)指針游至其上時(shí)改變顏色。這難道就是CSS所能給我們的全部嗎？一連串的小盒子和單調(diào)的色彩嗎?在CSS被廣泛采用之前，我們已經(jīng)看到許多標(biāo)簽導(dǎo)航設(shè)計(jì)中的創(chuàng)新之處。獨(dú)創(chuàng)的外形，熟練的色彩混合，以及對(duì)真實(shí)世界中許多物理接口的模仿。但是這些設(shè)計(jì)往往過(guò)分依賴于經(jīng)過(guò)復(fù)雜制作、帶有文本的圖像，或被包裝成若干嵌套的表格。修改文本或改變標(biāo)簽的順序則需要一個(gè)復(fù)雜的過(guò)程。文本的伸縮更是不可能的，或給頁(yè)面的布局極大的影響。純文

3、本的導(dǎo)航欄比起文本即圖像的導(dǎo)航欄更具有持續(xù)使用性和更快的載入速度。同樣，我們甚至可以為每一個(gè)圖像加上alt屬性，對(duì)于弱視者，純文本更可以自由的改變大小。不足為奇的是，基于純文本的導(dǎo)航欄，并加以CSS樣式，又重新回到Web設(shè)計(jì)中來(lái)。但是，大多數(shù)基于CSS的導(dǎo)航欄設(shè)計(jì)，至今為止仍然是毫無(wú)意義的。一種最近被采用的技術(shù)（例如CSS）可以讓我們做的更好，同樣不失先前提到的那些表格和圖片標(biāo)簽的效果?；瑒?dòng)門技術(shù)美觀的工藝，真正靈活的接口組件，并根據(jù)文本自適應(yīng)大小，我們可用兩個(gè)獨(dú)立的背景圖像來(lái)創(chuàng)造它。一個(gè)在左邊，一個(gè)在右邊。把這兩幅圖像想象成兩扇可滑動(dòng)的門，它們滑到一起并交迭，占據(jù)一個(gè)較窄的空間；或者相互

4、滑開，占據(jù)一個(gè)較寬的空間，就像下圖所顯示的那樣：在這個(gè)模型中,一個(gè)圖像掩蓋住另一個(gè)圖片的一部分。假設(shè)我們放置一些獨(dú)特的內(nèi)容在每個(gè)圖像的周圍，例如標(biāo)簽的圓角，我們并不希望上面一副圖像完全的遮蔽住下面一副。為了防止這種情況的發(fā)生，我們可以將上面一副圖像（此例中的左邊那幅）控制的盡可能的窄。但仍然要保證一定的寬度來(lái)顯現(xiàn)標(biāo)簽一側(cè)的獨(dú)特性。如果外部是圓角，我們就應(yīng)該控制上面一副圖像和它的弧線部分具有一樣的寬度。如果目標(biāo)在大小上增長(zhǎng)，并超過(guò)了以上所顯示的寬度，歸咎于文本大小及字體的改變，圖像會(huì)被拉開，產(chǎn)生不美觀的間隙。我們需要判斷的是，預(yù)測(cè)這種可擴(kuò)展的量將有多大。如果在瀏覽器中改變字體的大小，目標(biāo)又會(huì)

5、如果增長(zhǎng)呢？實(shí)際來(lái)說(shuō)，我們至少應(yīng)該估算到字體大小增長(zhǎng)至300%的情況。背景圖像也得適應(yīng)這種增長(zhǎng)。對(duì)于以上的例子，我們將下面（即右邊）的圖像設(shè)為400*150像素，上面的設(shè)為9*150像素。在頭腦中，始終要有這樣的認(rèn)識(shí)：背景圖像只是顯示一個(gè)可供內(nèi)容填充的有效空間（即內(nèi)容區(qū)域和padding，稱為doorway）。這兩幅圖像始終和各自外部的邊角相錨定。背景圖像的可見部分和在一起即形成了一個(gè)具有這種標(biāo)簽形狀的空間（doorway）：如果標(biāo)簽被撐大，圖像即滑開，doorway變寬，圖像的也將被顯露的更多：此例中，我在photoshop中制作兩個(gè)平滑，細(xì)的3D標(biāo)簽圖像，如文章開頭所顯示的那樣。對(duì)于其

6、一，內(nèi)部明亮，邊框暗淡些，用來(lái)表現(xiàn)當(dāng)前選中的標(biāo)簽。將這種技巧模型應(yīng)用于左右兩幅圖像中，我們需要擴(kuò)大標(biāo)簽圖像覆蓋的區(qū)域，將它裁剪成兩部分：同樣的方式將應(yīng)用到被稱為“當(dāng)前”的標(biāo)簽中。一旦我們完成了這四幅圖像（1,2,3,4），我們就可以開始用標(biāo)記和CSS來(lái)制作我們的標(biāo)簽了。標(biāo)簽的創(chuàng)造當(dāng)你在研究用CSS來(lái)創(chuàng)造水平列表時(shí)，會(huì)發(fā)現(xiàn)至少有兩種方法將列表項(xiàng)安排在同一行里。兩種方法各有千秋，但都需要CSS來(lái)解決布局所帶來(lái)的混亂。一種方法使用inlinebox，另一種則用floats。方法一，可能是比較普遍的一種，是將列表項(xiàng)都inline顯示。inline方法的魅力在于它的簡(jiǎn)易性。但是，對(duì)于我們即將談到的滑

7、動(dòng)門技術(shù)來(lái)說(shuō)，inline方法在特定的瀏覽器上存在一些解釋上問(wèn)題。方法二，是我們將要關(guān)注的，即用floats將列表項(xiàng)安排在同一行里。令人沮喪的是，floats表面上矛盾的行為正巧回避了自然的邏輯。盡管如此，對(duì)于解決多重浮動(dòng)元素的基本認(rèn)識(shí)，以及可靠浮動(dòng)的意義，仍是值得討論的。我們將用另一種浮動(dòng)元素來(lái)解決浮動(dòng)元素的排列問(wèn)題。這樣，父類元素將子類元素完全包括起來(lái)。于是，我們就可以為標(biāo)簽加上背景色彩和背景圖像。非常重要的一點(diǎn)必須