摘 要：網(wǎng)頁制作是中職學校電子商務、計算機網(wǎng)絡應用等專業(yè)的必修課程，而網(wǎng)頁導航條的制作一直都是網(wǎng)頁制作課程的重點，方法種類繁多、效果各有不同。這里主要探討和研究利用最新的“滑動門”技術(shù)來制作精美的導航條效果，通過實際的案例為大家拋磚引玉，分析由網(wǎng)頁制作在HTML5+CSS3變革下衍生出的新的布局方法在導航條上的具體應用。

關(guān)鍵詞：滑動門；HTML5+CSS3；網(wǎng)頁制作；導航條；水晶按鈕

中圖分類號：TP393.092

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，這門課程幾乎每年都在發(fā)生變化。如今，網(wǎng)頁制作方法已經(jīng)由原來的table嵌套式布局完全轉(zhuǎn)向了更加標準的HTML5+CSS3布局，這使網(wǎng)頁制作方法有了翻天覆地的變化，各種新方法、新技術(shù)如雨后春筍般不斷涌現(xiàn)。“滑動門”技術(shù)也在此時應運而生，它可以僅僅使用一張圖片就完成各種寬度不同的圓角背景顯示，自適應文字的寬度。這就大大減少了圖像的應用和流量的浪費，加快了網(wǎng)頁的瀏覽速度。因此，“滑動門”技術(shù)成為目前比較流行的網(wǎng)頁制作方法之一，得到了廣泛的應用。

那么，什么是“滑動門”技術(shù)呢？

當在導航文字中設置鼠標滑過時顯示圓角矩形框時，因為每個文字的長度不同，所以傳統(tǒng)的方法是給每個導航文字各繪制一個單獨長度的圓角矩形，每個導航顯示不同的圖像。這樣做不僅復雜，而且造成圖像使用多，訪問流量增加。因此，技術(shù)的更新時必要的，那就是使用“滑動門”技術(shù)來制作。

首先分析下滑動門技術(shù)的核心原理：在每個導航文字的兩邊各利用一個標簽來設置同一張圓角矩形背景圖像，當兩個相同的圓角矩形相向滑動時，它們會重疊一部分，當中間文字區(qū)域較大時，重疊就少一些；而中間文字區(qū)域較小時，重疊就多一些。兩個圖像在文字兩邊滑動，重疊的部分的寬度會根據(jù)中間區(qū)域自動調(diào)整，而由于標簽設置內(nèi)填充，所以兩邊的圓角始終顯示，圓角矩形就像兩扇推拉門一樣，因此這種技術(shù)被稱為“滑動門”。

分析了原理，通過一個實際案例詳細了解滑動門技術(shù)的具體應用。那就是制作一個如圖1所示的鼠標經(jīng)過時顯示圓角矩形的精美導航條效果。

圖1

為了表現(xiàn)出立體的視覺效果，以及水晶按鈕的質(zhì)感，制作中必須借助圖像才可以完成。分別使用如下圖2所示的4個圖像表現(xiàn)效果，其中nav_bg.png是作為整個導航的背景色平鋪使用的，nav_left.gif和nav_right.gif是導航整體兩側(cè)的圓角。nav_hover.png則是當鼠標指針經(jīng)過菜單項的時候顯示出來的。它在這里就充當了滑動門的角色，只要在文字內(nèi)容兩邊設置標簽作為“鉤子”把它“掛”起來就可以了。這里只使用這一張圖像來制作所有導航文字的滑過效果，不過有一點要注意，那就是這張圖片一定要比所有導航文字都要長，不能比任何導航文字短，而且最好要長至少1/3。

圖2

思路清楚了就可以制作了，由于導航左右各有圓角組成，所以先編寫相應的HTML代碼。傳統(tǒng)的制作方法使用table的嵌套，可以使用1行5列的表格制作。但是，為了更好的適應“滑動門”技術(shù)，這里使用HTML5+CSS3方法來做，這樣可以更好的精簡代碼，也是大勢所趨。具體代碼如下：

< nav>

• HOME
• NEWS
• ABOUT US
• SERVICES
• CONTACT

可以看出，每個文字鏈接都是作為一個列表項目

完成了頁面中的部分，下面用css樣式表控制頁面中的標簽。

（1）設置導航條整體效果。導航條的整體效果由類樣式nav來控制，這里把左側(cè)圓角圖像設置為它的背景，左對齊、不重復，由于背景圖像寬為8像素、高為46像素，所以在左側(cè)設置8像素的填充，并把高度設置為46像素。導航的整體可以隨意設置寬度，這里設置為508像素，主要是為了方便計算，也可以不設置具體寬度，自適應網(wǎng)頁的寬度。導航右側(cè)的圓角由類樣式.nav_right_bg來控制，方法和nav類似，就不再重復，具體代碼如下：

nav {

background-image： url（images/nav_left.gif）；

background-repeat： no-repeat；

background-position： left；

width： 508px；

height： 46px；

padding-left： 8px；

}

nav_right_bg {

background-image： url（images/nav_right.gif）；

background-repeat： no-repeat；

background-position： right；

height： 46px；

width： 500px；

padding-right： 8px；

}

（2）設置ul的樣式。ul標簽是塊級元素，所以不設置寬度就會自動伸展到父系div兩端。在ul里平鋪背景，和左右兩個圓角圖片結(jié)合在一起。

