|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
网页制造poluoluo文章简介:5个复杂,但很有用的CSS属性.
这5个有效的css属性大概你是对照熟习的,可是很少利用到它们。我这里会商的不是css3的新属性
。我提到的都是被一切扫瞄器撑持的css2属性好比:clip、min-height、white-space、cursor和display。万万别错过这篇文章,由于你会惊奇的发明他们是很有效的。
1、cssclip(裁切)
clip裁切这个属性有点像是遮罩。它同意你用特定的外形遮罩响应的内容。裁切某元素之前,你必需先给该元素指定相对定位属性,然后给它的高低摆布赋值。
图片裁切举例(演示)
在接上去的这个例子内里,次要展现怎样给一个图片使用裁切属性。起首,指定div元素绝对定位,然后给图片付与相对定位属性和响应的属性值。
代码以下:
.clip{
position:relative;
height:130px;
width:200px;
border:solid1px#ccc;
}
.clipimg{
position:absolute;
clip:rect(30px165px100px30px);
}
图片调剂和裁切
在这例子内里,我们将展现你怎样调剂图片巨细并裁切图片。这个图片的原始外形是长方形的,我想把图片减少一半后在正方形里展现。我用width、height属性改动图片巨细,然后经由过程裁切属性让其显现为正方形,同时给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最小高度(演示)
最小高度属性同意你给某个元素指定最小高度,关于网站结构来讲它是非常有效的。我就在我的jobboard的内容地区使用了最小高度,确保内容地区的高度比边栏要高些儿。
代码以下:
.with_minheight{min-height:550px;}
min-height(最小高度)在ie6上面的bug成绩
注重:ie6是不撑持min-height的,可是一下办法能够办理这个ie6bug成绩。
.with_minheight{
min-height:550px;
height:auto!important;
height:550px;
}
3、White-space折行(演示)
White-space属性指定某一元素是怎样主动折行的。好比,给一元素指定White-space属性后,假如一行内的空间没法容下该元素的话,它将主动换到下一行。
代码以下:em{white-space:nowrap;}
4、光标(演示)
假如您变动按钮的举动,同时你也应当改动Cursor光标。比方,当一个按钮被禁用时,光标应改成默许(箭头),以标明它是没法点击因而,cursor属性关于收集使用程序开辟长短常有效的。
代码以下:
.disabled{cursor:default;}
.busy{cursor:wait;}
.clickable:hover{cursor:pointer;}
5、Displayinline/block(演示)
块状元素是本人独自在一行的,而内联元素则会呈现统一行内里。div、h1、p标签是默许的块状元素。em、span和strong则是内联元素。你能够改动display的显现款式display:inline或display:block;改动它们的默许形态。
代码以下:
.blockem{display:block;}
.inlineh4,.inlinep{display:inline;}
中文原文:5个复杂,但很有用的css属性
英文原文:5Simple,ButUsefulCSSProperties
</p>
CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。 |
|