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