页面CSS技巧运用实例

页面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，才可以开始剪裁。