昨天在发布博客园的第一篇花了很多时间和精力编写的博客后《模块化利器: 一篇文章掌握RequireJS常用知识》，有博友问个人的博客风格是如何自定义的，今天特将月前整理博客时用到的一些方法总结如下，希望能对你设计自己的博客有一些帮助：）

第一步，上传自定义的css

在浏览器中直接打开，然后按ctrl + s，即可将本人博客用到的自定义css下载下来。接着在博客的管理页面，找到文件选项卡，上传刚刚下载的文件：

上传之后，记下该文件的url，如上图中的红框所示。注：上图中的url为本人博客的自定义css文件地址，你在后面设置的时候虽然也可以用它，但是最好还是不用，万一将来我把这个文件删了，你的博客就访问不到这个css了。

第二步，设置页面定制的css和页首html

在博客管理页面，找到设置选项卡：

在该选项卡下面，先修改标题，在标题文本前面先添加下面的一段html：

页面效果如下：

这段html，在后面的步骤中用来设置头像。

接着在博客皮肤配置处，选择下面的皮肤，因为第一步上传的css文件是在该皮肤下修改得到的，部分css可能还是得依赖该皮肤的原来的css文件：

接着在页面定制css部分，粘贴下面的代码：

div.post div.entry { font-family: Georgia, "Times New Roman", Times, sans-serif } div.post div.entry h1, div.post div.entry h2, div.post div.entry h3 { margin-top: 24px; margin-bottom: 12px; } div.post div.entry h1 { padding: 5px; color: white; background-color: gray; } div.post h2 { font-size: 22px; line-height: 100%; } div.post div.entry pre.code { font-family: Consolas border-style : dashed; border-left: solid 5px #6ce26c } div#information { background-color: #f8f8ee; border: solid 1px #e8e7d0; padding: 5px 10px 0px 10px; min-height: 10px; margin-top: -15px; margin-bottom: 30px; color: #666666 } .cnblogs_code { border-left: #58CE60 5px solid !important; } #site_nav_under, .c_ad_block, #under_post_news, #under_post_kb { display: none !important; }

页面效果如下：

接着在页首html区域，粘贴如下代码：

body { background background-size background-attachment input[type="button"].btn_my_zzk { width #home { border-top-right-radius #blogTitle .title { position background .portrait { display position left top width height border-radius overflow background background-size transition -moz-transition -webkit-transition -o-transition .headermaintitle:hover .portrait { -moz-transform -webkit-transform -o-transform transform ::-webkit-scrollbar { width height ::-webkit-scrollbar-thumb { background-color border-radius ::-webkit-scrollbar-thumb:hover { background-color ::selection { color background #topics a:hover { padding; text-decoration color border-radius background-color .postTitle { padding-left background .subtitle { padding-left #blogTitle { padding-bottom #nav_q,#nav_ing,#nav_newpost { display #sideBar { border-top-width #navigator { margin-bottom #sideBarMain { margin padding-right padding-left .catListTitle { border-top-color border-right-color border-bottom-color #home { margin //width #green_channel { width #tbCommentBody { width display box-sizing

页面效果如下：

需要注意的是这段代码中，有3处需要改成你自己博客相关的文件。第一处的文本是：

你要在代码中搜索该段文本，并替换为第一步中你在自己博客中上传的css。

第二处是：

这张图片时博客的背景图片，是我从百度上下下来的分辨率比较大的图片，以便呈现出一个大图的网页背景。由于博客管理页面允许上传的文件不包括图片文件，所以这张图片是插入在一篇草稿博客中的：