欢迎来到天天文库
浏览记录
ID:34722457
大小:199.18 KB
页数:6页
时间:2019-03-10
《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属性掩盖一张图片。首先,指定
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
此文档下载收益归作者所有