仓酷云

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

[DIV+CSS] 带来一篇CSS3的复杂又有用的3个属性

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

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

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

x
不管你用什么工具软件制作网页,都有在有意无意地使用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值。
  1. .clip{position:relative;height:130px;width:200px;border:solid1px#ccc;}.clipimg{position:absolute;clip:rect(30px165px100px30px);}
复制代码
图象调剂尺寸和剪辑(演示)
在这个示例中,我将展现怎样调剂图象尺寸和剪辑图片。素材图片是矩形的,我想将其减少至50%的尺寸,用来创立一个正方形格局的缩略图。因而,我用宽度和高度属性来调剂图象,并利用clip剪辑属性予以掩饰。然后用left属性将图片移开左边15px的间隔。
  1. .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面板上,以确保内容地区高于侧边栏。
  1. .with_minheight{min-height:550px;}
复制代码
IE6的Min-heighthack
注:奇妙的IE6原生不撑持min-height属性,不外幸亏有一个min-heighthack。
  1. .with_minheight{min-height:550px;height:auto!important;height:550px;}
复制代码
3、White-space(演示)
white-space属性指定了元素中空缺的处置体例。好比,指定white-space:nowrap会制止文本主动换行。
  1. em{white-space:nowrap;}
复制代码
4、Cursor(演示)
假如你改动了按钮的举动,其指针也应当随之改动。好比,当一个按钮不成用时,指针应当改动为默许的箭头,来标明它不成点击。因而,cursor属性在开辟Web使用程序时相称有效。
  1. .disabled{cursor:default;}.busy{cursor:wait;}.clickable:hover{cursor:pointer;}
复制代码
5、Displayinline/block(演示)
假如你不晓得:块级元素是作为自力的一行来衬着的,而行内元素是在统一行被衬着的。<div>,<h1>和<p>标签都是块级元素,<em>,<span>,<strong>都是行内元素。经由过程display:inline或block的体例,你能够重设这些元素的display款式。
  1. .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样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
深爱那片海 该用户已被删除
5#
发表于 2015-2-9 22:11:46 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
莫相离 该用户已被删除
6#
发表于 2015-2-28 00:44:08 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
兰色精灵 该用户已被删除
7#
发表于 2015-3-9 18:43:22 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
若天明 该用户已被删除
8#
发表于 2015-3-17 01:11:13 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
若相依 该用户已被删除
9#
发表于 2015-3-23 16:20:53 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-22 20:22

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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