博客园模板CSS修改心得及方法。

经过不断改进,现在这个风格,个人感觉还是比较满意的。

下面把心得和方法贴出来,供以后查看,或其他新手查看。(由于本人是第一次弄关于CSS的东西,所以肯定很粗浅,高手就仅当娱乐,或直接绕道吧。)

 

从整体结构层次上:

首先,博客园有一套顶级的CSS样式,

然后,选择了一个模板的CSS样式。这个模板继承了博客园的CSS样式,然后重写其中的一些类,达到模板的风格效果。

最后,在模板CSS样式的基础上,我们自己在重写一些类,达到自己想要的效果。自己写的代码就贴在(通过CSS定制页面风格)里面。

跟C++里面的继承基本一样。  自己样式:模板样式:顶级样式。

 

从具体的实现上:

我们不需要去看顶级样式,因为顶级基本是个白板,都会被模板覆盖掉的。

直接去选一个模板,然后查看博客源文件,找到模板的CSS文件地址,然后打开,模板的实现都在这里。我选的是http://www.cnblogs.com/Skins/LessIsMore/style.css

然后,看自己的界面,修改不满意的地方。具体操作:先打开源文件,查找到需要修改的地方,前面有个class="XXX",其中的XXX就是需要修改的类名。然后自己重写这个类即可。重写方法,如:body{background-color:#F3F8FC;}为修改整体背景颜色。另外一个查找类名的方法是看博客园的文档,下载地址:http://skintemplate.cnblogs.com/

重写的内容,自己不会写,没太大关系,用最高效的复制粘贴大法。看别人谁的好看,或是自己其他地方的好看,直接打开css文件,查到该类实现的地方,然后复制过来,就可以。

 

下面是我自己写的所有的代码:

 /*整体背景*/
body{background-color:#F3F8FC; }
/*左边链接风格*/
.catListPostCategory ul li,.catListPostArchive ul li,.catListImageCategory ul li,.catListComment ul li,.catListView ul li,.catListFeedback ul li,.catListEssay ul li,.catListLink ul li,.newsItem ul li{ margin-top:1px; margin-left:3px;}
.catListPostCategory ul a,.catListPostArchive ul a,.catListImageCategory ul a,.catListComment ul a,.catListView ul a,.catListFeedback ul a,.catListEssay ul a,.catListLink ul a,.newsItem a{ text-decoration:none;color:#3b5999;}
.catListPostCategory ul a:hover,.catListPostArchive ul a:hover,.catListImageCategory ul a:hover,.catListComment ul a:hover,.catListView ul a:hover,.catListFeedback ul a:hover,.catListEssay ul a:hover,.catListLink ul a:hover,.newsItem a:hover{ text-decoration:underline;}
 /*导航栏*/
#navigator{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/r_navbg.gif) repeat-x;}
/*左边分类标题*/
.catListTitle{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x; padding:2px 5px 1px 5px;}
/*右边正文标题背景*/
.postTitle{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x;padding:2px 5px 1px 5px; margin-top:10px;}
/*输入框*/
.input_my_zzk,.comment_textarea,.author,.url{background-color:#F3F8FC}
/*按钮*/
.comment_btn,.btn_my_zzk{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x;}
/*隐藏公告这两个字*/
.newsItem{padding-top:15px;padding-left:5px;padding-right:5px;}
.newsItem .catListTitle{display:none;}
/*右边正文标题字*/
.postTitle a{font-size:15px; font-weight:bold; text-decoration:none;}
posted @ 2009-12-17 20:32  傲衣华少  阅读(2357)  评论(1编辑  收藏  举报