页面CSS技巧运用实例.pptVIP

第15章 页面CSS技巧运用实例 本章将对目前网站设计制作过程中较少使用，但却很有意思的几个CSS技巧进行介绍。它们或者处于相对不引人注目的地位，或者超出了一般网页制作者的固有观念，具有开阔思路，加深理解的作用。 一般来说，页面上利用CSS样式的目的不外乎如下几个： 为了使得网页更美观，并作为一个整体，网页上各个标签的风格更为统一。 为了内容显示得更清楚，易于阅读，层次分明。 通过一些CSS的特效表达个性，吸引浏览者。 有很多个人主页在实现第三点上很出色，但是如果把这些特效照搬到工作中开发的网站则不太适合。CSS样式首先是为了内容服务的，在公司等非个人网站的场合，不能够喧宾夺主，忽略内容本身，为了特效而特效。 15.1 修改滚动条显示效果 当网页的长度或者宽度超出当前浏览器窗口长和宽的时候，在窗口的右边和底部，就会出现滚动条。浏览者可以通过拖拽滚动条中的滑块，或者单击滚动条两端的箭头按钮让浏览器显示网页在屏幕外的内容。 15.1.1 滚动条的结构 滚动条的结构如图15-1所示，分为四个部分，默认是3D风格显示的： 上（左）箭头按钮：使滑块向上（向左）运动，令网页上方（左边）不在浏览器窗口的部分显现出来。 下（右）箭头按钮：使滑块向下（向右）运动，令网页下方（右边）不在浏览器窗口的部分显现出来。 滑块：可以被鼠标或者键盘的上、下、左、右键控制运动，起到了替代滚动条箭头按钮的作用，而且比它们控制的效果显著。 滑块轨道：滑块在其上运动。 15.1.2 通过样式表来修改滚动条的外观 当页面上的表单改变了默认的样式之后，滚动条如果还是默认的3D方块和灰色，则多少有些美中不足，其实可以通过样式表来修改滚动条的外观，如代码所示。 15.2 利用Clip属性进行剪裁 下面来讲解一下前面章节中并未介绍、实际应用也比较少的Clip属性。 15.2.1 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，才可以开始剪裁。 15.2.2 利用Clip属性裁剪图片 利用Clip属性可以做出不少的效果，有时候还能救急，比如： 由于网页上表格限制了宽度，现有的一幅图片放不下，如果强行在img标签中修改大小，会影响图片的显示效果，为此需要修改图片本身。不巧的是，美工休假了，同事们都不知道如何使用Photoshop来修改它。在这个时候，可以对图片应用Clip属性，将不符合要求的部分裁剪掉， 15.2.3 利用Clip属性创建多彩文字 除了理解起来比较自然的裁剪图片之外，Clip属性还可以对文字进行裁剪，下面介绍一个很有意思的效果。 将两段内容相同但颜色不同的文字重合在一起，再通过分别对这些文字设置Clip 属性，使得两段文字各自被裁剪的位置不同，合并形成一段上下部分颜色不同的文字。实现了这样的效果。 15.2.4 Clip属性值的进一步思考 我们看到Clip属性值后面首先都是rect这样的字符，熟悉英文的读者可能已经猜到了，这是rectangle的缩写，表示长方形，结合裁剪的意义，也就是裁剪成长方形的意思，这样也是符合后面的四个坐标值设置的。那么，有没有别的裁剪方式呢？ 截至目前还没有。不过在W3C的官方文档上，Clip属性后面跟着的是shape参数，看来在人们的设想中确实有过不仅限于rect的想法，在今后的CSS版本中可能会实现。如果梦想变为现实的话，我们就能利用“圆型”、“心型”等等多种形状的剪刀创造出更加多彩的特效文字。 15.2.5 Dreamweaver设置Clip属性的小问题 有很多读者是利用Dreamweaver这一强大的网页制作设计工具编辑修改CSS的，但它在设置Clip属性的时候有一点点小问题： 通过CSS管理面板和CSS定义对话框设置完Clip属性后，在代码中发现rect括号里面的四个值是用逗号分隔开的，因此在IE浏览器上会没有效果。这时，需要自己把逗号变换成空格就可以了。