完成改造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正在载入,请稍候……
点此快速转到评论处,留下您的宝贵见解吧^_^

本文如需转载,请详细注明出处,尊重版权,尊重别人的劳动成果,谢谢合作哦!
Google内容AD正在载入,请稍候……

相关日志
详细信息
日志搜索
推荐收藏
反向链接
本站声明

    相关日志:

     
评论: 4 | 引用: 0 | 查看次数: 7113 | 打印此页 | 关闭此页 | 返回顶部 | 直达底部
评论列表 ↓ 点击显示/隐藏4条博友们的评论
发表评论

① 若您已是本站注册用户,请填入名称和密码,发表留言后即默认登陆.
② 若您尚未在本站注册,为了保护您的发言权,建议您注册账号,进而保护您的名称在本站不被他人所占用.若未特别说明,本站原创或转载的文章,均遵循创作共用协议.^_^
③ 若您不想注册,可以只填写用户名进行发表.
④ 转载本站文章,请注明出处,或者填写文章的引用通告地址,谢谢!
⑤ 本站注册是免费,自由的,但发表 评论/留言 即默认您遵守本站用户协议.
昵 称: 要想好哦.
密 码: 游客评论不需要密码.
验证码: 刷新验证码 | 不区分大小写.
内 容:
选 项:
(发表评论后,帮点点广告,友情支持下)
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册账号.
字数限制 500 字 | UBB代码 开启 | [img]标签 关闭