久久精品国产亚洲AV成人婷婷_性色av不卡无码一区二区_人妻无码久久影视_久久精品国产免费一卡二卡

網(wǎng)頁設(shè)計中的模擬按鈕樣式

網(wǎng)頁制作時,a是行內(nèi)元素,只有在單擊鏈接的內(nèi)容時才會激活鏈接。但是,有時候希望它顯示為按鈕樣式,因此可以將a的display屬性設(shè)置為block,然后修改width、height和其他屬性來創(chuàng)建需要的樣式和單擊區(qū)域。

【示例1】在頁面中為所有鏈接定義按鈕樣式效果,由于鏈接現(xiàn)在顯示為塊級元素,單擊塊中的任何地方都會激活鏈接。

a{  display: block;   width: 6em;   padding:0.2em;   line-height: 1.4:   background-color: #g488E9;   border: lpx solid black;   color: #000;   text-decoration: none;   text-align: center;}

在上面代碼中,寬度是以em為單位顯式設(shè)置的。由于塊級元素會擴展,填滿可用的寬度,所以如果父元素的寬度大于鏈接所需的寬度,那么需要將希望的寬度應(yīng)用于鏈接。如果希望在頁面的主內(nèi)容區(qū)域中使用這種樣式的鏈接,就很可能出現(xiàn)這種情況。但是,如果這種樣式的鏈接出現(xiàn)在寬度比較窄的地方(如邊欄)中,那么可能只需設(shè)置父元素的寬度,而不需要為鏈接的寬度擔(dān)心。為什么使用line-height屬性定義按鈕的高度,而不是使用height屬性?這實際上是一個小技巧,能夠使按鈕中的文本垂直居中。如果設(shè)置height,就必須使用填充將文本壓低,模擬出垂直居中的效果。但是,文本在行框中總是垂直居中的,所以如果使用line-height屬性,文本就會出現(xiàn)在框的中間。

上述缺點:如果在網(wǎng)頁設(shè)計中,按鈕中的文本占據(jù)兩行,按鈕的高度就是需要的高度的兩倍。避免這個問題的唯一方法是調(diào)整按鈕和文本的尺寸,讓文本不換行,至少在文本字號超過合理值之前不會換行。

使用:hover偽類就可以創(chuàng)建翻轉(zhuǎn)效果,不需要JavaScript。如在鼠標(biāo)停留時設(shè)置鏈接的背景和文本顏色,從而實現(xiàn)非常簡單的動態(tài)效果。

a:hover {   background-color:#369;   color:#fff;}

【示例2】修改背景顏色對于簡單的按鈕很合適,但是對于比較復(fù)雜的按鈕,最好使用背景圖像。在下面示例中,創(chuàng)建了兩個按鈕圖像,一個用于正常狀態(tài),一個用于鼠標(biāo)停留狀態(tài),也可以添加激活狀態(tài),即使用:active動態(tài)偽類觸發(fā)。

a:link, a:visited {    display:block;    

width:200px;    

height:40px;    

line-height:40px;    color:#000;    

text-decoration:none;    

background:#9488E9 url(images/button.gif) no-repeat left top;    

text-indent:50px;}a:hover{

background:#369 url(images/butten_over.gif) no-repeat left top;    color:#fff;}

設(shè)置按鈕樣式上面代碼與前面示例相似。主要的差異是使用背景圖像而不是背景顏色,同時使用固定寬度和高度的按鈕,所以在CSS中設(shè)置顯式的像素尺寸。但是,也可以創(chuàng)建特大的按鈕圖像,或者結(jié)合使用背景顏色和圖像創(chuàng)建流體的或彈性的按鈕。

【示例3】多圖像方法的主要缺點是在瀏覽器第一次裝載鼠標(biāo)停留圖像時有短暫的延遲。這會造成閃爍效果,讓按鈕感覺起來有點兒反應(yīng)遲鈍??梢詫⑹髽?biāo)停留圖像作為背景應(yīng)用于父元素,從而預(yù)先裝載它們。但是,有另一種方法。并不切換多個背景圖像,而是使用一個圖像并切換它的背景位置。使用單個圖像的好處是減少了服務(wù)器請求的數(shù)量,而且可以將所有按鈕狀態(tài)放在一個地方。

首先,創(chuàng)建組合的按鈕圖像

網(wǎng)頁設(shè)計背景圖像在這個示例中,使用正常狀態(tài)和鼠標(biāo)停留狀態(tài),也可以使用激活狀態(tài)和已訪問狀態(tài)。代碼幾乎與前面的示例相同。設(shè)計在正常狀態(tài)下,將翻轉(zhuǎn)圖像對準(zhǔn)左邊,而在鼠標(biāo)停留狀態(tài)下對準(zhǔn)右邊。

a:link,a:visited{    display:block;    

width:200px;    

height:40px;    

line-height:40px;    

color:#000;    text-decoration:none;    

background:#9488E9 url(images/pixy-rollover.gif) no-repeat left top;    text-indent:50px;}a:hover{    background-color:#369;    background-position:right top;    color:#fff;}

由于IE仍然會向服務(wù)器請求新的圖像,這會產(chǎn)生輕微的閃爍,為了避免閃爍,需要將翻轉(zhuǎn)狀態(tài)應(yīng)用于鏈接的父元素,如包含它的段落。

p {    background:#g488Eg url(images/pixy-rollover.gif) ;    

no-repeat right top;}

在圖像重新裝載時,它仍然會消失一段時間。

但是,由于提前加載,現(xiàn)在會露出相同的圖像,消除了閃爍。


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