电脑软硬件应用网
当前位置： 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文
[组图]制作网页中常用的5个CSS属性
制作网页中常用的5个CSS属性
2009-12-4 9:06:00　　文/ximumu 　　出处:电脑软硬件应用网 　　
今天说的这5个CSS属性,你可能会很熟悉,但是你可能会很少会去使用.这个教程所讲得不是关于CSS3的属性,而是依旧使用CSS2属性来说明,这些属性广泛的被各种浏览器所支持:clip,min-height,white-space,cursor和display.所以不要错过这个教程,因为你会发现他们是多么的有用. 1.CSS Clip Clip属性就像一个遮蔽物.它可以把元素内容不要的部分遮盖起来.首先要指定元素的位置,以相对定位:position:absolute.然后指定相对于元素的值:top,right,bottom,left. 使用clip做演示
css
下面用图片来举个例子来说明如何使用这个属性.首先给div做相对定位,然后再给图像指定绝对位置. ======================== .clip { position: relative; height: 130px; width: 200px; border: solid 1px #ccc; } .clip img { position: absolute; clip: rect(30px 165px 100px 30px); }
css
======================== 使用clip来演示如保剪辑 在这个例子里演示了如何使用clip来重设图像的位置和尺寸.原图像的大小如图所示.现在要把这个图像放到一个正方形的容器里,并尺寸为原来的一半.现在来看如何来实现这个效果,首先用width,height来设置图像的高度和宽度,然后使用clip来剪辑图像.并让图像相对左边15px.
css
===================== .gallery li { float: left; margin: 0 10px 0 0; position: relative; width: 70px; height: 70px; border: solid 1px #000; } .gallery img { width: 100px; height: 70px; position: absolute; clip: rect(0 85px 70px 15px); left: -15px; } ====================== 2. Min-height min-height属性允许对一个元素指定最小的高度.当你在平衡布局的时候你会发现它是多么的有用.我用这个属性来给我的网站理指定一个大小.
css

======================= .with_minheight { min-height: 550px; } ======================= 在IE6中的使用 在IE6中这个属性不支持,这里有一个招数. ====================== .with_minheight { min-height:550px; height:auto !important; height:550px; } ======================

3. White-space white-space属性设置或检索对象内空格的处理方式.如white-space:nowrap会强行换行.

css

===================== em { white-space: nowrap; } ===================== 4. Cursor 如果你更改了按扭的行为,那么你也应该改变光标的行为.如:当一个按扭被禁用的时候,光标应该项是默认的(箭头),来表示按扭是无法点击的.所以,cursor属性在网络应用程序开发非常有用.

css

======================== .disabled { cursor: default; } .busy { cursor: wait; } .clickable:hover { cursor: pointer; } ======================== 5. Display inline / block block元素占据一行,而inline则会在同一行显示.

,

,

标签是block元素.,,标签是内联元素.但是你可以通过display:inline/block来改变元素的内联和块属性.

css
======================= .block em { display: block; } .inline h4, .inline p { display: inline; }
  • 上一篇文章：

  • 下一篇文章：
    • 最新热点 最新推荐 相关文章
    CSS伪类选择器nth-child()
    css3教程:background属性调整增强
    css教程：CSS3 Media Queries 详解
    CSS 类名的长命名和短命名
    CSS实例教程:非浮动区域设置宽度
    如何使用css约束一个层不可见？
    CSS的list-style解释
    小议使用“完整”的CSS的缺点
    CSS中的相对定位与绝对定位详解
    实例使用DIV+CSS制作圆角边框加阴影…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号