摘 要：以JS+CSS結(jié)構(gòu)進行網(wǎng)頁布局是當前流行技術(shù)，越來越多的人開始使用JS。它對web技術(shù)的發(fā)展以及計算機領(lǐng)域的不斷開拓是一項革新。很多網(wǎng)站、靜態(tài)網(wǎng)頁與設(shè)計都開始使用JS+CSS的框架，實現(xiàn)彈出有很多種方法，背景半透明的DIV層方法也有很多，本文針對CSS所具有的多種技術(shù)，旨在說明JS+CSS實現(xiàn)彈出居中背景半透明DIV層的方法的方法。該方法在信息集成與頁面顯示效果上有良好的表現(xiàn)，并且該方案的實現(xiàn)不需要額外的用戶限制，簡單易行，便于推廣。

關(guān)鍵詞：JS+CSS DIV層 半透明

一、引 言

對于網(wǎng)頁制作初學(xué)者來說，由于表格布局比較簡單、制作速度快、容易控制，使用JS+CSS是一種很好的入門方法。隨著Web2.0標準化設(shè)計理念的普及，基于JS+CSS的布局更加流行。本文介紹了JS+CSS實現(xiàn)彈出居中背景半透明div層的方法。

二、JS、CSS與DIV

JS簡介：JS是JavaScript的縮寫，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，廣泛用于客戶端的腳本語言。

CSS簡介：CSS是Cascading Style Sheet的縮寫。譯作“層疊樣式表單”。是用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。使用CSS樣式可以控制許多僅使用HTML無法控制的屬性，是描述HTML元素的規(guī)則。CSS的定義是由三個部分構(gòu)成：選擇符（selector），屬性（properties）和屬性的取值（value）?；靖袷饺缦拢?/p>

Selector {property： value}（選擇符{屬性：值}）

選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如body、p、table等，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開。Body {color： black}

選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。DIV簡介： DIV全稱Division，即為劃分，是層疊樣式表中的定位技術(shù)，有時可以稱其為圖層。DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標簽和結(jié)束標簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

三、設(shè)計與實現(xiàn)

1.外部容器。將頁眉、正文及頁腳全部包含在其中的容器，就可視為外部容器。外部容器習(xí)慣性設(shè)置ID名稱為container，主要設(shè)置整個頁面的寬度，對齊方式等，相關(guān)的CSS樣式為： #container{width：960px；margin：0px auto；}

2.頁眉設(shè)計。頁眉中，主要包括LOGO、導(dǎo)航等，設(shè)計簡單明了。標簽設(shè)計如下：

在外部獨立樣式表文件中，相對應(yīng)的CSS樣式設(shè)計如下：

#header.logo{width：280px；padding：0px 5px；float：left；}

#header.header_top_right1{width：600px；padding：0px 10px 0px 0px；float：right；}在該樣式中，header.logo主要設(shè)置其寬度為280px，內(nèi)邊距上下為0px，左右為5px并且向左浮動。在header_top_right1中主要設(shè)置其寬度為600px，內(nèi)邊距除了右內(nèi)邊距為10px外，其他內(nèi)邊距都為0px，且向右浮動。

3.網(wǎng)頁正文結(jié)構(gòu)。在正文中主要顯示彈出層，或者說是彈出窗口，背景半透明風(fēng)格的彈出框，并且背景半透明。其設(shè)計原理是：創(chuàng)建兩個層，一個高度和寬度都是100%，另一個就是你要彈出的窗口的具體內(nèi)容，半透明在IE中是用filter： Alpha（opacity=60）；在非IE中opacity：0.60。

點擊這里打開窗口

點擊關(guān)閉窗口

相對應(yīng)的CSS樣式設(shè)計如下：

4.背景半透明的DIV層通過超鏈接實現(xiàn)。鏈接的動態(tài)展示也是網(wǎng)頁設(shè)計中一項十分重要的技術(shù)應(yīng)用，在CSS中以偽類的形式給出鏈接的4種狀態(tài)：未訪問超鏈接a：link訪問后連接a：active，懸停時超鏈接a：hover和單機未釋放超鏈接a：active，在網(wǎng)頁設(shè)計中，經(jīng)常用到的鏈接樣式有三種，分別是未訪問時的超鏈接，鼠標指針懸停時超鏈接以及單擊訪問后的超鏈接，在設(shè)計中可以通過設(shè)置這種三種狀態(tài)下有不同背景或顏色來實現(xiàn)鏈接的動態(tài)效果，這種設(shè)計，即可以增加網(wǎng)頁的美感成都，也可以提供信息瀏覽記錄，本例中超鏈接CSS樣式設(shè)置如下：

a：link{color：#fff：font-size：13px：

background-images：url（images/bgl.gif）：}

a：visited{color：#ccc：font-size：13px：

background-images：url（images/bg2.if）：}

a：hover{color：#ff7300：font-size：158px：

background-images：url（images/bg3.gif）；}

運行該頁面，其效果如圖1所示。

四、結(jié)語

通過HTML頁面元素，再結(jié)合CSS及JS，實現(xiàn)了標準設(shè)計網(wǎng)站的JS+CSS整體布局，充分將JS+CSS標準化設(shè)計網(wǎng)站的特點體現(xiàn)出來，明確內(nèi)容表現(xiàn)的同時將結(jié)構(gòu)長度分離的效果，替代了傳統(tǒng)的table-tr-td嵌套設(shè)計風(fēng)格，以全新的角度解晰當前動態(tài)網(wǎng)頁結(jié)構(gòu)設(shè)計。

參考文獻：

[1]梁景紅.Web Designer Idea—設(shè)計師談網(wǎng)頁設(shè)計思維[M].北京：電子工業(yè)出版社，2006.

[2]孫榮俠.在DreamweaverMX中CSS樣式的應(yīng)用探索[J]. 多媒體技術(shù)及其應(yīng)用，2007，22（05）：1415-1416.

[3]喬巍.基于CSS的商務(wù)網(wǎng)站導(dǎo)航設(shè)計[J].商場現(xiàn)代化，2012，13（07）：39-41.

[4]曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2010.

[5]梁靜琳.DIV+CSS 布局技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用[J].武漢工程職業(yè)技術(shù)學(xué)院學(xué)報，2009，21（01）：42-45.