頁面CSS技巧運用實例 ，一般來說，頁面上利用CSS樣式的目的不外乎如下幾個：

為了使得網頁更美觀，并作為一個整體，網頁上各個標簽的風格更為統一。

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

通過一些CSS的特效表達個性，吸引瀏覽者。

有很多個人主頁在實現第三點上很出色，但是如果把這些特效照搬到工作中開發的網站則不太適合。CSS樣式首先是為了內容服務的，在公司等非個人網站的場合，不能夠喧賓奪主，忽略內容本身，為了特效而特效。

 

1、修改滾動條顯示效果

當網頁的長度或者寬度超出當前瀏覽器窗口長和寬的時候，在窗口的右邊和底部，就會出現滾動條。瀏覽者可以通過拖拽滾動條中的滑塊，或者單擊滾動條兩端的箭頭按鈕讓瀏覽器顯示網頁在屏幕外的內容。

 

2、滾動條的結構

滾動條的結構如圖15-1所示，分為四個部分，默認是3D風格顯示的：

上（左）箭頭按鈕：使滑塊向上（向左）運動，令網頁上方（左邊）不在瀏覽器窗口的部分顯現出來。

下（右）箭頭按鈕：使滑塊向下（向右）運動，令網頁下方（右邊）不在瀏覽器窗口的部分顯現出來。

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

滑塊軌道：滑塊在其上運動。

 

3、通過樣式表來修改滾動條的外觀

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

 

4、Clip屬性

Clip這個詞在英文中的意思是裁剪，比如我們去理發就可以說是Get a clip。因此，CSS樣式屬性中的Clip屬性也可以把標簽“裁剪”后再顯示。Clip屬性的用法如下：

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

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

Auto：表示不剪切。

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

在應用了Clip屬性后，剪裁區域外的部分是透明的，因此別的標簽可以透過透明的區域顯示出來。注意必須將應用Clip標簽的position值設為absolute，才可以開始剪裁。