網(wǎng)頁(yè)設(shè)計(jì)時(shí)，在網(wǎng)頁(yè)上隨處可見(jiàn)的燈箱廣告，有效地提高了視覺(jué)沖擊力，不斷變換的圖片和文字，給瀏覽者不同的感受，燈箱廣告的動(dòng)靜結(jié)合，引起人們的注意，從而吸引人眼球，以達(dá)到最好的經(jīng)濟(jì)利益。本例介紹在網(wǎng)站建設(shè)時(shí)用CSS設(shè)置最簡(jiǎn)單的燈箱廣告的方法。
【操作步驟】
第1步，首先構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)。在本例中，應(yīng)用<dl>標(biāo)記創(chuàng)建列表，從而實(shí)現(xiàn)燈箱廣告效果。
<dl id="menu">
<dt>
<a href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
</dt>
<dd>
<img src="images/1.JPG" id="img1"/>
<img src="images/2.JPG" id="img2"/>
<img src="images/3.JPG" id="img3"/>
<img src="images/4.JPG" id="img4"/>
</dd>
</dl>
在本示例中應(yīng)用<dl></dl>標(biāo)記來(lái)創(chuàng)建列表，并創(chuàng)建“menu”類(lèi)來(lái)聲明其樣式，在列表中添加4幅圖片，從而實(shí)現(xiàn)燈箱廣告。
第2步，定義網(wǎng)頁(yè)的基本屬性和menu類(lèi)樣式。
*{ margin:0; padding:0;}body{ /*網(wǎng)頁(yè)基本屬性*/
margin:30px auto auto 30px; /*四周補(bǔ)白*/
background-color:#000000; /*網(wǎng)頁(yè)背景顏色*/}
#menu{ /*dl標(biāo)記類(lèi)樣式*/
position:relative; /*相對(duì)定位*/
height:180px; /*高度*/
width:210px; /*寬度*/
background:#ccc; /*dl標(biāo)記的背景顏色*/
text-align:center;
padding-top:20px;}
在以上的代碼中在網(wǎng)頁(yè)設(shè)計(jì)中用*{ margin:0; padding:0;}語(yǔ)句設(shè)置了網(wǎng)頁(yè)中所有標(biāo)簽的margin和padding屬性，并設(shè)置了網(wǎng)頁(yè)背景顏色。在menu類(lèi)樣式中，首先設(shè)置其定位為relative。
由于沒(méi)有設(shè)置<dl></dl>中<dt>和<dd>的樣式，使得4幅圖片以及數(shù)字“1、2、3、4”的位置錯(cuò)亂，接下來(lái)對(duì)dt樣式進(jìn)行設(shè)置。
第3步，設(shè)置dt樣式類(lèi)和dt標(biāo)記中的a樣式類(lèi)，從而實(shí)現(xiàn)設(shè)置<dl>列表中的項(xiàng)目標(biāo)題“1、2、3和4”。
#menu dt{ /*dt樣式類(lèi)*/
position:absolute; /*絕對(duì)定位*/
right:5px; /*右邊框離父級(jí)元素的距離*/
bottom:5px; /*下邊框離父級(jí)元素的距離*/}
#menu dt a{ /*a樣式類(lèi)*/
float:left; /*左對(duì)齊*/
display:block; /*定義為塊級(jí)元素*/
padding:1px 4px;
border:1px solid #ccc; /*為列表項(xiàng)加邊框*/
margin-left:2px; text-decoration:none; /*不顯示下劃線*/
color:#309; /*字體顏色*/ font-size:12px;}
#menu dt a:hover { /*鼠標(biāo)懸停時(shí)的a樣式類(lèi)*/
background:#fff;
color:#FF0000;
首先定義了dt類(lèi)樣式，其中position:absolute語(yǔ)句表示絕對(duì)定位，也就是其定位參照父級(jí)元素的原點(diǎn)，進(jìn)行上、下、左、右的移動(dòng)。在dt樣式類(lèi)的a標(biāo)記下，首先利用float:left語(yǔ)句，使列表項(xiàng)橫向顯示，由于a標(biāo)記默認(rèn)是行內(nèi)元素，所以用dis-play:block語(yǔ)句將其定義為塊級(jí)元素，在a:hover中定義了鼠標(biāo)懸停時(shí)的背景顏色和字體顏色。
第4步，設(shè)置dd樣式類(lèi)。
#menu dd{ /*dd類(lèi)樣式*/
width:210px; /*寬度*/
height:144px; /*高度*/
overflow:hidden; /*隱藏溢出*/
}
在dd類(lèi)樣式中，應(yīng)用overflow:hidden語(yǔ)句實(shí)現(xiàn)圖片的溢出隱藏，overflow:hidden的作用就是把超過(guò)其設(shè)置的高度和寬度部分隱藏起來(lái)，在本例中，設(shè)置了圖片的寬度為210px，高寬為144px，但是由于在dd中添加了4張圖片，而只需要顯示一張，不能讓4張圖片同時(shí)顯示，所以在這里設(shè)置了overflow:hidden語(yǔ)句，讓其他3張圖片隱藏起來(lái)。