網(wǎng)頁前端滑動門技術(shù)剖析

董桃利 馬占鋒

摘要：隨著互“聯(lián)網(wǎng)+”時代的到來，網(wǎng)頁前端技術(shù)越來越受到大家的青睞。在頁面前端技術(shù)中，為了使頁面整體看上去美觀，常常需要給頁面菜單設(shè)置不規(guī)則的背景圖，但由于導(dǎo)航的內(nèi)容隨時需要變更，導(dǎo)航背景不能自適應(yīng)，這樣就給頁面更改帶來了很多麻煩，本文通過典型案例剖析、講解如何通過滑動門技術(shù)來解決這一系列問題。

關(guān)鍵詞：前端技術(shù)；導(dǎo)航；滑動門技術(shù)

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1007-9416（2018）07-0235-02

隨著時代的發(fā)展，網(wǎng)頁前端技術(shù)越來越受到大家的追捧。前端技術(shù)不僅是新奇的技術(shù)，更重要的是它的一些全新概念，這將給互聯(lián)網(wǎng)帶來更多無限的可能。在頁面中導(dǎo)航菜單是每個頁面的主題所在，因此每個網(wǎng)站都會把自己的導(dǎo)航菜單做的盡善盡美，然而菜單導(dǎo)航內(nèi)容與背景不能自適應(yīng)一直困擾著程序設(shè)計者。滑塊門技術(shù)很好的解決了這一問題，在滑塊門技術(shù)的使用上學(xué)者會遇到這樣或者這樣的問題。下面筆者將通過由淺入深、理論結(jié)合實踐，對這門技術(shù)進(jìn)行詳細(xì)的闡述。

1 工作原理

滑動門技術(shù)工作原理：在頁面導(dǎo)航中，把整個導(dǎo)航模塊設(shè)置為一個盒子模型。每一項菜單文字的兩邊各使用一組容器標(biāo)簽，用來設(shè)置不規(guī)則背景圖像；每一項菜單文字放在一個盒子模型中，背景填充為規(guī)則的背景圖， 此盒子的寬度由盒子內(nèi)容文字自動撐開；兩邊的不規(guī)則圖像之間的距離就像兩扇推拉門一樣，受到中間文字長度控制，因此把這一項技術(shù)稱為“滑動門”技術(shù)。

滑動門技術(shù)的實現(xiàn)的關(guān)鍵技術(shù)就是對圖片切片和拼接。切片的實現(xiàn)：切片是為了滿足頁面版面設(shè)計的特殊需求，通常把效果圖中需要的部分剪切下來作為網(wǎng)頁制作時所需的素材。拼接的實現(xiàn)：定義三個盒子模型，第一個和第三個盒子的寬度和高度設(shè)置為對應(yīng)的圖片寬和高，并且分別設(shè)為盒子背景為切片所得hd_left和hd_right圖片；中間的盒子只設(shè)置高度不指定寬度，盒子的寬度會被內(nèi)容自動撐開，盒子背景設(shè)為切片所得hd_middle圖片，并且必須設(shè)置圖片為X軸平鋪特效。

2 案例分析

滑動門技術(shù)在網(wǎng)頁前端技術(shù)中用途廣泛，下面理論聯(lián)系實際，結(jié)合具體案例對滑動門技術(shù)進(jìn)行詳細(xì)講解，以加深學(xué)者對滑動門技術(shù)的理解和應(yīng)用能力。

（1）分析效果圖。通常在頁面導(dǎo)航中，頁面導(dǎo)航菜單項分為多個子菜單，每個子菜單項文字長度因需求各不相同，效果圖如圖1所示。對每一個子菜單項進(jìn)行分析，會發(fā)現(xiàn)每一個子菜單項的結(jié)構(gòu)是類似的，每一項是由左、右兩張不規(guī)則圖片和中間自由擴(kuò)展長度的圖片組成。（2）切片圖片。為了滿足導(dǎo)航菜單中不同長度菜單項目顯示效果一致的這種特殊要求的版面效果，需要把美工設(shè)計的菜單項中有用的部分剪切下來用作網(wǎng)頁素材，這一過程在網(wǎng)頁設(shè)計中就是切片。切片中需要注意對圖片的特殊需求進(jìn)行分析。導(dǎo)航美工設(shè)計圖導(dǎo)航項目原圖如圖2-1所示。經(jīng)需求分析，按照需求和切片原則對其進(jìn)行切片，切片為三張資源素材。切片后得到圖片素材nav_left.png、nav_middle.png、nav_right.png。分別如圖2-2、圖2-3、圖2-4所示。（3） 搭建頁面結(jié)構(gòu)。在頁面中實現(xiàn)導(dǎo)航效果，用的是列表標(biāo)簽

。菜單欄的每一項通過列表項標(biāo)簽
• 實現(xiàn)，將子菜單項兩側(cè)的不規(guī)則圖形分別以標(biāo)簽背景圖的形式來實現(xiàn)，中間的圖片設(shè)這為列表項中標(biāo)簽的背景圖，這是導(dǎo)航菜單采用最多的設(shè)計方案，核心代碼段如圖3所示。（4）定義CSS樣式。通過使用CSS樣式實現(xiàn)菜單自動滑動門特效。在CSS樣式中，首先，進(jìn)行整體頁面設(shè)置，設(shè)置外邊距、內(nèi)邊距、列表項清零；其次，設(shè)置導(dǎo)航菜單整體寬度、高度、及導(dǎo)航水平居中；第三步，設(shè)置盒子模型每一個盒子模型的高，以及設(shè)置盒子為左浮動；第四步，設(shè)置、、的背景效果特效，核心代碼如表1所示。

  3 結(jié)語

  本文結(jié)合實際案例通過深入淺出理論結(jié)合實踐的細(xì)致講解，對使用頁面前端滑動門技術(shù)實現(xiàn)不規(guī)則菜單進(jìn)行了深度闡述，旨在使學(xué)習(xí)者能夠充分掌握這門實了用的技術(shù)，能夠游刃有余的進(jìn)行頁面前端設(shè)計。

  參考文獻(xiàn)

  [1]徐平.基于CSS技術(shù)的網(wǎng)頁導(dǎo)航欄制作[J].無線互聯(lián)科技，2016，（07）：39-40.

  [2]張琳.淺析HTML5+CSS3在網(wǎng)頁設(shè)計中的新特性及優(yōu)勢[J].西安文理學(xué)院學(xué)報（自然科學(xué)版），2017，（06）：82-84.

  [3]葛藍(lán).基于HTML5+CSS3的網(wǎng)頁布局[J].數(shù)字技術(shù)與應(yīng)用，2017，（10）：92-93.

  [4]李君君.HTML5+CSS3在電子商務(wù)網(wǎng)站建設(shè)中的優(yōu)勢[J].信息與電腦（理論版），2018，（03）：27-29.

  [5]嚴(yán)偉中.關(guān)于HTML5的核心技術(shù)研究與應(yīng)用[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2014，（03）：30.