纯CSS构造的图片切换效果beta3
作者:飘零雾雨 日期:2009-06-11
转载请注明出处，css探索之旅-飘零雾雨的庄园
对于图片切换效果相信大家都早已不陌生了，在各大网站这样的效果都是司空见惯的。好早前就写过一个纯CSS的相册图片展示(书签应用)，不过在那篇文章里还遗留有几个问题没有解决，在之后就一直没有时间去弄，时间一长就懒得去搞了。
今天在翻以前的文章看，偶然翻到这篇07年的文章，看到里面还有历史遗留问题没有解决。就打算继续进行改造完善，完成了纯CSS图片切换效果beta3。
之前的文章里主要还有2个问题未解决，一是：切换序号无法指定激活状态的样式，用户很难分别当前显示的哪一个区域的内容；二是：该效果不支持Opera。
beta3版主要是解决了切换序号无法指定激活状态的样式这个问题，至于对Opera的支持，仍然是个让人头痛的问题，暂时没有较好的解决方案，也许下个版本会搞掂，呵呵。
纯CSS无限级下拉菜单
作者:飘零雾雨 日期:2009-06-04
转载请注明出处，css探索之旅-飘零雾雨的庄园
前几天翻出以前写的一个纯CSS仿微软经典菜单，现在看来才感叹，微软的经典菜单确实很经典，至少看起来不觉得厌烦。
感叹归感叹，想想既然可以实现下拉菜单了，那么无限级下拉菜单理论上也是可以实现的，看了下之前的代码结构，马上肯定了这个理论。当然这完全归功于伟大的子选择符，形如：E>F，遗憾的是IE6并不支持子选择符，甚为郁闷，不过也不用放弃，可以换个解决方案。
一般来说无限级只是一种“存在状态”，但其实我们会用到的“并不会是无限”，而是有限的一定级数，比如说7级，8级，或更多一点，因为超出屏幕就没多少实际意义了，并且实际情况也比较少会出现那么深的层次关系。
无限级在非IE下是可以很简单就实现的，IE6也并非不能实现，只是稍微繁琐的，且不是“智能”的实现，而是通过“预设”，比如你预计最多只会出现6级的下拉菜单，那么预设10级应该就足够适应那些不确定因素了。所以前面我才会说无限级其实只是一种“存在状态”，我们所用到的并不会是无限的。
纯CSS仿微软经典菜单
作者:飘零雾雨 日期:2009-05-11
转载请注明出处，css探索之旅-飘零雾雨的庄园
老文重发，06年的时候发过一次，后来不知道怎么整没了，前几日从“垃圾堆”里找到，小修改了下再发一次，权当留念！
微软的IE浏览器菜单栏见过吧，哈哈！是不是很经典？这个例子就是用纯CSS仿微软经典菜单。不过没想象中的那么完美，不要期望太高，但还是蛮帅的。
已兼容了大部分的主流浏览器，这个不用担心，样式改变下，可以用到很多地方做下拉菜单，有其他需求的可以自己去扩展修改。
[纯CSS仿微软经典菜单实例：http://www.doyoe.com/model/xhtmlcss/menu/menu3/1.htm]
:hover在IE6 and earlier下的问题
作者:飘零雾雨 日期:2009-04-09
转载请注明出处，css探索之旅-飘零雾雨的庄园
在处理css的机制上，IE总是有很多让人吐血的举动，但对于他们现在的改进力度还是值得高兴的。
就拿对伪类:hover的支持来说，IE7+终于添加了对a以外其它标签的支持。对于这样的改进，当然是要拍手称快的，但在IE6下，:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。
很多人可能都已经知道了:hover在IE6及更早浏览器（以下称IE6-）下的一些问题。我主要是想说一下形如a:hover span{}这样的问题。
有的时候为了增加一些简单的动态效果，常常会借助:hover的帮忙，比如我们时常会令鼠标经过链接时改变文字的颜色。如：
a:hover{color:#F00;}
<a href="?">鼠标经过时改变我的颜色</a>
一条可以区分常用主流浏览器的css hack
作者:飘零雾雨 日期:2009-04-08
转载请注明出处，css探索之旅-飘零雾雨的庄园
近段时间一直处于待业中，加上之前工作比较忙，好几个月都没有更新Blog了。一件事如果不想着去做，或者不主动去做，时间一长，就会成为一种习惯。
该死的css hack，是的，有时候我也会这么骂，但目前看来确实还无法完全将它扔掉。现在有不少需求都要求兼容Safari, Chrome等浏览器，甚至有的项目还要照顾到IE5.5，虽说不大赞成高频次的使用css hack，但有的时候还是需要用上的。我整合了一个可以同时区分IE5.5, IE6, IE7, Firefox/Opera, Safari/Chrome的CSS hack，网络上可能还会有比这更简洁的版本。就当是做个记号算吧。
[演示地址：http://www.doyoe.com/model/xhtmlcss/style/csshack.htm]
Code：
.test{
color:#00C; /* For IE5.5 */
voice-family:"\"}\"";
voice-family:inherit;
color:#000; /* For FF,OP */
[color:#000;color:#0F0; /* For SF,CH */
*color:#FF0; /* For IE7 */
_color:#F00; /* For IE6 */
}
通过以上的样式，你可以在IE5.5里看到蓝色的字，IE6里看到红色的字，IE7看到的是黄色的字，Firefox/Opera看到的是黑色的字，Safari/Chrome看到的是绿色的字。这里没继续将Firefox和Opera，Safari和Chrome区分。
模块化思想的重要性
作者:飘零雾雨 日期:2008-12-26
转载请注明出处，css探索之旅-飘零雾雨的庄园
这里所讲的只是我个人针对前端开发的模块化思想设计的一些浅薄看法。
什么是模块化思想？模块化思想就是指将页面根据内容的关联性分解成不同的且相互独立的模块进行开发，每个模块之间没有必然的联系，互不影响。
在早前，团队协作相对比较少的情况下，模块化的思想并不会特别的吸引人，因为在单兵作战的情况下，往往更注重灵活，快捷和高效，根据个人喜好来做东西，而考虑维护，复用性等方面则相对较少。
在团队协作日益频繁的今天，模块化思想的重要性就凸显出来。尤其是那些已经在使用模块化的，或许早已深深的体会到其中好处。因为模块化并不是就意味着不灵活，不高效。在理解模块开发模式下，你会发现原来东西其实是可以这样来做的。
你所看到的div布局
作者:飘零雾雨 日期:2008-12-12
随着近几年来，web标准的思维被越来越多的人所接受和学习。传统的网页布局逐渐发生了变化，table布局开始慢慢的淡出人们的视线，而使用div组合css来进行的布局则异军突起。
这种情况的出现，并不是说明table是不符合web标准的，而恰恰是web标准的深化，使得大家开始慢慢去理解每个标签其本身的真实意义，table的真实用途也逐渐让大家所认知和接受。
table，顾名思义，是表格的意思，在xhtml中它也是被定义为表格。table标签其本身是用来创建表格，装载数据的。然后却正是由于表格固有的行和列特性，人们发现使用table可以很简单的就将内容固定在一个区域内，形成一个布局并搭建出web页面。然而人们在灵活使用其外在表现的同时，把它的实质作用给忽略了，似乎再也没人认为table仅仅是用来装载数据的，而“页面布局”也成了table的一个“特性”。久而久之，table就成了页面布局的“默认方式”。
有那么一批人或者组织，他们始终致力于还原html的本质，让资源被合理的使用。或许正是因为他们的努力和奔走相告，人们开始慢慢正视这个问题，并加入到这个行列里，身体力行。
Tags: DIV
XHTML之超级链接a
作者:飘零雾雨 日期:2008-11-19
HTML中有一个标记为互联网的兴起和发展起着举足轻重的作用，正是由于这个标记的存在，才成就了今天的互联网这张“网”，这个标记是就<a>。
互联网之所以成为互联网，就是通过a(也就是超级链接)将世界各地的网页链到一起，才形成了这张大而无形的网。
a标签其实是取自anchor(锚)的首字母缩写。属性href就是a的精髓所在，它为链接指定一个链接源URL，也就是说要链接到哪个地方或者哪个页面。
target属性是用来指定该链接如何打开，比如我们要让链接在一个新开的窗口中打开，那么我们只需将target的值设置为_blank即可，它的值还有_self, _top_parent等。虽说这个属性可以让链接变得更丰富，但在XHTML中，target属性已经是不被推荐使用的了。
校检XHTML页面？争议？
作者:飘零雾雨 日期:2008-11-18
什么是校检XHTML页面呢？W3C为XHTML规范弄了一个检测工具，通过这个工具，你就可以检查自己写的XHTML是否符合规范。
有些估计要问了，为什么要校检呢？难道没通过校检的页面它的XHTML就一定是不好的吗？为什么一定要走这个形式呢？
如果确实需要这样问，我也觉得这是一个非常棒的问题。但对这个问题，我也说几句。
这里所说的校检并非是用来特别说明你的页面好坏，通常我也不喜欢这种形式主义。之所以我提出校检你的XHTML页面，那是因为通过校检，你可以发现并改正你的XHTML存在的一些不符合规范的地方，当你校检的次数多了，对XHTML的一些规范也就了解的差不多了，这时候你就可以选择不再去为自己的页面一一校检，因为在你写出某个页面来的时候，你已经知道该页面中有哪些地方是不符合规范的，但实际需求又使得你必须这样做，这时候我们可以选择一个折中的方式来处理，不必过于对未通过校检而耿耿于怀。
Tags: XHTML
第一个XHTML页面
作者:飘零雾雨 日期:2008-11-18
在对XHTML有了一定的了解后，我们就可以开始自己的第一个XHTML页面了，当然，"Hello World!"依然是最佳选择。
我们知道，在写XHTML之前，首先得为它选择一个合适的DOCTYPE，这里，我们将使用Strict(严格类型)的。
好了，做好了准备之后，Let's say "Hello World!".
XHTML代码如下：
<!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" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>第一个XHTML页面：Hello World!</title>
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<p>Hello World!</p>
</body>
</html>
好了，这就是我们的第一个XHTML页面，我们已经将Hello World!打印出来了。
Tags: XHTML
