CSS - 许许如生

2008-04

15

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

Web CSS，IE，web标准，语义化 206次浏览 3

这是在 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

09

CSS裸奔节

Web CSS，web标准 316次浏览 4

从总统博客得知，今天（2008年4月9日）是第三届 CSS 裸奔节，这里是中文版介绍。

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

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

2008-04

09

JavaScript下拉菜单

Web CSS，JavaScript，下拉菜单 453次浏览 3

去年我曾经写过一篇 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>

2007-11

09

探究纯粹的CSS下拉菜单

Web CSS，下拉菜单 2,040次浏览 7

鼠标悬停下拉菜单在网页中很常见，一般的下拉菜单都是通过 javascript 对菜单的显示和隐藏进行控制，其实用纯粹的 css 也可以实现。用 css 的几点好处是，不需要考虑客户端浏览器是否禁用了 js，而且用 css 实现下拉菜单效率比 js 要高，还可以方便地制定样式和定位。我查阅了一些资料，用纯粹的 css 实现了下拉菜单，并且支持 IE6，分享给需要的朋友。

首先写出 html 代码如下：

<!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">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>css下拉菜单</title>
   <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
   <ul id="navigation">
   <li>
   <a href="#"><h3>栏目1</h3></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="#"><h3>栏目2</h3></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>
   <a href="#"><h3>栏目3</h3></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>
</body>
</html>

还没有完呢，请继续阅读……

2007-09

04

使用 div+css 重构网站

Web CSS，div，web标准，XHTML 571次浏览 0

由于甲方在功能与外观上的需要，我们实验室项目中的网站需要重新制作。这次我们决定放弃原来的表格布局的页面表现设计，而使用更加符合 Web 标准的 div+css 来进行设计。现在网站已经基本制作完成，下面是我第一次使用 div+css 的一些感想。

使用 div+css 设计网站最大好处就是实现了页面代码内容与表现的分离。像国内大部分网站一样，我们项目中以前的网站也是基于表格的布局设计。这种方式下的页面代码中充斥着大量的 <tr>、<tb> 标记，一层又一层的表格嵌套使页面显得非常臃肿，页面的内容和表现强耦合在一起，很影响可读性。这里所说的可读性包括两个方面，一个是指开发人员阅读代码，混乱的代码如果没有可视化编辑器的帮助将让人完全摸不着头脑，而使用 div+css 的页面则更容易理解，加强了代码的可重用性，日后的维护也简单多了；另一个是指搜索引擎对页面的读取，由于搜索引擎只读取 html 而不读 css，所以简洁的、层次结构分明的 html 能更好的帮助搜索引擎理解并抓取页面内容，反之，含有大量表格元素的 html 使得搜索引擎难以理解。

另一个好处就是减少冗余代码，提高效率，降低流量成本。使用div+css 布局的页面的代码量将会比使用表格布局的少很多，假设一个页面节省的空间是 100kb，千万不要小看这 100kb，对于一个日 pv 1000万的大型网站来说，节省的流量是非常可观的，同时可以加快页面的加载速度，改善用户体验。在网络带宽资源日益紧张的今天，虽然节省这么一点带宽和 BT、在线视频等相比微不足道，但是节省一点是一点，何乐而不为：）还没有完呢，请继续阅读……

许许如生

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

1、Web 标准 = Validation（验证）

2、Web 标准 = CSS

3、Web 标准 = No Tables

4、Web 标准 = Divs

5、Web 标准 = No IE

CSS裸奔节

JavaScript下拉菜单

探究纯粹的CSS下拉菜单

使用 div+css 重构网站

日志分类

按月存档

抗震救灾，奉献爱心

最新日志

随便看看

最新评论

其他