这么快博客就一周年了，时间还过的真是快，按我们这当地的风俗，小孩一周岁都要办酒席啥的，所以，在博客一周年，准确的说即将到来的一周年，做了一个新的主题换上，一是做为纪念，二来，好像最近最宽屏的主题比较有兴趣，总觉得960PX的宽度越看越难受，虽然这类的宽度好处显而易见，可以兼容更多的浏览器。这个主题之所以取名为widely也主要是因为在我词穷的时候想到迎合下宽屏吧。

不过做宽屏的网页还是遇到了一些麻烦，虽然很多人会觉得用width的百分比就可以轻松的解决所有的问题。我开始也是这么觉得，但实际上问题比我预想的要略微复杂一些。

主题结构的一些思路

参照上图，横向来看Widely的结构大致可以左右两块，及左边的文章部分，和侧栏，这两者关系可以用百分比的width来处理，外面再用一个容器限制两者的总宽度。但问题出现在了左侧容器，我把文章tag，comment信息放在了侧边（红色部分），本来可可以用一个DIV容器自适应宽度实现侧边信息的展示，但在网页宽度缩放的时候，这里的宽度势必会偏大或者偏小，所以我希望左边红色部分的宽度可以固定成150PX。

但固定的width会带来另一个问题，就是正文部分的宽度需要用JS动态获取，十分麻烦，而且JS的作用会有延迟。最后我想到了padding-left，然后将显示日期，tag的容器脱离文档流相对父层定位。这就解决了宽度的问题，但实际上，对于商业性的网站，这么做是不可取的，为什么？因为我发现这么做在原生态的IE6下会造成定位的不准确，你必须对父层赋予float属性才能解决这个问题，但倘若这么做，你又必须加上width:100%才行，但实际上width:100%和padding同时使用是一大忌，为什么？

对于一个设置成固定宽度的DIV，你若赋予了padding-left属性在不同浏览器中会出现下面的情况：

有的浏览器将padding加在了外侧，而有的则为内侧。

但我本来就已经不打算对IE6做兼容，所以定位不准确的bug也就无视了，而且这是我想到的最简洁的办法。

适应宽度方案

考虑到在低分辨率显示器和高分辨率显示器下页面过窄或者过宽造成的布局损坏，不可以将宽度简单的设为了100%,我采用了一下方案，在浏览器有效宽度为1160px-1400px之间时自动设置为宽屏，小于1160px的采用1160px的宽度（实际上采用960px更加科学），大于1400px采用1400px宽度。但我没过学过Js，为此还特地去学了一点JS，虽然用jQuery框架会方便很多，但为了一些小功能而多加载一个庞大的框架我觉得不值得。

这里我采用了用固定帧数播放动画，而不是固定每帧容器扩张的长度，这样不论浏览器多么的宽，总是在固定的时间内完成动画，而不是浏览器越长，播放时间越长造成时间等待。

简易的验证码

还是老习惯，一切从简，拒绝插件。这里提供一个最简单的验证码解决方案。非常简单，找到comment.php文件，找到如下代码。

这是加载评论输入框的函数，在这里下面加上验证码框，和验证不通过的提示框。

具体的CSS样式需要自己根据主题定义，但不可以忘记了提示信息的display:none.

最后在头部加上验证的JS，十分精简。需要说明的是，用于实际生产这代码显然是不可取的，但用在博客中，既可以减小代码量，提高加载速度，也可以取得防止spam的不错的效果。

CSS3

Widget采用了大量的CSS3属性，一是CSS3的效果确实不错，二是很多效果如果用图片实现是在是麻烦，所以在不支持CSS3属性的浏览器下，效果明显是差很多的，不过对于个人博客，这点无关紧要。此外其实我还是比较喜欢Pure这个走简洁风格的主题的，以后有时间我会整理一下共享一下。