B3 bohemia's

来自CSS ZEN GARDEN的基于标准的网站展示，1-5期高品质截图。

下载本期：第一期 9.47MB

来自CSS ZEN GARDEN的基于标准的网站展示，6-10期高品质截图。

下载本期：第六期 9.47MB

首先我们来看一下什么是WEB标准：

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。（摘自：网页设计师 www.w3cn.org ）

通过网易教授Allan的特稿：国外门户开始向WEB标准靠近。为我们拉开了门户网站向WEB标准转变的序幕。在Yahoo全球众多网站中，除Yahoo英文（www.Yahoo.com）已经改为WEB标准外，我们更可以很欣慰的看到，我们亚洲的网站也以大的步伐在向这一网站规范统一的模式靠近——Yahoo韩国。

虽然仍采用

除此之外，你还可以看到它简洁易读的代码，这为维护人员提供了很大的方便，看看这个简洁的导航菜单：

美洲
Yahoo！

先别急，以下是Yahoo全球的部分网站展示，从中你会体会出WEB标准与传统建站的不同。做下对比，更多的是感受网站界面的变化，运用WEB标准的网页是不是结构更紧凑，布局也更合理了呢？好了，不说了，大家慢慢欣赏吧。

欧洲
英国、爱尔兰：

“很多时候我都会被询问，我的日历是怎样制作的。并且询问有关代码的问题。这便是我之所以要写一篇文章来专门介绍如何制作我的日历的原因”

详细代码可以从下面作者的站点获得，有时间我会把这篇教程翻译过来。
A CSS styled calendar

WEB式的标签选项卡效果，适合于特殊用途。
至少我是暂时用不上，海娃总结了一个，留个以后用。

以商业管理信息系统（MIS）的流程思想，编写XHTML文档的开发过程。

按结构化生命周期法：系统规划阶段-->系统分析阶段-->系统设计阶段-->系统实现阶段-->系统运行和维护阶段

第1阶段：开发文档

• 计划


• 组织


• 生成


• 测试

不怕你做不到，就怕你想不到。
看看这个手册，你会从中得到多少灵感呢？

只有你自己知道~~

http://www.alvit.de/handbook/

《San Francisco Examiner》最近成为美国最畅销的报纸之一，其原因是什么呢？答案是，他们完全采用WEB标准来发布站点，利用有效XHTML来替代tables的排版方式。

我在《Examiner》做站点主管有4年多了，并且很多次的重新设计网站。但每次重新设计，HTML代码和JavaScript都显得很笨重、麻烦。最终，还是给我留下令我感到异常复杂、并让人气馁的经历。

用W3C标准建造的网站，从理论上来说可以做到完全的表现与结构相分离。打个比方，就是可以在不动骨架（结构，XHMTL）和肌肉（行为，Javascript）的前提下，彻彻底底地换一身皮（表现，CSS）。

当然，换皮之前你需要先按W3C标准建好你的网站，并且为它准备两套表现不一样的CSS。“换皮”实质上就是“换CSS”，我们要做的，只是用某种方法让浏览器载入另一套CSS，重新渲染页面。方法有很多种，我就介绍最常见的三种。

方法一：什么也不干
啊？什么也不干？嗯，这个……准确地说是：就干那么一丁点儿 （你还真以为有这么好的事儿呀……）。

假设我们有两套CSS，分别封闭在两个不同的文件中：a.css和b.css。然后在和之间加入如下两行XHTML代码：

很多时候明明感觉应该自适应的效果，
可是在不同浏览器里却取得不同的结果，
这个时候最令人伤神。
有时利用“相对位置”和“绝对位置”方法来确定DIV的方位，
也是个很不错的想法，
至于如何使用，使用那种方法，
还是要看个人习惯以及网页整体要求。
来看看下面的方法，从中会掌握自适应的一种好方法。