nav ul {

background-image： url（images/nav_bg.png）；

margin： 0px；

padding： 0px；

list-style-type： none；

height： 46px；

}

這里設置了margin和padding，然后將list-style-type屬性設置為none，這樣可以取消掉每個列表項目前面自帶的圓點。然后設置高度為46像素，這正是背景圖片的高度。背景圖像最好為8像素寬，這樣不但能夠保證圖片大小比較小，也可以減輕服務器的原算量。

（3）設置ul中的li樣式。li也是塊級元素，默認情況下是豎直排列，這里將其設置為左浮動，使各個列表橫向排列，形成橫向的導航菜單。代碼如下：

nav ul li {

float： left；

}

（4）設置a標簽樣式。由于具體的顯示樣式都在a標簽里設置，所以a標簽需要設置的內(nèi)容較多。首先設置a標簽為塊級元素，并在為a標簽設置文本的顯示方式，設置字體顏色為白色、字號是12號字、字體為Arial。因為是英文，所以使用英文字體，如果導航時中文的，一般要設置為宋體或者黑體。設置行高line-height屬性和高height屬性相同，都是46像素，是為了將文字在豎直方向上居中排列。設置text-decoration屬性為none，可以去掉鏈接文字自帶的下劃線。最后，給a標簽設置左側(cè)15像素的內(nèi)邊距，用來顯示從左向右滑動的“滑動門”的左側(cè)圓角。具體代碼如下：

nav ul li a {

line-height：46px；

color： #FFF；

text-decoration： none；

display： block；

height： 46px；

padding-left： 15px；

font-weight： normal；

font-family： Arial；

font-size： 12px；

}

通過以上的設置，一個精美的圓角導航條效果已經(jīng)呈現(xiàn)在眼前了，但是此時鼠標經(jīng)過并不會有效果顯示，以下通過設置a：hover屬性，設置鼠標經(jīng)過的效果。

nav ul li a：hover {

color： #FF0；

background-image： url（images/nav_hover.png）；

}

這里將文字設置為黃色，然后將水晶質(zhì)感的圖像文件地址作為屬性的值，當瀏覽頁面的時候，已經(jīng)可以看到當鼠標經(jīng)過的時候，背景圖像已經(jīng)出現(xiàn)，但是它的右邊被齊刷刷地切斷了，圖像并不能顯示完整。那這個問題如何解決呢？

這正是“滑動門”技術(shù)的重點所在。這里重點應用到了前面HTML中設置的文字加粗標簽，把標簽作為一個“鉤子”來設置css樣式，可以為它的背景設置一個背景圖像，這個背景圖像仍然使用唯一的水晶材質(zhì)圖像文件nav_hover.png。不同的是這次把圖像對齊到右側(cè)，從右側(cè)展開，b標簽默認是內(nèi)嵌屬性，這里把它設置為塊。并且為了和上面a標簽左側(cè)的15像素距離進行對稱，在b標簽的右側(cè)添加15像素的填充，這樣就可以使文字左右兩邊擁有相同的填充距離了。

nav ul li a b {

display： block；

padding-right： 15px；

}

之后為標簽設置鼠標經(jīng)過的效果，通過a：hover b來設置標簽的鼠標經(jīng)過效果。這一步雖然是一句代碼的變化，卻是在css應用上的一個重要進步，為標簽設置背景圖片，這個圖片將會覆蓋在前面定義的“nav ul li a：hover”中設置的圖片的上面，這兩個圖片實際上是同一圖片，由于標簽被包含在標簽的內(nèi)部，標簽在左側(cè)設置了15像素的填充，所以同一圖片相互覆蓋，左側(cè)又露出15像素的圓角，就像兩個滑動門一樣，互相重疊，而我們看到的部分又組合成一個完整圖片，顯示出完整的沒有間隙的圓角矩形。代碼如下：

nav ul li a：hover b {

color： #FF0；

background-image： url（images/nav_hover.png）；

background-repeat： no-repeat；

background-position： right top；

}

到此為止，在瀏覽器中的顯示效果就如圖（1）所示，制作了一個精美的水晶效果導航條，無論鼠標經(jīng)過哪個導航文字，背景的圓角矩形都會自適應的根據(jù)文字長度進行變化。這充分展示了“滑動門”技術(shù)的優(yōu)越性——不僅實現(xiàn)了效果，而且精簡了圖像和代碼。

當然，僅僅通過本案例并不能表現(xiàn)出“滑動門”技術(shù)全部的優(yōu)勢，在實際應用中更可以根據(jù)這個案例衍生出如“雙重滑動門”的三狀態(tài)按鈕和“4圖像滑動門”制作圓角框等等嶄新的技術(shù)變化。這些都需要隨著時代的進步在以后的發(fā)展中不斷的摸索和研究。技術(shù)發(fā)展無止境，但是目的永遠只有一個，那就是更好的為實際需要服務。

參考文獻：

[1]溫謙.CSS設計徹底研究[M].北京：人民郵電出版社，2008.

[2]李燁.別具光芒 div+css網(wǎng)頁布局與美化[M].北京：人民郵電出版社，2006.

[3]北京阿博泰克北大青鳥信息技術(shù)有限公司 職業(yè)教育研究院.使用css+div制作網(wǎng)頁[M].北京：電子工業(yè)出版社.

作者簡介：劉宇（1983-），男，吉林長春人，講師，本科，雙學位，研究方向：網(wǎng)站開發(fā)。

作者單位：河源市高級技工學校，廣東河源 517000