2个月，是个难耐的日子，说长不长，说短不短。在这段日子里，我完成了人生的一件大事：结婚。

　　所以说苦难总是与幸福相随，纪念！

　　记得早在07年的时候就写过一篇关于用div代替frameset，使用css来模仿框架布局的文章“DIV布局之头尾固定中间自适应”。

　　不过在那篇文章中尚有一个未解决的遗憾问题，那就是为了兼容ie6，需使用Quirks Mode模式，虽说效果可以达到，但多少还是让人耿耿于怀，非得fix不可。在写完那篇文章过了很长时间后，估计在08年左右，偶然发现一个可以解决该问题的方法。于是就对之前的demo进行改造，优化。

　　其实实际应用的地方不会很多，所以就没有发出来，一直处于Private状态 ^_^ 这段时间公司有个项目需要用到这个框架，被同事问起，就发了link给到。索性写篇文章，公布link，当是更新blog了，于是有了今天这篇“姗姗来迟的div仿框架布局”。该版本不再兼容IE低版本，如IE5.5及以下，兼容IE6,7,8; Firefox; Chrome; Safari; Opera浏览器，没被列入的浏览器未测试。

　　主要有几个需要注意的地方是：

1. 如何去掉Quirks Mode：善加利用html标记
2. 两栏布局时需考虑内容栏里的内容灰常长的情况，如：超过内容栏本身宽度

　　对于想看具体实现代码的朋友，就请自己去打开实例，另存到本地。这里我就不贴出来了，免得又臭又长，影响文章版面的美观 ^_^

　　Version2.0进化细节：

• div仿框架布局之典型的通栏布局V2
• div仿框架布局之典型的两栏布局V2
• div仿框架布局之典型的两栏布局进化V2

　　回顾Version1.0进化细节：

• div仿框架布局之典型的通栏布局V1
• div仿框架布局之典型的两栏布局V1
• div仿框架布局之典型的两栏布局进化V1

 　　接着完善我这个简单的DYLightBox，此次版本添加了一些新的东西和修正了一些BUG。

　　当前版本：

　　Version3.000

　　实际例子：

　　DYLightBox实例查看

　　特点：

　　1. 根据内容大小自动调整位置；

　　2. 使用方式简单；

　　3. 可以是一组或是单个；

　　4. 鼠标移到图片上，有prev(上一张)和next(下一张)功能；

　　5. 调用该效果时，链接即可以是图片也可以是文字；

　　6. 基于小巧的js框架easyUI，如果您觉得使用框架麻烦，可以单独扣出需要使用到的那几个方法；

　　7. 接受自定义风格skin；

　　使用方法：

　　<div id="test">
　　　<a href="1.jpg" rel="dylightbox" title="素颜美女"><img src="1.jpg" alt="素颜美女" /></a>
　　</div>

　　如果你希望DYLightBox生效，那么请给链接加上rel属性，并且值为dylightbox；

　　如果您希望DYLightBox能够显示出标题，那么请为链接加上title属性；

　　如果你希望有一组链接都需要使用DYLightBox，那么只要遵循1，2两条，复制多个链接就好了；

　　最后一点，在js文件底部加上一句easyUI.doWhileExist('test',imgView)以使得您可以使用DYLightBox，这里的"test"为你所定义的需要使用DYLightBox的区域；

　　DYLightBox将会持续更新完善，欢迎您的BUG！很多细节没处理，发现恶心的地方，严禁粗口 ^_^

　　博客真的是要持续的去更新才不会出现断层的现象，如果一段时间没有时间去打理你自己的博客或者长时间没有写信的文章，你会觉得似乎都快忘了有这么一档子事。

　　最近这段时间写JS的机会比较多，翻过以前写的一篇简单的DYLightBox1.000，发现有很多问题存在，而且DYLightBox1.000 Demo的效果在各浏览器中也不甚理想，应该说是水平问题吧，毕竟自己不善于此。现在回过头来看，算是有了一点小小的进步了，自吹自擂一下。

　　【演示一下先：DYLightBox2.000 Demo】

