2008-04
22

李白写过“法暮苍山兰舟家”吗?

有这样一首诗在网上流传已久,传说是李白一千多年前写的,网龄不算太短的朋友们估计都见过:

日暮苍山兰舟小,

本无落霞缀清泉。

去年叶落缘分定,

死水微漾人却亡。

这首诗每句的第一个字和最后一个字连起来读,就成了“日本去死,小泉定亡”。最近由于众所周知的原因,法国和家乐福成为了国人的众矢之的,矛头已经盖过日本。李白得知这个消息之后,不辞辛苦从地下爬出来,对这首诗稍作修改,于是我们有幸见到了“法国家乐福版”的新诗:

法暮苍山兰舟家,

国无落霞缀清乐。

去年叶落缘分福,

死水微漾人却亡。

这首诗的“日本版”尽管毫不押韵,但字面意思还勉强可以读通,但“法国版”就显得太粗陋了,语句不通,没有押韵,没有对仗。这种毫无技术含量的诗是诗仙李白的作品吗?

据考证,“日本版”出自小说《侠客梦》中的“第四卷:江湖搏命 第一百零一章 日暮苍山兰舟小”,作者为燕随心,和李白没有任何关系,而且原诗中的最后一个字不是“亡”而是“忘”,有兴趣的朋友可以自行搜索。

爱国没有错,但爱国并不是骂人。自己想骂人却还要借别人(尤其是古人)的口,就更可悲了。

2008-04
15

对Web标准最常见的5个误解

这是在 CSS Globe 上看到的一篇文章,个人感觉对理解 Web 标准和 Web 开发(尤其是前端开发)很有启发意义,特翻译分享,并加入了一些我的想法。原文地址:5 Most Common Web Standards Misconceptions

当开始学习 Web 标准的时候,我们会听到很多关于 Web 标准的理论,这些理论不一定都是正确的,有些反而可能会误导我们。下面是一些最常见的误解。

1、Web 标准 = Validation(验证)

W3C 提供的 HTML 标记验证和 CSS 验证对学习 Web 标准和 Web 开发是很重要的,它不但能够指出代码中的错误,还能让我们学会怎样去改正错误。但是,仅仅通过验证并不意味着你的页面符合 Web 标准。我曾经把 W3C 的验证服务和英语拼写检查工具做过比较。如果你在拼写检查工具中输入这样一个句子:

Dog fox brown lazy over jump.

拼写检查工具并不会发现任何错误,因为单词拼写全是正确的。但是,这句话有意义吗?当你没有为你的页面逻辑结构使用合适的 HTML 元素时,不正和上面的那个例子一样吗?机器就是机器,它可以检测出你的语法、属性、嵌套等的正误,但是它无法了解你要表达的内容的本质。这就是 Web 语义化(semantic)的重要性。

2、Web 标准 = CSS

CSS 是一种样式单,它是一个让页面看起来更加美观的(强大的)工具,而且,CSS 也是 Web 标准的一个重要部分。但是,看看那些基于表格布局,tr、td 等标记层层嵌套如同噩梦一般的页面,你会发现它们也在通过各种方法使用着 CSS,那么,这些页面符合 Web 标准吗?

Web 标准并不只是技术,当然更不只是 CSS,而是你怎样去使用它。一个相对标准的页面,即使剥离了 CSS,它仍然应该是可读的,层次结构清晰的。

3、Web 标准 = No Tables

当从表格布局转变到 CSS 布局之后,很多开发者开始拒绝在任何情况下使用表格,他们认为“Tables are evil”。

对我来说,没有任何一个 HTML 元素是 evil 的。它们是被一群非常聪明的人发明的,每一个元素都有它的目的和存在的意义。什么时候应该使用表格,这又涉及到了 Web 语义化的问题,如果你要在页面中显示表格数据(比如日历表、统计表等),那么,表格就是你的最佳选择。

4、Web 标准 = Divs

过度使用 div,是在刚从表格布局转变到 CSS 布局的开发者中很常见的问题,我曾经也经历过。我们经常可以看到这种说法:“div+css布局”,似乎使用了 div 就是好的,就是符合 Web 标准的。实际上有些时候,你只是简单地使用 div 代替了表格,仅此而已。你最终得到的还是复杂的、难以读懂的、层层叠叠的标记,就像以前一样,只是 div 代替了以前的 table、tr、td,并且把 CSS 文件增大了几倍而已。

你需要改变的不仅仅是在页面中充当容器的元素,而是整体的结构和理念。符合 Web 标准需要走一条很长的路,好在这条路是充满阳光的,我愿意走下去。

5、Web 标准 = No IE

我知道你很可能和我一样痛恨 IE,但是,Web 标准的观点是实现跨平台、跨浏览器的页面访问,更重要的是,大多数用户都在使用 IE。因此,我们不能抛弃 IE,尽管它不是一个符合标准的浏览器。

所以,不要在开发中忽视 IE 下的调试,因为毫无疑问会有用户在使用 IE,你迟早都必须面对它。骂完 IE 以后,还是好好想想怎么对付它吧。

2008-04
11

[友情宣传]第一届“游人文笔会”火热开幕

