網(wǎng)頁設(shè)計時,在網(wǎng)頁上隨處可見的燈箱廣告,有效地提高了視覺沖擊力,不斷變換的圖片和文字,給瀏覽者不同的感受,燈箱廣告的動靜結(jié)合,引起人們的注意,從而吸引人眼球,以達到最好的經(jīng)濟利益。本例介紹在網(wǎng)站建設(shè)時用CSS設(shè)置最簡單的燈箱廣告的方法。
【操作步驟】
第1步,首先構(gòu)建網(wǎng)頁結(jié)構(gòu)。在本例中,應(yī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>
在本示例中應(yīng)用<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)頁設(shè)計中用*{ margin:0; padding:0;}語句設(shè)置了網(wǎng)頁中所有標簽的margin和padding屬性,并設(shè)置了網(wǎng)頁背景顏色。在menu類樣式中,首先設(shè)置其定位為relative。
由于沒有設(shè)置<dl></dl>中<dt>和<dd>的樣式,使得4幅圖片以及數(shù)字“1、2、3、4”的位置錯亂,接下來對dt樣式進行設(shè)置。
第3步,設(shè)置dt樣式類和dt標記中的a樣式類,從而實現(xiàn)設(shè)置<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標記默認是行內(nèi)元素,所以用dis-play:block語句將其定義為塊級元素,在a:hover中定義了鼠標懸停時的背景顏色和字體顏色。
第4步,設(shè)置dd樣式類。
#menu dd{ /*dd類樣式*/
width:210px; /*寬度*/
height:144px; /*高度*/
overflow:hidden; /*隱藏溢出*/
}
在dd類樣式中,應(yīng)用overflow:hidden語句實現(xiàn)圖片的溢出隱藏,overflow:hidden的作用就是把超過其設(shè)置的高度和寬度部分隱藏起來,在本例中,設(shè)置了圖片的寬度為210px,高寬為144px,但是由于在dd中添加了4張圖片,而只需要顯示一張,不能讓4張圖片同時顯示,所以在這里設(shè)置了overflow:hidden語句,讓其他3張圖片隱藏起來。