CSS文件中图片Referer的判断差异

通常,我们的页面都是引用了很多样式文件,同时样式文件给我们的页面设置了很多背景图片。但是这里有个小细节容易忽视。图片的referer来源处理存在浏览器的差异。 通常,我们的样式和图片的结构如下           user.qzone.qq.com/             – a.css                 |- background-image:url(b.jpg)   经过测试ie和safari以及opera,a.css样式中的b.jpg背景图片的样式referer来源是站点的主域名...

read more..

用CSS hack区别不同的浏览器

区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; 注:IE都能识别*;标准浏览器(如FF)不能识别*; IE6能识别*,但不能识别 !important, IE7能识别*,也能识别!i...

read more..

轻松设置的width属性且不换行

span标记的样式设定width属性,会发现不会产生效果。 如果设置display:block,width属性生效,但是此时的span跟div一样了。 如果设置display:inline-block,则span并列在同行,而且width属性生效。 元素display属性的常见值说明: block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。 inline:内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行。 inline-block:将对象呈...

read more..

最新流行网站配色方案

演示:http://css.touchboy.cn/example/web-color.html [coolcode lang=”css”] web2.0 color body{ margin:20px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:12px; } .style1{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #96C2F1; background-color: #EFF7FF } .style1 h5{ margin: 1px; background-color: #B...

read more..

13个稀奇的 Javascript CSS 菜单 (一)

每个 web 设计者都希望设计出富有创造性的导航菜单。这里为您呈现 13 个漂亮的 Javascript CSS 菜单,你可以通过修改来设计出符合自己意愿的个性菜单。 1) 性感滑动菜单(Sexy Sliding Menu) - 一种由 Mootools 制作,另外一种使用 scrip.aculo.us 制作的。 演示:Mootols 版本 演示:Script.aculo.us 版本 2) FastFind Menu Script - 此菜单使用 jQuery 库制作,基于动态 Ajax 相应,嵌套式菜单。 ...

read more..

FIREFOX下背景层的自适应高度

在IE下很容易实现高度的自适应,但在FF下如果DIV层里包含的是层,而不是直接填充内容的话,是不会自动适应高度的,这在我们设置背景层时经常用到的,下面是一个例子: [coolcode] [/coolcode] container作为最外层,在IE下可以自适应,但在FF下就只有main层与sidebar层可以,苦思良久,也问了许多朋友,最后还是从网上搜到答案,很简单: 只需定义#container { display:table}就可以了,原理是和以前的...

read more..

101 个经典CSS技巧和实例

In this article, we’ve put together the top 101 most powerful links of CSS tips, tutorials and examples which most recently has gained recognition. Many people use CSS but probably aren’t using it to it’s best capability. The list below we’ll help find over one hundred and one different ways to get you to take advantage of CSS to serve your purpose. CSS-Techniques You Coul...

read more..