網(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)聲明其樣式，在列表中添加4幅圖片，從而實(shí)現(xiàn)燈箱廣告。

第2步，定義網(wǎng)頁(yè)的基本屬性和menu類樣式。

*{ margin:0; padding:0;}body{                                  /*網(wǎng)頁(yè)基本屬性*/    

margin:30px auto auto 30px;        /*四周補(bǔ)白*/

background-color:#000000;              /*網(wǎng)頁(yè)背景顏色*/}

#menu{                                 /*dl標(biāo)記類樣式*/    

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類樣式中，首先設(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樣式類和dt標(biāo)記中的a樣式類，從而實(shí)現(xiàn)設(shè)置<dl>列表中的項(xiàng)目標(biāo)題“1、2、3和4”。

#menu dt{                       /*dt樣式類*/   

position:absolute;                    /*絕對(duì)定位*/    

right:5px;                            /*右邊框離父級(jí)元素的距離*/    

bottom:5px;                           /*下邊框離父級(jí)元素的距離*/}

#menu dt a{                               /*a樣式類*/   

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樣式類*/    

background:#fff;    

color:#FF0000;

首先定義了dt類樣式，其中position:absolute語(yǔ)句表示絕對(duì)定位，也就是其定位參照父級(jí)元素的原點(diǎn)，進(jìn)行上、下、左、右的移動(dòng)。在dt樣式類的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樣式類。

#menu dd{                /*dd類樣式*/    

width:210px;         /*寬度*/    

height:144px;        /*高度*/    

overflow:hidden;     /*隱藏溢出*/

}

在dd類樣式中，應(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)。