在制作网页的过程中，自适应问题是经常遇到，而又最让人头疼的，看了好多种解决的方法，但是都不是万能的。今天遇到这个问题，实在让我挠头，借鉴了Shark的方法，又给了我一个新思路。当时没仔细看LBS的样式表，今天才发现，.clear用的就是这个方法。接下来，我会做个关于“自适应高度”问题的汇总，以便今后遇到问题时候更快解决。

为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。

这里肯定有很多中英文混杂的东西出现，不过请谅解，我只想用最简单的话，表述整个过程……

<table> <tr> <td>有什么不好？

布局的简繁不是它们的错，而在于开发者本身（此处不用设计者，因为设计的人未必就是实现网页的人）

<table>标签的存在是有其历史意义的，就算是今天“标准”世界，<table>的存在也是无可厚非的（废话），因为还有一部分人不会运用“标准”——没有必要掌握、懒的掌握、不赶兴趣或是觉得它没有意义。

但是，我想说的是，<table>并不代表网页不标准，<table>同样能设计出形式优美的页面，健壮的功能，而且更容易上手，这也就表示它更容易被推广。所以不要掌握了“标准”，就扔掉了老祖宗，“我们都没错，只是不适合”——不适合特殊需要，节约带宽或希望更轻松的变换版式等……

Q&A

Firefox 1.5 provided support for some new CSS3 features. What exactly?
CSS3 Multi-column layout module

Faux Columns technique is used to
make all the columns on a page look equally high

The term AJAX was introduced by
Jesse James Garrett

A technique widely known as Sliding Doors is used to create
an element that is styled with CSS to grow as the content of the element grows

In XHTML, label element can contain several other elements. Which one of the following is NOT allowed?
pre

HTML Element <ul> is so named after
Unordered List

Selector h2 + p is an example of
Adjacent selector

原引阿捷的一段话：“原则上一个xhtml文档所有的标签都应该是结构标签,需要表现的地方都使用css来控制。”

下面是一个完整xhtml的结构标签：

结构
body, head, html, title

文本
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var

链接
a

今天逛经典，看到这样一则消息，进去看了一下，
不错的方法，又学到一招。这里做个记号，方便今后使用时查找。

原文连接：div下图片自适应解决方法

今天的重点不是介绍换行，而是介绍如何“不”换行。

下面这个是自动换行，也就是把文字截断，换行显示，有时是需要的。

但更特殊的情况是，强迫不换行。

呵呵，看你自己需要喽，方法已经列在上面了。闪~

呵呵，玩了这么长时间“WEB标准”，究竟标准在哪里？！开始我也这样问自己，这个标准到底定给谁的，是人，还是机器。

不要强求DIV和TABLE一样，因为他俩肯本不是一回事。

“web标准”给设计师带来的更多的是一种思维的转变，一种事前思维，一种事后思维。为什么这么说？看看下面的思维过程：

事前思维——应用“web标准”

熟练的WEB设计师在拿到需求之后，瞬间在脑海中形成一幅画面，这个任务要表现什么，如何表现出来，整体框架又是怎样……有经验的甚至还会考虑到在后台编写代码时可能遇到的问题，比如自动伸展的区块，如何循环标签等。

往往采用“web标准”进行结构网站，花费的时间和精力总要比使用传统方法多，为什么？考虑的多呗。如果将架构一个新站所花费时间的总和设置为10，其中大致包括初始设计、在途修正、后期维护，那么采用“web标准”设计的时间分配比例约为6、2、2。如果采用传统方法进行架构，设计的时间分配比例约为3，3，4。

举这个例子用意何在？
是在大致描绘一个WEB设计师整个项目中所要投入的精力，和所花费的时间的成本。“事前努力，事后清闲”。

不是什么新东西了，但是今天用到又找了半天，
一直有个印象，知道有这么个东西，但是没有用心记过，
这回留个记号，省着以后想不起来，又不好找了。

完整的文章，查看清除DIV浮动－使用:after
效果不错，省了很多事，不然用我原来的方法，搞的结构里很乱。
“我原来的方法”？

今天做新模板的DEMO页面，遇到两个问题：
1.实时切换CSS样式
2.给切换样式的<Select>标签所在div加了个背景图片，需要使用透明PNG图片

