完成改造Wheat两栏皮肤为三栏

　　昨天午后与Mdio着手开始改造原Wheat两栏风格为三栏板式。Wheat两栏风格是2006年4月份正式启用PJBLOG博客平台后，用上的第二个也是目前个人觉得最“美”的风格了，当时一换上这个皮肤并进行所需的美化细节，近一年都没“换新装”呢。而随着网站的日新月异，侧栏模块也多了，两栏明显不能满足要求，而且怎么说三栏看起来就会大方一些吧，于是换上了原shotan改造的TJinnStyle三栏风格，随之细化完善该风格。

　　呵呵，Mdio太够意思了，多次麻烦他修改主体背景图片，如风格右侧的那个桶区域的过渡背景以及整体bg图片的美化，他PS熟练，三下两下搞定，也花了他不少泡MM的时间，要是在重庆，请他吃饭犒劳下哈。有了前面几款三栏改造基础，改造Wheat风格应该是简单快捷的，但我还是花了不少时间，昨晚的难题在于1024*768下始终有滚动条，没办法求教了何昕才搞定，即在主体样式中加入 OVERFLOW-X: hidden; 不过不支持Opera，不管了本站这类用户几乎为零。

　　中午解决了右侧栏背景图片在FF、IE6/7下显示问题以及顶部导航条两端与主体背景绿色接壤问题。综合测试，三款主流浏览器都能兼容了。风格在1024*768分辨率下满屏不会出现滚动条，大于该分辨率显示较好，右侧背景以灰绿补色呈现，整体较好，呵呵，就这样了~如下图所示：


　　遗留已知问题：
　　尽管在主体样式中加入了 position: relative; 解决了右侧栏右移与中栏不靠拢现问题，但造成顶部的flash特效无法加载上，与 #FlashHead{position:absolute;} 反作用冲突了吧，如果去掉自然是无法两全其美了，照顾大局，只能舍去flash树苗特效，想想也不必太花俏了。在此希望能得到大家的帮助，呵呵~

　　解决：2008.6.15 何昕指导下上述问题搞定，即在之后加入z-index:1001;绝对大的值叠加于背景图之上。z-index属性简介

　　该风格看起来就有些花俏吧，绿色主题，提倡环保哈~计划奥运后正式启用，大家喜欢的话可以切换到“绿色淡雅”看看？汗，主体背景图的海枫博客字样还没改过来呢，还是2年前的，下次改啦~

　　题外话：
　　三栏风格看起来大气些，内容也多些，板块也多了，也加入了广告元素，博客不像是博客了，于是把海枫博客，改为海枫在线了，其实2004年申请的域名的时候，就以“海枫在线”之意注册的，海枫-haif，ol-在线，呵呵，想必经常关注本站的朋友们都了解吧。

　　至此本站已经完善改造了四款三栏皮肤，如TJinnStyle（蓝白简洁）、新年2008（新年快乐，记：年初在PJ论坛风格区有幸被版主加分高亮显示了）、北京2008 3rd（北京奥运）、Wheta 3rd（清雅淡绿）。这些皮肤都是参考TJinnStyle三栏风格架构，以此为“蓝本”，折腾一番，其实没什么技术含量，因需而生吧！ 谷歌AD正在载入，请稍候……

点此快速转到评论处，留下您的宝贵见解吧^_^ 本文如需转载，请详细注明出处，尊重版权，尊重别人的劳动成果，谢谢合作哦！

相关日志 详细信息 日志搜索 推荐收藏 反向链接 本站声明 相关日志: 输入您的搜索字词 提交搜索表单   Web www.haifol.com 文章来自: 本站原创 日志标签: 皮肤风格皮肤风格 PJBlogPJBlog CSSCSS 引用通告地址:           → 此文不错，想引用之？点击这里查看引用地址吧！ 关键字 类　型 日志标题 日志内容 日志评论 引用通告 收藏到网摘:  POCO网摘 和讯网摘 收藏到QQ书签 反向链接: ① 本站发表的文章仅属个人观点. ② 凡本站转载的文章,图片,影音等,如若侵权请在本站留言录留言,本站会尽快处理妥当. ③ 允许转载本站部分文章,但请注明出处.若可能,请给我发引用通告. ④ 为了本站的长久存在,请不要盗链本站图片或影音文件地址. ⑤ 以上声明解释权归::海枫在线::所有.