　　这次的实例主要是释放了滚动条，没有在弹出层时将其干掉，而是保留了滚动条（当然，有的时候会因为需求而要屏蔽滚动条，下次再写一个）；二是给弹出层加了个“孪生”的阴影Shadow（非全屏那个灰度背景）；三是不再顶给弹出层的大小，让其自适应内容；四是更好的兼容各大浏览器。

　　不理想的地方应该还有，待发现后再优化。

　　DYLightBox将会持续更新完善，欢迎您的BUG！很多细节没处理，发现恶心的地方，严禁粗口 ^_^

　　成天都要与样式打交道的朋友，相信对CSS选择符(CSS Selectors)都不会陌生。不过对于刚接触或者还不是很熟悉css的朋友来说，能够找到一份对于CSS选择符的相关例子集合，还是会有一定帮助的。

　　虽然之前已经有不少对于CSS选择符的文章在网络上出现，不过我还是准备以自己的方式来写一写，这也是一种获得乐趣的途径。所以我小小的总结了一下css1及css2选择符（本文的CSS选择符都为css1及css2）的用法及实例，希望对大家有些许帮助。

　　做这之前，当然得将所有CSS选择符列出来先。

CSS选择符(CSS Selectors - CSS1 and CSS2)

 　　现在已经将所有的CSS选择符都列举出来了，将就对每个选择符做单独的解释和举例。对于以下的这些例子，有些只是简单的应用实例，有些还提供了对比例子，使得可以明显的看出该种选择符的使用范围和方法。

类型选择符(Type Selectors)

　　语法：E1

　　说明：有的时候我们也将它叫做标签选择符，因为它是直接用html标记来做选择符进行操作。目前所有主流浏览器均支持该选择符，属于CSS1选择符。

