頁(yè)面CSS技巧運(yùn)用實(shí)例 ，一般來說，頁(yè)面上利用CSS樣式的目的不外乎如下幾個(gè)：

為了使得網(wǎng)頁(yè)更美觀，并作為一個(gè)整體，網(wǎng)頁(yè)上各個(gè)標(biāo)簽的風(fēng)格更為統(tǒng)一。

為了內(nèi)容顯示得更清楚，易于閱讀，層次分明。

通過一些CSS的特效表達(dá)個(gè)性，吸引瀏覽者。

有很多個(gè)人主頁(yè)在實(shí)現(xiàn)第三點(diǎn)上很出色，但是如果把這些特效照搬到工作中開發(fā)的網(wǎng)站則不太適合。CSS樣式首先是為了內(nèi)容服務(wù)的，在公司等非個(gè)人網(wǎng)站的場(chǎng)合，不能夠喧賓奪主，忽略內(nèi)容本身，為了特效而特效。

 

1、修改滾動(dòng)條顯示效果

當(dāng)網(wǎng)頁(yè)的長(zhǎng)度或者寬度超出當(dāng)前瀏覽器窗口長(zhǎng)和寬的時(shí)候，在窗口的右邊和底部，就會(huì)出現(xiàn)滾動(dòng)條。瀏覽者可以通過拖拽滾動(dòng)條中的滑塊，或者單擊滾動(dòng)條兩端的箭頭按鈕讓瀏覽器顯示網(wǎng)頁(yè)在屏幕外的內(nèi)容。

 

2、滾動(dòng)條的結(jié)構(gòu)

滾動(dòng)條的結(jié)構(gòu)如圖15-1所示，分為四個(gè)部分，默認(rèn)是3D風(fēng)格顯示的：

上（左）箭頭按鈕：使滑塊向上（向左）運(yùn)動(dòng)，令網(wǎng)頁(yè)上方（左邊）不在瀏覽器窗口的部分顯現(xiàn)出來。

下（右）箭頭按鈕：使滑塊向下（向右）運(yùn)動(dòng)，令網(wǎng)頁(yè)下方（右邊）不在瀏覽器窗口的部分顯現(xiàn)出來。

滑塊：可以被鼠標(biāo)或者鍵盤的上、下、左、右鍵控制運(yùn)動(dòng)，起到了替代滾動(dòng)條箭頭按鈕的作用，而且比它們控制的效果顯著。

滑塊軌道：滑塊在其上運(yùn)動(dòng)。

 

3、通過樣式表來修改滾動(dòng)條的外觀

當(dāng)頁(yè)面上的表單改變了默認(rèn)的樣式之后，滾動(dòng)條如果還是默認(rèn)的3D方塊和灰色，則多少有些美中不足，其實(shí)可以通過樣式表來修改滾動(dòng)條的外觀

 

4、Clip屬性

Clip這個(gè)詞在英文中的意思是裁剪，比如我們?nèi)ダ戆l(fā)就可以說是Get a clip。因此，CSS樣式屬性中的Clip屬性也可以把標(biāo)簽“裁剪”后再顯示。Clip屬性的用法如下：

Clip:auto或者rect (number number number number)

具體各屬性值的含義如下：

Auto：表示不剪切。

Rect (number number number number )：依據(jù)上、右、下、左，順時(shí)針的方向開始剪裁，從標(biāo)簽左上角的起點(diǎn)為(0,0)坐標(biāo)開始，每一邊顯示開始的坐標(biāo)位置。因此，如果number大于0，不為auto，就相當(dāng)于標(biāo)簽顯示的范圍縮小了，標(biāo)簽于是被剪裁了。當(dāng)其中任一數(shù)值被設(shè)置為auto時(shí)，此邊不剪裁。

在應(yīng)用了Clip屬性后，剪裁區(qū)域外的部分是透明的，因此別的標(biāo)簽可以透過透明的區(qū)域顯示出來。注意必須將應(yīng)用Clip標(biāo)簽的position值設(shè)為absolute，才可以開始剪裁。