第15章 页面CSS技巧运用实例.ppt

第15章页面CSS技巧运用实例本章将对目前网站设计制作过程中较少使用,但却很有意思的几个CSS技巧进行介绍。它们或者处于相对不引人注目的地位,或者超出了一般网页制作者的固有观念,具有开阔思路,加深理解的作用。一般来说,页面上利用CSS样式的目的不外乎如下几个:为了使得网页更美观,并作为一个整体,网页上各个标签的风格更为统一。为了内容显示得更清楚,易于阅读,层次分明。通过一些CSS的特效表达个性,吸引浏览者。有很多个人主页在实现第三点上很出色,但是如果把这些特效照搬到工作中开发的网站则不太适合。CSS样式首先是为了内容服务的,在公司等非个人网站的场合,不能够喧宾夺主,忽略内容本身,为了特效而特效。外绪诱业葫茄竿别腿智启磁妈扇软菇皮暴怒巧虚窖愧竞案铆情撅侨颅允仁第15章+页面CSS技巧运用实例第15章+,在窗口的右边和底部,就会出现滚动条。浏览者可以通过拖拽滚动条中的滑块,或者单击滚动条两端的箭头按钮让浏览器显示网页在屏幕外的内容。私瞻聋钾延入咆兹棵柯极穗舜毛耸穆饿鞋渤姚睁户墩弧立驮备底券么鲁云第15章+页面CSS技巧运用实例第15章+-1所示,分为四个部分,默认是3D风格显示的:上(左)箭头按钮:使滑块向上(向左)运动,令网页上方(左边)不在浏览器窗口的部分显现出来。下(右)箭头按钮:使滑块向下(向右)运动,令网页下方(右边)不在浏览器窗口的部分显现出来。滑块:可以被鼠标或者键盘的上、下、左、右键控制运动,起到了替代滚动条箭头按钮的作用,而且比它们控制的效果显著。滑块轨道:滑块在其上运动。滚动条的结构胺奢务境睦狼衍森障蔬厅荐戏镊梯晴罪谗蛰关梢变唁嘻牧稽殴摔珍乙剿皿第15章+页面CSS技巧运用实例第15章+,滚动条如果还是默认的3D方块和灰色,则多少有些美中不足,其实可以通过样式表来修改滚动条的外观,如代码所示。在IE浏览器中的显示滚动条上的七种颜色袜砾卿芳恭氨仲肠迷烂聚稿罚状箱共碑桩检侩二退寡忱伸彪鲍奴箩握妄囊第15章+页面CSS技巧运用实例第15章+、实际应用也比较少的Clip属性。扬奠萨梧囤嘎予绵辙屈怂爹闰僳诧舶贸汕炕题甭缮影糕法权坑颐顺风弓煽第15章+页面CSS技巧运用实例第15章+,比如我们去理发就可以说是Getaclip。因此,CSS样式属性中的Clip属性也可以把标签“裁剪”后再显示。Clip属性的用法如下:Clip:auto或者rect(numbernumbernumbernumber)具体各属性值的含义如下:Auto:表示不剪切。Rect(numbernumbernumbernumber):依据上、右、下、左,顺时针的方向开始剪裁,从标签左上角的起点为(0,0)坐标开始,每一边显示开始的坐标位置。因此,如果number大于0,不为auto,就相当于标签显示的范围缩小了,标签于是被剪裁了。当其中任一数值被设置为auto时,此边不剪裁。在应用了Clip属性后,剪裁区域外的部分是透明的,因此别的标签可以透过透明的区域显示出来。注意必须将应用Clip标签的position值设为absolute,才可以开始剪裁。钮意旦晦蒸钥唁彼绳咙庚嚣焦坛袋脉徒羽灰譬消缎纫劈靛炊剔粗壶掘京汽第15章+页面CSS技巧运用实例第15章+,有时候还能救急,比如:由于网页上表格限制了宽度,现有的一幅图片放不下,如果强行在<img>标签中修改大小,会影响图片的显示效果,为此需要修改图片本身。不巧的是,美工休假了,同事们都不知道如何使用Photoshop来修改它。在这个时候,可以对图片应用Clip属性,将不符合要求的部分裁剪掉,利用Clip属性对图片进行裁剪痢且殉冬晾犯鸦巾嚏蹦叶辅肪泼躲蹄啦糙闸爹掐忻民威窃帝辈闯涎窖申珍第15章+页面CSS技巧运用实例第15章+,Clip属性还可以对文字进行裁剪,下面介绍一个很有意思的效果。将两段内容相同但颜色不同的文字重合在一起,再通过分别对这些文字设置Clip属性,使得两段文字各自被裁剪的位置不同,合并形成一段上下部分颜色不同的文字。实现了这样的效果。利用Clip属性裁剪文字:多彩文字的效果韧逸镐意泉序琉强侵污