游人网第一届“游人文笔会”,本届文笔会为魔幻主题的小说接龙大赛。详情请见这里

奖品很丰富,目前主办方只公布了第一章的奖品:OCZ DDR2 1G 内存条,后续奖品暂时保密。喜欢写游戏小说的同学们开始行动吧。

2008-04
09

CSS裸奔节

总统博客得知,今天(2008年4月9日)是第三届 CSS 裸奔节这里是中文版介绍

CSS 裸奔,顾名思义,就是把网页中的 CSS 移除,把页面最原始的表现呈现在访问者面前。这个活动意在推动 Web 标准,倡导使用结构良好、语义明确的 XHTML 构建网页。这样的网页,即便没有 CSS 的支持,层次结构依然清晰明了,只是欠缺美观。

从现在开始,我也开始参与 CSS 裸奔了,除了少数插件的 CSS 不方便移除之外,主体的 CSS 都移除了。网站原形毕露,看起来另有一番滋味吧。活动持续一天,明天即将恢复原状。

2008-04
09

JavaScript下拉菜单

去年我曾经写过一篇 CSS 下拉菜单,其中完全只使用 CSS 实现了导航条鼠标悬停下拉菜单的效果(演示地址)。但是只用 CSS 实现起来比较麻烦,代码较多,而且为了浏览器的兼容性不得不使用了两个 CSS 文件,所以我把它叫做“探究”,实用性并不强。

最近我从 blog 的流量统计中发现,很多网友通过搜索“JS 下拉菜单”关键字访问到了我的那篇文章。不过很遗憾,那篇文章和 JavaScript 一点关系都没有,有误导网友之嫌。所以,昨天我花了一点时间把原来的代码做了一点修改,搞了一个 JS 版下拉菜单。其实用 JS 实现下拉菜单比 CSS 简单多了,因为各个浏览器之间对 JS 支持的差异相比 CSS 来说要小一些,不需要花那么多心思用在对付浏览器上。如果 HTML 的结构良好,只需要很少的 JS 代码即可实现,而且可以实现多级下拉菜单的效果(我的示例中给出了二级下拉菜单,可以根据需要按照原来的 HTML 结构逐级添加)。

演示地址

页面源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<title>JavaScript下拉菜单</title>
    
<style type="text/css">
        * {
            padding:0;
            margin:0;
        }
        body {
            font-family:verdana, sans-serif;
            font-size:small;
        }
        #navigation, #navigation li ul {
            list-style-type:none;
        }
        #navigation {
            margin:20px;
        }
        #navigation li {
            float:left;
            text-align:center;
            position:relative;
        }
        #navigation li a:link, #navigation li a:visited {
            display:block;
            text-decoration:none;
            color:#000;
            width:120px;
            height:40px;
            line-height:40px;
            border:1px solid #fff;
            border-width:1px 1px 0 0;
            background:#c5dbf2;
            padding-left:10px;
        }
        #navigation li a:hover {
            color:#fff;
            background:#2687eb;
        }
        #navigation li ul li a:hover {
            color:#fff;
            background:#6b839c;
        }
        #navigation li ul {
            display:none;
            position:absolute;
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
        #navigation li ul li ul {
            display:none;
            position:absolute;
            top:0px;
            left:130px;
            margin-top:0;
            margin-left:1px;
            width:120px;
        }
    
</style>
    
<script type="text/javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
    
</script>
</head>
<body>
    
<ul id="navigation">
        
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            
<a href="#">栏目1</a>   
            
<ul>
                
<li><a href="#">栏目1->菜单1</a></li>
                
<li><a href="#">栏目1->菜单2</a></li>
                
<li><a href="#">栏目1->菜单3</a></li>
                
<li><a href="#">栏目1->菜单4</a></li>
            
</ul>
        
</li>
        
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            
<a href="#">栏目2</a>   
            
<ul>
                
<li><a href="#">栏目2->菜单1</a></li>
                
<li><a href="#">栏目2->菜单2</a></li>
                
<li><a href="#">栏目2->菜单3</a></li>
                
<li><a href="#">栏目2->菜单4</a></li>
                
<li><a href="#">栏目2->菜单5</a></li>
            
</ul>
        
</li>
        
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            
<a href="#">栏目3</a>   
            
<ul>
                
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    
<a href="#">栏目3->菜单1</a>
                    
<ul>
                        
<li><a href="#">菜单1->子菜单1</a></li>
                        
<li><a href="#">菜单1->子菜单2</a></li>
                        
<li><a href="#">菜单1->子菜单3</a></li>
                        
<li><a href="#">菜单1->子菜单4</a></li>
                    
</ul>
                
</li>
                
<li><a href="#">栏目3->菜单2</a></li>
                
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    
<a href="#">栏目3->菜单3</a>
                    
<ul>
                        
<li><a href="#">菜单3->子菜单1</a></li>
                        
<li><a href="#">菜单3->子菜单2</a></li>
                        
<li><a href="#">菜单3->子菜单3</a></li>
                    
</ul>
                
</li>
            
</ul>
        
</li>
    
</ul>
</body>
</html>