灵魂腐蚀 发表于 2015-1-15 23:22:55

带来一篇CSS3的复杂又有用的3个属性

不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
网页制造poluoluo文章简介:这篇文章先容了5个有用的CSS属性。你应当很熟习,但极可能很少会利用到。我并非在议论瞻望全新的CSS3属性,我指的是旧的CSS2中的属性,如:clip,min-height,white-space,curosr和display等一些被一切扫瞄器普遍撑持的属性。因而,万万不要错过这篇文章
这篇文章先容了5个有用的CSS属性。你应当很熟习,但极可能很少会利用到。我并非在议论瞻望全新的CSS3属性,我指的是旧的CSS2中的属性,如:clip,min-height,white-space,curosr和display等一些被一切扫瞄器普遍撑持的属性。因而,万万不要错过这篇文章,由于你大概发明它们竟有云云之年夜的用处。
1、CSSClip
剪辑(clip)属性就像一个面具。它同意你利用矩形掩饰页面元素的内容。要剪辑一个元素:你必需指定其position属性为absolute,然后指定相对元素的top,right,bottom,left值。

图片剪辑实例(演示)
以下示例演示了怎样利用clip属性掩饰一张图片。起首,指定<div>元素为position:relative,然后指定<img>元素为position:absolute,而且依据实践必要设定rect值。

.clip{position:relative;height:130px;width:200px;border:solid1px#ccc;}.clipimg{position:absolute;clip:rect(30px165px100px30px);}图象调剂尺寸和剪辑(演示)
在这个示例中,我将展现怎样调剂图象尺寸和剪辑图片。素材图片是矩形的,我想将其减少至50%的尺寸,用来创立一个正方形格局的缩略图。因而,我用宽度和高度属性来调剂图象,并利用clip剪辑属性予以掩饰。然后用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(演示)
min-height属性同意你指定元素的最小高度,合用于必要均衡结构的情形。我将它用于Job面板上,以确保内容地区高于侧边栏。

.with_minheight{min-height:550px;}IE6的Min-heighthack
注:奇妙的IE6原生不撑持min-height属性,不外幸亏有一个min-heighthack。
.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属性在开辟Web使用程序时相称有效。

.disabled{cursor:default;}.busy{cursor:wait;}.clickable:hover{cursor:pointer;}5、Displayinline/block(演示)
假如你不晓得:块级元素是作为自力的一行来衬着的,而行内元素是在统一行被衬着的。<div>,<h1>和<p>标签都是块级元素,<em>,<span>,<strong>都是行内元素。经由过程display:inline或block的体例,你能够重设这些元素的display款式。

.blockem{display:block;}.inlineh4,.inlinep{display:inline;}英文原稿:5Simple,ButUsefulCSSProperties|WebDesignWall
</p>
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。

第二个灵魂 发表于 2015-1-17 22:21:42

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。

谁可相欹 发表于 2015-1-25 21:57:25

可以使用 CSS 检查工具进行设计。

透明 发表于 2015-2-4 10:34:31

布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。

深爱那片海 发表于 2015-2-9 22:11:46

Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

莫相离 发表于 2015-2-28 00:44:08

所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.

兰色精灵 发表于 2015-3-9 18:43:22

直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

若天明 发表于 2015-3-17 01:11:13

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

若相依 发表于 2015-3-23 16:20:53

不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
页: [1]
查看完整版本: 带来一篇CSS3的复杂又有用的3个属性