这两个问题以前就遇到过，但这东东也不经常用，就知道这两个问题可以解决，并没有记如何解决，搜了一下，然后改了改代码就成了。

下面一个个问题解决：

表格大家并不陌生，细线表格更是受到广泛应用。
做细线表格的方法有很多，比如：
1. 最简单的细线表格做法，直接利用table属性

2. 利用table背景颜色和间距属性构造表格，需要注意的是，td必须也使用背景颜色才能显示出线条

当然以上方法都很好用，但我们今天说的不是这些，而是使用另外的方法——<ul>

从WEB开发到最终上线的过程中，可能会经历很多流程，
其中包括各个部门例行的一些“加工工序”，
但怎样才能保证各个部分的和谐统一，看来并不是件容易事。

上周在论坛里看到一篇名为“分离之后的感想”的帖子，
跟进去也发表了下自己的看法。
虽然当时帖子，楼主发的是牢骚，不过透过这些牢骚，
我们是否应该在现实工作中反省出点什么，这才是这篇帖子的目的。

“奶牛是有了，但能不能挤出奶、能挤出多少，就要看个人能力了”
这里作为引言，请往下看吧。

Dean 用很诙谐的语言记述了 cssQuery 的使用方法，
下午与他通信询问是否可以将原文翻译后发到我的BLOG上，
回信的语言依然风趣干练“ Of course. Go ahead. :-) ”

下面这个地址就是 cssQuery 中文贴士

希望有更多 WEB 爱好者们加入 CSS 的游戏阵营。

这些平时干活时总能用到，做个记号，以后查起来方便，哈

作者网站入口：CSS Hack汇总快查

蓝色理想入口：CSS Hack汇总快查

一直很苦恼表单的制作，到底是用table还是用css来弄，
偶然看到这篇名为“[译]css form design”的文章，
翻译的很棒，就像译者说的那样，上来直接捞干的讲，
很有用，这里留个记号，也推荐一下，算是学习后回报一下译者的辛苦劳动。

处理圆角的方法很多，没人都有自己的方法，
但在产品中，如何保持统一就成了一个不大不小的问题。

介绍一个 CSS Mojo ，
使用这样的Mockup，会给今后的开发带来一些便捷。
这里只是针对第一个案例，可能在Mojo中剩下的几个 demo 中也存在这样的问题，
那么，我这里只提供一种解决问题的思路吧。

我尝试使用以后发现一些小问题，主要是针对IE6的：
1. 使用Mojo的默认样式，在IE6下，区块下面两个圆角框无法显示
2. 经过修改后，两个小圆角没有处在最底边，如图：

对于这两个问题，我们可能在使用中需要进行一下“本地化”：

做网页前端需要了解很多细节问题，今天我来简单说几句：

1. 了解em和px 的区别，它们之间存在着怎样的关系


2. utf-8下，汉字占3个字符，了解网页编码utf8与gb2312的区别


3. css中定义font时的顺序，缩写时候要注意，
   font : font-style || font-variant || font-weight || font-size || line-height || font-family
   如：p { font: italic small-caps 600 12pts/18pts 宋体; }
   参看《CSS2.0手册》
   

好多细节支撑起一个专业的网页，大的工程中更不要轻视小的隐患。

很多做前端的朋友们遇到的比较苦恼的问题就是——浏览器的兼容性
现在市面上这么多浏览器，但苦于每家标准都不统一，
从而造成在制作页面的时候，要同时对几个浏览器进行兼容性验证，
我一般针对 IE6,IE7,FF2.X 进行校验，但到底应该对哪些浏览器进行校验，
这个标准又是从何而来呢？

通过一些统计工具（站长工具），可以得到一些关于浏览器的数据，
其中分布比较广泛的如：IE6、IE7、Firefox、Safari和Opera,
根据这些数据，可以大致了解，这个浏览器兼容性底线就是
要至少满足市面上市场占有率较高的浏览器的兼容性，这是一个通用页面的基本条件。

以下是一些扩充