切图

 找回密码
 立即注册

QQ登录

只需一步,快速开始

北北设计网站切图广告位招租
查看: 336|回复: 0

CSS教程:制作网页中常用的5个CSS属性

[复制链接]
发表于 2016-6-26 10:00:28 | 显示全部楼层 |阅读模式

今天说的这5个CSS属性,你可能会很熟悉,但是你可能会很少会去使用.这个教程所讲得不是关于css3的属性,而是依旧使用CSS2属性来说明,这些属性广泛的被各种浏览器所支持:clip,min-height,white-space,cursor和display.所以不要错过这个教程,因为你会发现他们是多么的有用.

1.CSS Clip

Clip属性就像一个遮蔽物.它可以把元素内容不要的部分遮盖起来.首先要指定元素的位置,以相对定位:position:absolute.然后指定相对于元素的值:top,right,bottom,left.

使用clip做演示

下面用图片来举个例子来说明如何使用这个属性.首先给div做相对定位,然后再给图像指定绝对位置.

========================
.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

========================

使用clip来演示如保剪辑

在这个例子里演示了如何使用clip来重设图像的位置和尺寸.原图像的大小如图所示.现在要把这个图像放到一个正方形的容器里,并尺寸为原来的一半.现在来看如何来实现这个效果,首先用width,height来设置图像的高度和宽度,然后使用clip来剪辑图像.并让图像相对左边15px.

=====================
.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属性允许对一个元素指定最小的高度.当你在平衡布局的时候你会发现它是多么的有用.我用这个属性来给我的网站理指定一个大小.

=======================
.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会强行换行.

=====================
em {
  white-space: nowrap;
}


=====================

4. Cursor

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

========================
.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}


========================

5. Display inline / block

block元素占据一行,而inline则会在同一行显示.<div>,<h1>,<p>标签是block元素.<em>,<span>,<stong>标签是内联元素.但是你可以通过display:inline/block来改变元素的内联和块属性.

=======================
.block em {
  display: block;
}

.inline h4, .inline p {
  display: inline;
}

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|切图|A6切图网

GMT+8, 2020-1-30 05:07 , Processed in 1.105946 second(s), 22 queries .

快速回复 返回顶部 返回列表