設(shè)計燈箱廣告

網(wǎng)頁設(shè)計時,在網(wǎng)頁上隨處可見的燈箱廣告,有效地提高了視覺沖擊力,不斷變換的圖片和文字,給瀏覽者不同的感受,燈箱廣告的動靜結(jié)合,引起人們的注意,從而吸引人眼球,以達到最好的經(jīng)濟利益。本例介紹在網(wǎng)站建設(shè)時用CSS設(shè)置最簡單的燈箱廣告的方法。

【操作步驟】

第1步,首先構(gòu)建網(wǎng)頁結(jié)構(gòu)。在本例中,應(yīng)用<dl>標(biāo)記創(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>標(biāo)記來創(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標(biāo)記類樣式*/    

position:relative;                 /*相對定位*/    

height:180px;                      /*高度*/    

width:210px;                       /*寬度*/    

background:#ccc;                   /*dl標(biāo)記的背景顏色*/

text-align:center;    

padding-top:20px;}

在以上的代碼中在網(wǎng)頁設(shè)計中用*{ margin:0; padding:0;}語句設(shè)置了網(wǎng)頁中所有標(biāo)簽的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標(biāo)記中的a樣式類,從而實現(xiàn)設(shè)置<dl>列表中的項目標(biāo)題“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 {                        /*鼠標(biāo)懸停時的a樣式類*/    

background:#fff;    

color:#FF0000;

首先定義了dt類樣式,其中position:absolute語句表示絕對定位,也就是其定位參照父級元素的原點,進行上、下、左、右的移動。在dt樣式類的a標(biāo)記下,首先利用float:left語句,使列表項橫向顯示,由于a標(biāo)記默認是行內(nèi)元素,所以用dis-play:block語句將其定義為塊級元素,在a:hover中定義了鼠標(biāo)懸停時的背景顏色和字體顏色。

第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張圖片隱藏起來。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點擊可一鍵撥號)