
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢?

有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢。
后来又有了一种新的方式,使用 :after 伪类动态的嵌入一个用于清除浮动的元素,这种方法和上一种原理一样,不同的只是把这个额外的内容用 CSS 生成,但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证 html 比较干净,所以用得还是比较多的。
阅读全文……

有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢。
后来又有了一种新的方式,使用 :after 伪类动态的嵌入一个用于清除浮动的元素,这种方法和上一种原理一样,不同的只是把这个额外的内容用 CSS 生成,但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证 html 比较干净,所以用得还是比较多的。
一、white-space
可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例。
语法:
white-space : normal | pre | nowrap
取值:
normal: 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre:换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap: 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
阅读全文……
可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例。
语法:
white-space : normal | pre | nowrap
取值:
normal: 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre:换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap: 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
这个教程的挑战是利用多种的混合模式和混合技巧来复制iTune图标。这个教程是个很好的训练来熟练你的混合技巧。软件版本:Illustrator 9.0以上
英语原文:http://www.ndesign-studio.com/resources/tutorials/itune_icon.htm
中文翻译:http://www.water8.cn/
源文件下载:http://www.ndesign-studio.com/resources/tutorials/itune_icon.ai
第一步:绘制基本的形状
开始绘制iTune图标的基本形状。
你可能在其他地方看到过类似的教程,或者知道怎么用Photoshop来做玻璃按钮。不过,这里要告诉你的是在Illustrator(9.0以上版本)里如何仅用3个简单步骤来实现。英语原文:http://www.ndesign-studio.com/reso ... ls/glassy_button.htm
中文翻译:http://www.water8.cn/
源文件下载:http://www.ndesign-studio.com/resources/tutorials/glass_button.ai
第一步:绘制一个矩圆形路径
首先绘制一个圆形路径,用橙色填充。然后复制(Ctrl+C)一个副本,然后粘贴到前面(Ctrl+F),用黄色填充。缩放到40%左右并拖放到大圆的中下方。
本教程教你在Illustrator(9.0以上版本)里如何仅用3个简单步骤来做一张邮票,这个在设计照片边框或者相册封面很有用。英语原文:http://www.ndesign-studio.com/resources/tutorials/stamp.htm
中文翻译:http://www.water8.cn/
源文件下载:http://www.ndesign-studio.com/resources/tutorials/stamp.ai
第一步:绘制一个矩形路径
选择矩形工具,绘制一个矩形,如下图。点击菜单 特效 > 扭曲和变换 > 锯齿。

Copyright ©2005-2008 织梦网·水客厅·www.water8.cn(苏ICP备05063979) All Rights Reserved
Processed in 0.343750 second(s) , 5 queries
Processed in 0.343750 second(s) , 5 queries











