存档

‘css’ 标签的文章

CSS white-space 使用技巧

November 25th, 2010 36 条评论

HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。在默认情况下,HTML 源码中的空白符均被显示为空格,并且连续的多个空白符会被合并为一个。

有些时候,我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现,或者需要源码中的换行符能起到真正的换行作用。于是,我们发现了 <pre> 标签,它可以真实还原它内部文本的空白符的真实情况。

随着对 CSS 的了解不断深入,我们发现,原来这一切都是 white-space 属性在安排。<pre> 元素之所以如此神奇,是因为它自身具有 {white-space: pre;} 这一默认样式。

下表列出了white-space 这一CSS属性可能取的值:

white-space 属性值一览表

属性值 空白符 换行符 自动换行 最早出现于
normal 合并 忽略 允许 CSS 1
nowrap 合并 忽略 不允许 CSS 1
pre 保留 保留 不允许 CSS 1
pre-wrap 保留 保留 允许 CSS 2.1
pre-line 合并 保留 允许 CSS 2.1
inherit 继承父元素 继承父元素 继承父元素

(..More)

CSS页面切换效果资料

October 13th, 2009 2 条评论

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=n)">
其中,n表示的就是下面的数,n取不同的值,对应有不同的效果

0、Box in
1、Box out
2、Circle in
3、Circle out
4、Wipe up

(..More)

用CSS的float属性创建三栏布局网页的方法

September 18th, 2009 0 条评论

三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。

(..More)

用css实现网页下拉菜单

September 18th, 2009 0 条评论

这款下拉菜单栏的实现非常简单,没有用到复杂的JS代码,完全依靠css代码来实现的,只需进行简单的修改变换就可以了,以下是代码实例:

html代码:

(..More)

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks

September 5th, 2009 1 条评论
可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks: .test{ color:/*\**/#00f\9; /* IE8 */ } .test, .test:-moz-any-link{ color:#f60; /* Firefox2 */ } .test, .test:default{ color:#000; /* Firefox3 */ *color:#f00; /* IE7 */ _color:#0f0; /* IE6 */ }

(..More)