chisdy.A.Pro

最近在弄网站的时候出现个问题，也是之前一直没去解决的，一个非常简单的问题，花了我几个小时的时间一步步去查找，如果平时的知识点能好好的积累的话，根本没必要花这样的冤枉时间，NND。

我习惯于用css的position属性去制作网页的头部跟其他我觉得没必要去float的东西，说实话挺讨厌float的，老是需要清除浮动以至于得到满意的效果。用position的话，不仅可以考虑在去掉css的情况下html文档的重点输出顺序，还可以减少不必要的嵌套代码，更重要的就是自由，爱放哪放哪。

这次的问题出现在position:relative同辈元素的z-index设置上，一般同辈元素都是靠z-index去定位层级，z-index数值越大者越居上。在例子中#header跟#ibanner为同辈元素，在不设置z-index值的情况下，因为#ibanner的html输出在#header的后面，所以#ibanner层对比#header层来说是居上叠加的，看Demo1

Demo1在IE(IE6、IE7、IE8，Jquery紧支持IE6+)浏览器下，很好的证明的这点。但在非IE浏览器下.nav的z-index属性值战胜了#ibanner，跑到上面去了。.nav的父辈元素是#menubar祖辈元素是#header，没理由啊，想不通，后来看了14px发布的《层叠加的五条叠加法则》后才明白过来，原来白为IE鼓掌了，最后变成又是IE的问题了。

接下来最终目的是要把.nav的层级提高，那么只需要搞定IE就行了，这个就简单了，设置#header跟#ibanner的z-index值就OK了。看Demo2（中间迷失了一个多小时，以为#ibanner设置z-index值就OK了，一直在测试就是不行，还用上了判断为IE浏览器的时候，#ibanner的z-index值为-1，太扯了，太瞎了。还有个可能是jquery的问题。）

我是明白过来了，估计看这篇文章的人一下子反应不过来，去看下14px发布的《层叠加的五条叠加法则》就清楚了，自己测试摸索吧，这样才记得牢。

对于网店来说，表单的设计是很重要的，无论是注册，登录，还是订购，都是吸引访客进行下一步操作的重要因素。那么，从table布局过度到div+css及合理语义化布局后，表单的设计不再就几个tr，td死死的框着，可以考虑表单的便捷及亲和力可用性，以下便介绍几个例子，重新温习下：

1、Fancy Form Design Using CSS

这篇文章相信很多人都看过了，文章很长，主要介绍了构建表单的标签应用，布局及如何用CSS去控制，非常值得学习。

2、StylePhreak Simple CSS Form
3、Who says CSS forms can’t be pretty?
4、Man in Blue: Form Examples
5、CSS Play – A form with style
6、The Form Garden
7、Prettier Accessible Forms
8、HTML form effects with CSS
9、A 2 column CSS form layout
10、25 Stylish Examples of Web Forms

有介绍25个不错的表单形式

http://wufoo.com/ http://www.phpform.org/ 两个表单设计网站，非常方便。

好长时间没整过DIV+CSS站点了，最近弄了下，感觉有点吃力了。发觉很多基础方面的东西都不牢固，每次遇到问题只会复制代码，没去真正研究下为什么。因为有遇到关于自适应布局方面的问题，所以分享几个也许大家都很熟悉的站点。

http://layouts.ironmyers.com/这个站点里有很多布局上的实例，可以说是CSS模板吧，研究下直接套用就行了，不过个人觉得有点繁琐，还是搞清楚来龙去脉，自己写比较好。

http://css.maxdesign.com.au/ 这个站点里也挺多好玩的东西，不过要研究完还是要花点时间，每次我都是挑选着去看，去做实例，也许是这样CSS布局方面才一直停滞不前吧。

http://www.intensivstation.ch/en/templates/ 这里也有几个布局，大体上差不多，有兴趣的再自己去了解。

写到这里才发现，其实没什么好介绍的。