园子美化

 

从整体结构层次上：

首先，博客园有一套顶级的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文件，查到该类实现的地方，然后复制过来，就可以。

 

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

 

view source

print?

01

/*整体背景*/

02	body{background-color:#F3F8FC; }

03	/*左边链接风格*/

04	.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;}

05	.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;}

06	.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;}

07

/*导航栏*/

08	#navigator{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/r_navbg.gif) repeat-x;}

09	/*左边分类标题*/

10	.catListTitle{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x; padding:2px 5px 1px5px;}

11	/*右边正文标题背景*/

12	.postTitle{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x;padding:2px 5px 1px 5px;margin-top:10px;}

13

/*输入框*/

14	.input_my_zzk,.comment_textarea,.author,.url{background-color:#F3F8FC}

15

/*按钮*/

16	.comment_btn,.btn_my_zzk{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x;}

17	/*隐藏公告这两个字*/

18	.newsItem{padding-top:15px;padding-left:5px;padding-right:5px;}

19	.newsItem .catListTitle{display:none;}

20	/*右边正文标题字*/

21	.postTitle a{font-size:15px; font-weight:bold; text-decoration:none;}