2006年12月13日星期三

简单修改BLOGGER模版中的圆角

我用的是blogger中的rounder2这个模版,圆角与色彩的搭配简单而工整。比较符合我的喜好,但是模版显示分辨是针对760宽度的又让我有些不喜欢,因为现在高分辨率的桌面设置非常多,一般页面展示也越来越倾向于990的宽度设置。那么修改了模版宽度以后其默认的圆角可怎么办那?

一般通过CSS方式展示圆角的方法已经非常多了,在gseek中甚至提到了google中有隐藏的圆角展示代码,也有通过偏移一象素的色彩实现圆角的方法,总之网上有大量的源码资源,但是我选择了一个我个人认为最简单的方法,在修改了blogger模版宽度后圆角不会受到影响。下边是我用到的代码:

outer-wrapper {width:990px;margin:0 auto;text-align:left;font: $bodyFont;}
main-wrap1 {width:725px;float:left;background:$mainBgColor url("你的页脚圆角") no-repeat}
main-wrap2 {float:left;width:100%;background:url("你的页顶圆角") no-repeat left top;
padding:10px 0 0;}
main {background:url("你的页间背景") repeat-y;padding:0;}


一个圆角的页面主要包括上弧的页顶圆,下弧的页脚圆,再加上中间的页间两边的框,所以会用到三张图,通过利用PS根据页面色彩自己画一个圆角图形(宽度依据你的模版宽度设定)然后切割成三份即可生成,上传一处链接空间修改blogger模版中的代码指向图片即大功告成。画的时候可以设定圆角尺寸稍大,更圆些,我这个弄的有点扁了。如果需要可以在圆角图调用处增加height属性。还有就是改前先备份!!!

发布禾草唐楷 禾草唐楷镜像

没有评论: