为了哀悼日,网页颜色黑白CSS代码

昨天又是哀悼日,全国停止一些娱乐活动,哀悼在舟曲泥石流中死去的生命。

如果没有记错,这已经是继2008年“5·12”地震以来的第三次哀悼日了,默默的感觉到以后的哀悼日可能会越来越多,所以找来这些代码,以备不时之需。

以下是CSS滤镜代码,两种都行,如果你还不知道添加在哪里,就请跳过这篇文章好了。

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}  

*{filter:gray; color:gray;}  

网页标准的协议也很重要,下面的标准最常用,否则可能无效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

有一些网站中flash的颜色不能被CSS滤镜控制,可以在flash代码的<object>和</object>之间插入

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

PS:以上CSS滤镜代码可能只在IE下有效,其他浏览器未验证。

CSS 样式命名规则(仅供参考)

在其他地方看到的,不是很完整,先放在这里,有空我来补充一下。

1.样式命名
外 套:  wrap
主导航:  mainnav
子导航:  subnav
页 脚:  footer
整个页面: content
页 眉:  header
页 脚:  footer
标 记:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar

继续阅读

引用块(Blockquote)CSS效果

blockquote标签表示引用块,这个大家都知道。Z-Blog后台使用的 fckeditor 2.5 就有这个标签的按钮,个人曾经认为这是个鸡肋按钮。但是只要定义两个简单的CSS,就可以大展拳脚了。还是看效果先:

Blockquote在blog和论坛中使用的比较多,很多网站都可以看到。使用 <blockquote>标签可以在屏幕上用分离的块显示大段的引用。与行内引用不同,块引用可以包含块级元素,诸如<p>、<table>等。多数浏览器通常改变引用部分的页边界,以和周围的文本区分开。可选的cite属性提供了引用来源的URL,这一属性尽管未广泛被各种浏览器支持,但能使用户方便的验证引用的正确性。Blockquote标签是成对出现的,以<blockquote>开始,以</blockquote>结束,常用属性如下:
Common – 一般属性

继续阅读

根据时间段自动切换你的站点CSS风格

网站能切换几套CSS风格早已不是什么新鲜事了。大家也都知道怎么去弄。今天发现一个有意思的站点http://www.leemunroe.com/

同样是切换风格。不过他做了一点小小的调整。站点会根据当时的时间自动调整站点风格。作者为站点制作了早上、下午、夜晚三套皮肤,主要是分别制作了背景。12点以前系统会使用早上的皮肤,过了12点,站点会自动替换成下午的风格,5点后则替换成夜晚的风格。

主要的功能实现是靠在头部的这段判断代码,很容易理解。有兴趣的朋友不妨试试。

PHP版代码如下:

以下是代码片段:
<link rel=”stylesheet” type=”text/css”
href=”<?php $hour = date(“H”); if ($hour < 12) echo “morning.css”; elseif ($hour < 17) echo “day.css”; else echo “night.css”; ?>
” />

ASP版代码如下: 继续阅读

CSS实现半透明效果

设计网页或者制作blog模板的时候,往往会用到让某部分实现透明或者半透明的效果,这时候我们该怎么办呢?

在IE中需要通过”filter”来定义透明度”opacity”。

而在Firefox中是可以直接解析”opacity”,所以如果要使得这个效果在两种浏览器中都得到支持,需要把两种设定都加进去。

针对IE的设定:this.filters.alpha.opacity=50
针对
Firefox的设定:this.style.MozOpacity=0.5

大家可以直接用下面代码给图片定义,只须修改图片地址就能实现上图的效果。其实不只图片可以实现这个CSS滤镜,网页也是可以的!

以下是代码片段:
<img alt=”powerbookg4.jpg” src=”archives/images/powerbookg4.jpg” width=”250″ height=”60″ style=”-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;” onmouseover=”this.style.MozOpacity=1;
this.filters.alpha.opacity=100″ onmouseout=”this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50″>

继续阅读