|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
网页制造poluoluo文章简介:这篇文章先容了5个有用的CSS属性。你应当很熟习,但极可能很少会利用到。我并非在议论瞻望全新的CSS3属性,我指的是旧的CSS2中的属性,如:clip,min-height,white-space,curosr和display等一些被一切扫瞄器普遍撑持的属性。因而,万万不要错过这篇文章
这篇文章先容了5个有用的CSS属性。你应当很熟习,但极可能很少会利用到。我并非在议论瞻望全新的CSS3属性,我指的是旧的CSS2中的属性,如:clip,min-height,white-space,curosr和display等一些被一切扫瞄器普遍撑持的属性。因而,万万不要错过这篇文章,由于你大概发明它们竟有云云之年夜的用处。
1、CSSClip
剪辑(clip)属性就像一个面具。它同意你利用矩形掩饰页面元素的内容。要剪辑一个元素:你必需指定其position属性为absolute,然后指定相对元素的top,right,bottom,left值。
图片剪辑实例(演示)
以下示例演示了怎样利用clip属性掩饰一张图片。起首,指定<div>元素为position:relative,然后指定<img>元素为position:absolute,而且依据实践必要设定rect值。
- .clip{position:relative;height:130px;width:200px;border:solid1px#ccc;}.clipimg{position:absolute;clip:rect(30px165px100px30px);}
复制代码 图象调剂尺寸和剪辑(演示)
在这个示例中,我将展现怎样调剂图象尺寸和剪辑图片。素材图片是矩形的,我想将其减少至50%的尺寸,用来创立一个正方形格局的缩略图。因而,我用宽度和高度属性来调剂图象,并利用clip剪辑属性予以掩饰。然后用left属性将图片移开左边15px的间隔。
- .galleryli{float:left;margin:010px00;position:relative;width:70px;height:70px;border:solid1px#000;}.galleryimg{width:100px;height:70px;position:absolute;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!important;height:550px;}
复制代码 3、White-space(演示)
white-space属性指定了元素中空缺的处置体例。好比,指定white-space:nowrap会制止文本主动换行。
4、Cursor(演示)
假如你改动了按钮的举动,其指针也应当随之改动。好比,当一个按钮不成用时,指针应当改动为默许的箭头,来标明它不成点击。因而,cursor属性在开辟Web使用程序时相称有效。
- .disabled{cursor:default;}.busy{cursor:wait;}.clickable:hover{cursor:pointer;}
复制代码 5、Displayinline/block(演示)
假如你不晓得:块级元素是作为自力的一行来衬着的,而行内元素是在统一行被衬着的。<div>,<h1>和<p>标签都是块级元素,<em>,<span>,<strong>都是行内元素。经由过程display:inline或block的体例,你能够重设这些元素的display款式。
- .blockem{display:block;}.inlineh4,.inlinep{display:inline;}
复制代码 英文原稿:5Simple,ButUsefulCSSProperties|WebDesignWall
</p>
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。 |
|