标签： css

笔者偶尔会抱怨BlogEngine.NET的主题太少，很羡慕WordPress丰富的主题资源。前段时间手痒想给博客换个新主题，但找遍WordPress TOP20之类的排行榜也没有发现特别满意的，一想到就算找到满意的也得花功夫改写成BlogEngine.NET的格式，倒不如释放一下自己的原创热情。

素材

首先是页面的CSS布局，从零开始搭CSS是很折腾人的，一个CSS布局模板可以省掉很多辛苦。CSS-Tricks网站提供了一个“完美的自适应宽度的布局”： http://css-tricks.com/the-perfect-fluid-width-layout/，其特点如下。

• 左右两栏式；
• 在主流浏览器下效果良好；
• 宽度最小可以缩减到780px，最大可以增加到1260px；
• 侧边栏保持固定宽度，并与主内容区域同高；
• 页面内容在极大分辨率下保持居中。

笔者基于这个布局的源码，将侧边栏移到了右边，微调了最小最大宽度，最主要的，加入了一系列包括边框、阴影之类的背景图片。这个“完美布局”模板在使用时有以下几点需要注意。

• 侧边栏是float:right属性挤过去的，这意味着主内容区域里不能很早就用clear:right或者clear:both来清理浮动，否则会造成清理之后的内容与之前的内容间产生很大片空白；
• 主内容要设计min-height，以避免侧边栏内容高度大于主内容时，下半截没有背景的情况；
• 这个模板包含一些针对IE的CSS-hack，在IE下人工改变浏览器宽度时，渲染效果会有不稳定的情况。

然后是背景。只所以这个主题会有金色系这样的配色，主要还是因为偶然找到了这样的图案纹理： http://speckyboy.com/2010/04/08/6-free-vector-seamless-backgrounds-source-files/。矢量纹理的好处是后期加工很方便。

还有就是纯CSS的层叠菜单。Google了很多，最后还是采用了http://purecssmenu.com/提供的代码。笔者针对自己的需要，砍掉了不少代码。

HTML源代码

早期版本的HTML、CSS、切图都可以在Google Code上找到，SVN地址如下：

https://evis-lab.googlecode.com/svn/themes/royalgold/src

《金光碧色》主题

主题为什么取这名字就不要深究了。

在上述HTML版本之后，笔者就将HTML代码合并到BlogEngine.NET的Standard主题中了，后来的开发、除错都是基于ASP.NET页面进行的。从结果来看，主题有如下特性。

• 金色系配色；
• 纯CSS（CSS2.1）布局，左右两栏，最窄780px、最宽1000px自适应，侧边栏宽度固定为300px；
• 纯CSS层叠菜单；
• 在IE7/8，Chrome，Maxthon2/3下测试通过；
• 适用于BlogEngine.NET 2.0RC及2.0，之前版本尚未测试。

已知bug：

• 在IE7/8下，Google广告之类的iframe内容会将弹出来的层叠菜单遮住；
• 在IE7/8下，任何时间都会出现横向的滚动条。

最新版本的《金光碧色》主题可以从这里下载，解压缩至BlogEngine.NET相关目录即可使用。

如果有哪位朋友有兴趣将主题迁移到WordPress，同样请留言，笔者会提供相应支持。

后记

果然是自己从未尝试过的色系，看久了多少有点眼晕的感觉……

制作主题这种事情，笔者认为最舒服的还是做效果图的阶段。神马Web Standard，神马HTML5、CSS3，业界推广这么长时间了，想做个布局、加个边框之类的，开发量还是这么大，甚至避免不了CSS Hack。这么多年了，多浏览器兼容仍旧是个大问题。有时想想，还是表格布局来的畅快。还有，开发工具还是这么单薄……等等各种抱怨。

说回来，Web页面开发这类工作，还得是设计师和前端工程师合作来做，别太期待团队里出来一个英雄，从美工到前端，加上体验设计，甚至再到后端，把一个网站硬生生的扛下来。领域太广、细节太多、耗时太长。哦，笔者可没说自己是这样的人物。