我在博客园看过别人的博客也不少了,不过大部分都是在套用那些个原始模板,自定义样式的博客并不多。我个人强烈建议园友们定制自己的博客页面,增强园友对自己博客的认同感,共同改善园子的外在形象,除此之外,赏心悦目的视觉效果也对学习知识是有所裨益的。你还在原封不动地使用那些博客模板吗?好像应该改一改了。
园子里的博客数量不计其数,可模板的数量却只有那么几十个。
更重要的是,这些模板的外观看起来实在是寒碜,大部分都是早期博客时代的风格。
更更重要的是,这几十个模板在我看来,也只能算几个而已,因为这其中的大部分模板都具有这么几个特点:
1)满屏,满屏的直接结果就是让拥有高分辨率电脑的浏览者阅读体验很差,一段摘要,不到两行就结束了,而且第一行读完,往左移了一公里才找到第二行的开头……我现在电脑是1200pix的宽度,看起这些模板来已经很不舒服,更不要说目前很多电脑的分辨率不只1200pix。
2)字体小,这可能是由于从英文模板移植到中文的原因(良好中文页面体验需要更大字号的字体),很多模板的内容文字依然用的是12px或者10pt等等,并且这样大小的文字再结合上面的第一个特点,整体效果就可想而之了。
3)窄边距,无论是内边距还是外边距,很多模板中依然用了5px或者10px的内外边距,我挺想说:如今大家富裕了,屏幕上像素有的是,尽管用,好看就行。
4)动不动就是1px的border,我被这些1px的条条框框烦透了,这是在追随上个世纪的table时代布局遗风吗,我们更需要的具有现代感的东西。
总而言之,就是这些模板都不怎么漂亮,或者说我都不中意。前两天,我想换个模板用用,于是打开设置页面,找了一遍又一遍,一个让我心怡的都没有。我想很多园友都跟我有同样的感受,不过园子的管理都们都相信大家的前端水平,给了园友很大的自定义范围,要想满足自己对博客外观的要求,可以借助博客设置中的“通过CSS定制页面风格”。
打开:我的博客>管理>设置,找到“通过CSS定制页面风格”,如下图所示。
在利用CSS定制页面的时候,可以部分定制,也可以全部定制。部分定制即把需要重新定义的CSS代码直接粘贴到上图所示的文本框中,然后保存;
全部定制是指禁用模板默认的CSS文件,自己根据页面上的标签定义所有的样式,把CSS代码粘贴到上图所示的文本框中,然后保存。
我采用的是全部定制,不过我没有一点一点地去写全部CSS,我找了一个在布局上类似我想法的模板(LessIsMoreRight),下载它的CSS文件,在这个文件的基础上进行修改完成。
下载模板CSS文件方法是:找一个使用该模板的博客,查看其原代码,找到含有模板名称的文件地址,如下图所示,这个文件就是该模板的CSS文件。
下面是我修改的代码,水平有限,意在抛砖引玉:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
/**************** 公共样式 ****************/ #EntryTag{font-size:9pt;} #divRefreshComments{text-align:right;margin-right:10px;margin-bottom:5px;font-size:9pt;} .topicListFooter{text-align:right;margin-right:10px;margin-top:10px;} /**************** 标签默认 ****************/ *{margin:0;padding:0;} body{margin:0;padding:0;color:#333;background-color:#EAEAEA;font-family:'微软雅黑',verdana,arial;font-size:12px;line-height:1.5;} img{border:0;} li{list-style:none;} input,textarea{border:1px solid #BBB;} h1,h2,h3,h4,h5,h6,th{font-weight:bold;color:#000;} a{text-decoration:none;color:#333;} a:hover{color:#666;} /**************** cnliu定制部分 ****************/ #cnliu_header{} .cnliu_ad_sidebar{margin-top:10px;margin-bottom: 10px; width:300px; height:0;overflow: hidden;} #cnliu_footer{margin-left:30px;padding-left:35px;width:725px;font-size:12px;text-align:left;line-height:150%;} #cnliu_footer a{color:#BBB;} /**************** 共用部分 ****************/ /* layout */ #header{} #mainContent{margin-left:30px;border-left:1px solid #DDD;border-right:1px solid #DDD;border-bottom:1px solid #DDD;width:760px;padding-top:25px;padding-bottom:30px;background-color:#FFF;} #sideBar{position:absolute;width:300px;border-top-width:0;overflow:hidden;padding:0 15px 20px 30px;top:68px;left:790px;} .forFlow{margin:0 35px;} #footer{margin-left:30px; margin-top:30px; padding-left:35px; padding-bottom:5px; text-align:left;} /* header */ #lnkBlogLogo{display:none;} #blogTitle{padding:16px 40px;} #blogTitle h1{font-size:24px;} #blogTitle h2{font-size:10.5pt;color:#999;} #blogTitle .title{font-size:24px;} #blogTitle .subtitle{font-size:10.5pt;color:#999;} #navigator{margin-left:30px;border-left:1px solid #DDD;border-right:1px solid #DDD;width:690px;background:#f6f6f6;border-top:1px solid #DDD;border-bottom:1px solid #DDD;border-width:1px;height:30px;line-height:30px;color:#999;padding-left:35px;padding-right:35px;padding-top:2px;} #navigator img{display:none;} .blogStats{float:right;color:#999;} #navList li{float:left;margin-right:20px;font-size:10.5pt;} /* sideBar */ #sideBar li,.divRecentCommentAticle{text-indent:-1.5em;margin-left:1.5em;} #sideBar h3,#MyIng .ing_title{margin:16px 0 0 0px;font-size:14px;text-align:left;} #calendar{margin-top:16px;text-align:center;} #calendar table{width:90%;margin:0 auto;} #calendar .CalOtherMonthDay{color:#999;} #sideBar .divRecentComment{color:#666;margin:0 0 8px 8px;} #sideBar .recent_comment_body{color:#666;margin:5px 0 8px 18px;text-indent:0px;} #sideBar a {color:#06C;} #sideBar a:hover {color:#17A8FA;} .ing_title a:link,.ing_title a:visited,.ing_title a:hover,.ing_title a:active{ font-weight:bold; } div.commentform textarea { width:450px;height:300px;ont-size:13px;} /**************** 各子页面 ****************/ .dayTitle{display:none;} .entrylistTitle,.thumbTitle,.PostListTitle,.forFlow h3 div,.galleryTitle{font-size:14px;font-weight:bold;margin-top:20px;text-align:left;} .entrylistDescription,.thumbDescription{margin-left:16px;} .postTitle,.entrylistPosttitle,.feedback_area_title{border-bottom:1px solid #ddd;font-family:'宋体','微软雅黑';font-size:14px;font-weight:bold;margin:20px 0 10px;} .postBody {color:#111;font-size:13px;line-height:170%;} .postBody span{color:#111;font-size:13px;line-height:1.5;} .postBody h5{font-size:10pt} .postBody p,.postCon p{margin:12px auto;} .postCon{overflow:hidden;font-size:13px;} .c_b_p_desc{line-height:170%;} .postCon a,.postBody a,.feedbackCon a{text-decoration:underline;color:#0066cc;} .postCon a:hover,.postBody a:hover,.feedbackCon a:hover{border-color:#999;} .postDesc,.entrylistItemPostDesc{border-bottom:0px dotted #999;color:#666;text-align:right;padding-bottom:5px;vertical-align:middle;} .postDesc a:link,.postDesc a:active,.postDesc a:visited{color:#666;text-decoration:none;} .postDesc a:hover{text-decoration:underline;} .PostList{float:none;clear:both;text-align:right;width:96%;margin:auto;padding:6px 0;overflow:hidden;border-bottom:1px dotted #ccc;} .postTitl2{float:left;} .postText2{text-align:left;color:#666;} .feedbackItem{padding:8px;border-bottom:1px dotted #ccc;} .feedbackManage{float:right;} .feedbackCon{margin-left:1em;color:#666;line-height:1.5;} .commentform td div span{margin-left:12px;} .gallery img{margin:8px;} #taglist{margin:20px auto;} .pfl_feedback_area_title{font-size:16px;margin:16px 0;font-weight:bold;} .pfl_feedback_area_title a{font-size:12px;color:#999;font-weight:normal;} .pfl_feedbacksubtitle{height:30px;} .pfl_feedbackname,.pfl_feedbackManage{float:left;margin:10px 20px 0 0;} .pfl_feedbackCon,.pfl_feedbackAnswer{clear:both;margin-left:12px;} .btn_my_zzk{border:0px;} #sideBarMain{padding-left:0px;} #MyIng{padding-left:10px;} div#sideBar div#side_ing_block ul li{margin-left:0px;text-indent:0px;} #side_ing_block{line-height:180%;} #EntryTag {margin-top:10px;} #blog_ad_google h3{margin-bottom:10px;} #digg_block a:link,#digg_block a:visited,#digg_block a:active { color: #015FB6; } #digg_block{color: #015FB6;} span.diggnum{color: #015FB6;} span.burynum{color: #015FB6;}