仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1030|回复: 8
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS教程:简单疏忽的可是很熟习的CSS属性

[复制链接]
小妖女 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:25:07 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
谁可相欹 该用户已被删除
沙发
发表于 2015-1-17 22:37:20 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
再现理想 该用户已被删除
板凳
发表于 2015-1-26 11:31:25 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
再见西城 该用户已被删除
地板
发表于 2015-2-4 19:49:16 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
深爱那片海 该用户已被删除
5#
发表于 2015-2-10 06:48:38 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
兰色精灵 该用户已被删除
6#
发表于 2015-3-1 03:25:01 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
莫相离 该用户已被删除
7#
发表于 2015-3-10 12:44:19 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
变相怪杰 该用户已被删除
8#
发表于 2015-3-17 07:25:38 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
admin 该用户已被删除
9#
发表于 2015-3-24 03:00:00 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 07:58

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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