　　实例：
　　div{color:#F00;}
　　<div>这里是测试内容</div>

包含选择符(Descendant Selectors)

　　语法：E1 E2

　　说明：选择所有被E1包含的E2，这里的E1和E2即可以是html标记，也可以是class或id。目前所有主流浏览器均支持该选择符，属于CSS1选择符。

　　实例：
　　div em{color:#F00;}
　　.test em{color:#F00;}
　　<div>这里是<em>测试</em>内容</div>
　　<div class="test">这里是<em>测试</em>内容</div>

ID选择符(ID Selectors)

　　语法：#sID

　　说明：以DOM中作为对象的唯一标识符的ID作为选择符。目前所有主流浏览器均支持该选择符，属于CSS1选择符。

　　实例：
　　#test{color:#F00;}
　　<div id="test">这里是测试内容</div>

类选择符(Class Selectors)

　　语法：.className

　　说明：其效果等同于E1[class~=className]。可以为对象的class属性指定多于一个值(className)，其方法是用空格将每个className隔开。目前所有主流浏览器均支持该选择符，属于CSS1选择符。

　　实例：
　　.test{color:#F00;}
　　.test2{font-size:14px;}
　　<div id="test">这里是测试内容</div>
　　<div id="test test2">这里是测试内容</div>

分组选择符(Grouping Selectors)

　　语法：E1,E2,E3

　　说明：将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。目前所有主流浏览器均支持该选择符，属于CSS1选择符。

　　实例：
　　.test,p{color:#F00;}
　　<div id="test">这里是测试内容</div>
　　<p>这里是测试内容</p>

通配选择符(Universal Selectors)

　　语法：*

　　说明：选定DOM中的所有对象。目前所有主流浏览器均支持该选择符，属于CSS2选择符。

　　实例：
　　*{color:#F00;}
　　<div>这里是测试内容</div>
　　<p>这里是测试内容</p>

子选择符(Child Selectors)

　　语法：E1 > E2

　　说明：选择所有作为E1子对象的E2，不包括孙辈和更深的关系。非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。

　　实例：
　　.test > strong{color:#F00;}
　　<div class="test">
　　　<strong>测试的内容</strong>
　　　<p>这是<strong>测试的内容</strong>哦！</p>
　　　<strong>测试的内容</strong>
　　</div>

相邻选择符(Adjacent Selectors)

　　语法：E1 + E2

　　说明：选择紧跟在对象E1之后的所有E2对象(E1与E2需结构级别相同)。非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。

　　实例：
　　p + p{color:#F00;}
　　<p>测试的内容1</p>
　　<p>测试的内容2</p>
　　<div>测试的内容3</div>
　　<p>测试的内容4</p>
　　<p>测试的内容5</p>
　　<div><p>测试的内容6</p></div>

属性选择符(Attribute Selectors)

　　语法：（属性选择符具体再分为4种不同的表现方式）
　　1.E1[attr]
　　2.E1[attr=value]
　　3.E1[attr~=value]
　　4.E1[attr|=value]

　　说明：
　　1. 选择具有attr属性的E1
　　2. 选择具有attr属性且属性值等于value的E1
　　3. 选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1。
　　4. 选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1
　　非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。

　　实例：
　　div[title]{color:#f00;}
　　<div title="测试的内容">测试的内容</div>

　　div[class=a]{color:#f00;}
　　<div class="a">测试的内容</div>
　　<div class="a b">测试的内容</div>

　　div[class~=a]{color:#f00;}
　　<div class="a">测试的内容</div>
　　<div class="a b">测试的内容</div>

　　div[title|=a]{color:#f00;}
　　<div title="a">测试的内容</div>
　　<div title="a b c">测试的内容</div>
　　<div title="a-b-c">测试的内容</div>

伪类选择符(CSS Pseudo-Classes Reference)

　　语法：（伪类选择符共有10种）
　　1. Selector:link{ sRules }
　　2. Selector:visited{ sRules }
　　3. Selector:hover{ sRules }
　　4. Selector:active{ sRules }
　　5. Selector:focus{ sRules }
　　6. Selector1 Selector2:first-child{ sRules }
　　7. Selector:first{ sRules }
　　8. Selector:left{ sRules }
　　9. Selector:right{ sRules }
　　10.Selector:lang{ sRules }

　　说明：
　　1. 设置a对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性（特性）的a对象，此伪类不发生作用。
　　2. 设置a对象在其链接地址已被访问过时的样式表属性。默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性（特性）的a对象，此伪类不发生作用。
　　3. 设置对象在其鼠标悬停时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
　　4. 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
　　5. 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式表属性。
　　6. 设置对象（Selector1）的第一个子对象（Selector2）的样式表属性。
　　7. 设置页面容器第一页使用的样式表属性。仅用于@page规则。
　　8. 设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。
　　9. 设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。
　　10.设置对象使用特殊语言的内容样式表属性。
　　
　　:link, :visited, :hover, :active属于CSS1，目前所有主流浏览器均支持a对象的该4种伪类选择符，非IE浏览器和IE7及以上浏览器还支持非a对象的:hover, :active；:focus, :lang属于CSS2，非IE核心浏览器及IE8支持。

　　实例：
　　a:link{color:#f00;}
　　a:visited{color:#666;}
　　a:hover{color:#F60;text-decoration:none;}
　　a:active{color:#000;}
　　<a href="http://blog.doyoe.com/">css探索之旅</a>

　　input:focus,a:focus{background:#f00;/* 点击或按TAB键获得焦点时生效 */}
　　<a href="http://blog.doyoe.com/">css探索之旅</a>
　　<input type="text" />

　　div em:first-child{color:#f00;}
　　<div><em>web</em>前端开发<em>权威指南</em></div>

伪对象选择符(CSS Pseudo-Elements Reference)

　　语法：（伪对象选择符共有4种）
　　1. Selector:first-letter
　　2. Selector:first-line
　　3. Selector:before
　　4. Selector:after

　　说明：
　　1. 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象，必须先设定对象具有块元素的表状。
　　2. 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象具有块元素的表状。
　　3. 用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
　　4. 用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。

　　这几个伪对象选择符都为属于CSS2选择符，其中:first-letter和:first-line目前所有主流浏览器均支持；:before和:after非IE核心浏览器及IE8支持。

　　实例：
　　div:first-letter {color:#f00;}
　　<div>我是一只丑小鸭，伊啊伊啊哟</div>

　　div:first-line {color:#f00;}
　　<div>我是一只丑小鸭，伊啊伊啊哟</div>

　　div:before {content:"web";}
　　<div>前端开发</div>

　　div:after {content:"...";}
　　<div>大段的文字</div>
 

　　待修改完善。。。

　　对于图片切换效果相信大家都早已不陌生了，在各大网站这样的效果都是司空见惯的。好早前就写过一个纯CSS的相册图片展示(书签应用)，不过在那篇文章里还遗留有几个问题没有解决，在之后就一直没有时间去弄，时间一长就懒得去搞了。

　　今天在翻以前的文章看，偶然翻到这篇07年的文章，看到里面还有历史遗留问题没有解决。就打算继续进行改造完善，完成了纯CSS图片切换效果beta3。

　　之前的文章里主要还有2个问题未解决，一是：切换序号无法指定激活状态的样式，用户很难分别当前显示的哪一个区域的内容；二是：该效果不支持Opera。

　　beta3版主要是解决了切换序号无法指定激活状态的样式这个问题，至于对Opera的支持，仍然是个让人头痛的问题，暂时没有较好的解决方案，也许下个版本会搞掂，呵呵。

　　来，瞧瞧对beta3的效果演示：

　　效果演示：［纯CSS构造图片切换展示效果beta3版］

　　从该实例里可以看到，激活状态的序号的背景变成了黑色，区别于普通状态下的灰色。

　　解决该问题的主要思路是不给切换序号预设背景颜色，因为无法判断出哪个序号是当前的，不过被切换的内容区域一眼就能看出，在点击不同的序号时，是3张不同的照片和相应的文字描述在轮换。既然无法判断当前序号，而被切换的内容确可以得到的，那么可不可以在内容上做文章呢？答案是可以的 （这种解决方案07年时我在另外一个例子里曾经用到过，就是另类TabStrip效果(书签应用补遗) ）。现在就应用到这个例子中来。

　　就是给每个内容块加上背景并调整位置到对应的切换序号下，来充当序号的背景，这样就变通的解决了无法识别当前序号的问题。具体做法，详见实例代码。

　　历史版本：

　　　纯CSS构造图片切换展示效果beta1版

　　　纯CSS构造图片切换展示效果beta2版

　　　纯CSS构造图片切换展示效果beta3版

　　前几天翻出以前写的一个纯CSS仿微软经典菜单，现在看来才感叹，微软的经典菜单确实很经典，至少看起来不觉得厌烦。

　　感叹归感叹，想想既然可以实现下拉菜单了，那么无限级下拉菜单理论上也是可以实现的，看了下之前的代码结构，马上肯定了这个理论。当然这完全归功于伟大的子选择符，形如：E>F，遗憾的是IE6并不支持子选择符，甚为郁闷，不过也不用放弃，可以换个解决方案。

　　一般来说无限级只是一种“存在状态”，但其实我们会用到的“并不会是无限”，而是有限的一定级数，比如说7级，8级，或更多一点，因为超出屏幕就没多少实际意义了，并且实际情况也比较少会出现那么深的层次关系。

　　无限级在非IE下是可以很简单就实现的，IE6也并非不能实现，只是稍微繁琐的，且不是“智能”的实现，而是通过“预设”，比如你预计最多只会出现6级的下拉菜单，那么预设10级应该就足够适应那些不确定因素了。所以前面我才会说无限级其实只是一种“存在状态”，我们所用到的并不会是无限的。

　　趁着一会的空闲，动手改造了一下原有的css样式文件。来看实例：

　　[纯CSS无限级下拉菜单实例：http://www.doyoe.com/model/xhtmlcss/menu/menu1/3.htm]

　　相关阅读：

[纯CSS仿微软经典菜单实例]

[纯CSS打造的下拉菜单横向实例]

[纯CSS打造的下拉菜单纵向实例]

　　老文重发，06年的时候发过一次，后来不知道怎么整没了，前几日从“垃圾堆”里找到，小修改了下再发一次，权当留念！

　　微软的IE浏览器菜单栏见过吧，哈哈！是不是很经典？这个例子就是用纯CSS仿微软经典菜单。不过没想象中的那么完美，不要期望太高，但还是蛮帅的。

　　已兼容了大部分的主流浏览器，这个不用担心，样式改变下，可以用到很多地方做下拉菜单，有其他需求的可以自己去扩展修改。

　　[纯CSS仿微软经典菜单实例：http://www.doyoe.com/model/xhtmlcss/menu/menu3/1.htm]

　　两个简单的衍生

　　[纯CSS打造的下拉菜单横向实例：http://www.doyoe.com/model/xhtmlcss/menu/menu1/1.htm]

　　[纯CSS打造的下拉菜单纵向实例：http://www.doyoe.com/model/xhtmlcss/menu/menu1/2.htm]

　　代码就不贴了，自己到实例里面去看^_^

　　在处理css的机制上，IE总是有很多让人吐血的举动，但对于他们现在的改进力度还是值得高兴的。

　　就拿对伪类:hover的支持来说，IE7+终于添加了对a以外其它标签的支持。对于这样的改进，当然是要拍手称快的，但在IE6下，:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。

　　很多人可能都已经知道了:hover在IE6及更早浏览器（以下称IE6-）下的一些问题。我主要是想说一下形如a:hover span{}这样的问题。

　　有的时候为了增加一些简单的动态效果，常常会借助:hover的帮忙，比如我们时常会令鼠标经过链接时改变文字的颜色。如：

a:hover{color:#F00;}

<a href="?">鼠标经过时改变我的颜色</a>

　　是的，这将在所有的浏览器中都有效。但如果换成这样：

a:hover em{color:#F00;}

<a href="?">鼠标经过时改变我的<em>颜色</em></a>

　　你会发现在IE6-下什么都没有发生，我们的样式失效了。对，就是这样，应该很多人都碰到过且已经解决了这个问题。

　　是的，只需要再添加一个a:hover{}样式就可以解决这个问题了，里面可以是zoom, padding, margin等属性。如下：

a:hover{zoom:1;}
a:hover em{color:#F00;}

<a href="?">鼠标经过时改变我的<em>颜色</em></a>

　　看着恢复了正常的效果，去想可能是因为什么造成:hover失效的。你可以使用zoom, display, padding等等属性来搞定，于是想会不会是因为haslayout。恩，很有可能就是这样。但你接着测试，会发现，不论你在a:hover{}写入任何属性，color啊，font-size啊，overflow啊（甚至是不存在的属性，如xx:yyy），都可以使之恢复正常。

　　测试到这里是不是有点目瞪口呆的感觉？对，我也是这样的。至于原因是什么，我还不知道，或许有人知道。

　　[一个a:hover的简单例子：http://www.doyoe.com/model/xhtmlcss/style/hover.htm]

　　例子虽然简单，但即刻你又会发现其实中英菜单和一些css tips效果也是那么的简单。

延伸阅读（更早前的文章）：

纯CSS构造Tips效果

纯CSS构造Tips效果补遗（一）

纯CSS构造Tips效果补遗（二）

　　近段时间一直处于待业中，加上之前工作比较忙，好几个月都没有更新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区分。

　　后续：

　　装了个IE8，评论中有同学提到没有整合IE8的hack，现在补全一下：

　　[演示地址：http://www.doyoe.com/model/css/hack/hack.htm]

Code:

#test{
    color:#FF0;voice-family: "\"}\"";voice-family:inherit;            /* ie5.5 */
    color:#000;                                                                           /* firefox and opera */
    color:#F00\0;                                                                        /* ie8 */
    [color:#f00;color:#999;                                                        /* chrome and safari */
    *color:#00F;                                                                         /* ie7 */
    _color:#0F0;                                                                         /* ie6 */
}