css3简单又实用的5个属性

css3简单又实用的5个属性

ID:34722457

大小:199.18 KB

页数:6页

时间:2019-03-10

css3简单又实用的5个属性_第1页
css3简单又实用的5个属性_第2页
css3简单又实用的5个属性_第3页
css3简单又实用的5个属性_第4页
css3简单又实用的5个属性_第5页
资源描述:

《css3简单又实用的5个属性》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、CSS3简单又实用的5个属性来源:互联网 日期:2012-08-0516:31我并不是在谈论展望全新的CSS3属性,我指的是旧的CSS2中的属性,如:clip,min-height,white-space,curosr和display等一些被所有浏览器广泛支持的属性。因此,千万不要错过这篇文章,因为你可能发现它们竟有如此之大的用途。1、CSSClip剪辑(clip)属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素:你必须指定其position属性为absolute,然后指定相对于元素的top,right,bo

2、ttom,left值。图片剪辑实例(演示)以下示例演示了如何使用clip属性掩盖一张图片。首先,指定

元素为position:relative,然后指定元素为position:absolute,并且根据实际需要设定rect值。.clip{position:relative;height:130px;width:200px;border:solid1px#ccc;}.clipimg{position:absolute;clip:rect(30px165px100px30px);}图像调整尺寸和剪辑(演示)在这个示

3、例中,我将展示如何调整图像尺寸和剪辑图片。素材图片是矩形的,我想将其削减至50%的尺寸,用来创建一个正方形格式的缩略图。因此,我用宽度和高度属性来调整图像,并使用clip剪辑属性予以掩盖。然后用left属性将图片移开左侧15px的距离。.galleryli{float:left;margin:010px00;position:relative;width:70px;height:70px;border:solid1px#000;}.galleryimg{width:100px;height:70px;position:absol

4、ute;clip:rect(085px70px15px);left:-15px;}2、Min-height(演示)min-height属性允许你指定元素的最小高度,适用于需要平衡布局的情况。我将它用于Job面板上,以确保内容区域高于侧边栏。.with_minheight{min-height:550px;}IE6的Min-heighthack注:神奇的IE6原生不支持min-height属性,不过幸好有一个min-heighthack。.with_minheight{min-height:550px;height:auto!im

5、portant;height:550px;}3、White-space(演示)white-space属性指定了元素中空白的处理方式。比如,指定white-space:nowrap会阻止文本自动换行。em{white-space:nowrap;}4、Cursor(演示)如果你改变了按钮的行为,其指针也应该随之改变。比如,当一个按钮不可用时,指针应该改变为默认的箭头,来表明它不可点击。因此,cursor属性在开发Web应用程序时相当有用。.disabled{cursor:default;}.busy{cursor:wait;}.cl

6、ickable:hover{cursor:pointer;}5、Displayinline/block(演示)如果你不知道:块级元素是作为独立的一行来渲染的,而行内元素是在同一行被渲染的。

标签都是块级元素,都是行内元素。通过display:inline或block的方式,你可以重设这些元素的display样式。.blockem{display:block;}.inlineh4,.inlinep{display:inline;}原文链接:http://edu.gi

7、moo.net/a/201208/501e6042ada82.shtml

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。