仓酷云

标题: 给大家带来CSS教程:制造网页中经常使用的5个CSS属性 [打印本页]

作者: 若相依 时间: 2015-1-15 23:31
标题: 给大家带来CSS教程:制造网页中经常使用的5个CSS属性
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
网页制造Poluoluo文章简介：明天说的这5个CSS属性,你大概会很熟习,可是你大概会很少会往利用.这个教程所讲得不是关于CSS3的属性,而是仍旧利用CSS2属性来讲明,这些属性普遍的被各类扫瞄器所撑持:clip,min-height,white-space,cursor和display.以是不要错过这个教程,由于你会发明他们是何等的有效.
明天说的这5个CSS属性,你大概会很熟习,可是你大概会很少会往利用.这个教程所讲得不是关于CSS3的属性,而是仍旧利用CSS2属性来讲明,这些属性普遍的被各类扫瞄器所撑持:clip,min-height,white-space,cursor和display.以是不要错过这个教程,由于你会发明他们是何等的有效.

1.CSSClip

Clip属性就像一个掩蔽物.它能够把元素内容不要的部分粉饰起来.起首要指定元素的地位,以绝对定位:position:absolute.然后指定相对元素的值:top,right,bottom,left.

利用clip做演示

上面用图片来举个例子来讲明怎样利用这个属性.起首给div做绝对定位,然后再给图象指定相对地位.

========================
.clip{
position:relative;
height:130px;
width:200px;
border:solid1px#ccc;
}
.clipimg{
position:absolute;
clip:rect(30px165px100px30px);
}

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

利用clip来演示如保剪辑

在这个例子里演示了怎样利用clip来重设图象的地位和尺寸.原始图片像的巨细如图所示.如今要把这个图象放到一个正方形的容器里,并尺寸为本来的一半.如今来看怎样来完成这个效果,起首用width,height来设置图象的高度和宽度,然后利用clip来剪辑图象.并让图象绝对右边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属性同意对一个元素指定最小的高度.当你在均衡结构的时分你会发明它是何等的有效.我用这个属性来给我的网站理指定一个巨细.

=======================
.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.Displayinline/block

block元素占有一行,而inline则会在统一行显现.<div>,<h1>,<p>标签是block元素.<em>,<span>,<stong>标签是内联元素.可是你能够经由过程display:inline/block来改动元素的内联和块属性.

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

.inlineh4,.inlinep{
display:inline;
}
</p>
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

作者: 谁可相欹 时间: 2015-1-17 23:07
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 爱飞 时间: 2015-2-2 21:47
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: admin 时间: 2015-2-8 07:45
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 小女巫 时间: 2015-2-25 02:10
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 海妖 时间: 2015-3-7 16:10
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 柔情似水 时间: 2015-3-15 09:52
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 灵魂腐蚀 时间: 2015-3-22 01:09
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

欢迎光临仓酷云 (http://ckuyun.com/)