【详细图解】一步一步教你自定义博客园（cnblog）界面
写在开头
我以前在博客园没怎么发东西，就是以为博客园的Markdown不支持实时预览，加上markdown显示出来的效果，主页皮肤效果老是以为很奇怪不能让我满意。css
可是我今天偶然发现，原来博客园是容许自定义样式的，我以为我以前傻了。这点特别好，能够避免本身的博客和别人的雷同，能够个性化本身的主页，文章显示效果也能够本身控制，好似一下又回到了
作qq空间的年代markdown
虽然博客园如今支持的模板已经不少了，可是咱们仍是加入一些本身的元素让本身的主页更加生动符合本身的风格。ide
设置自定义css的地方在：设置的页面定制CSS代码
post
对于基础的好的人，固然能够彻底本身作一个皮肤出来，能够彻底禁用默认的CSS，对于咱们实用注意者来讲，仍是“借鉴”比较好。字体
学CSS
你要学会定制，怎么的也要会一些基础的CSS吧？咱不说精通，起码什么background，font，border，margin之类的应该知道怎么用，其余的能够边看边查。code
通常来讲都是去w3school把~必定要掌握个大概再继续哦~~blog
http://www.w3school.com.cn/css/index.aspget
选择一个模板
咱们在皮肤里先挑一个现成的模板开始咱们的定制之旅，这里我选了SimpleMemory，我仍是喜欢这种朴素的风格。
博客
这个模板自己就挺好看，不用定制也能够，可是我以为它默认有点过于“精致”，页面只显示65%，分明没充分利用空间嘛。it
查看元素
咱们开始定制的第一步就是学会查看元素，基本Chrome和Firefox均可以用F12来方便查看页面元素。
通常来讲当前CSS样式能够直接显示在右边，而且是能够编辑的！
而后点这个按钮
这个按钮就是能够用鼠标选择页面中的元素，而后下面会显示对应的元素。
好了，咱们看到这里是<div id="home">,它的样式表也显示在右边了，咱们能够看到果真，这里的width只有65%。
这里我以为90%挺好的，能够看到，页面直接根据个人修改变化了！
而后我以为顶部也能够小一点，我把margin-top改为 20px;
好了这个总体我以为不错了，我想保存这个怎么办呢？很容易，直接复制这个元素的CSS就好了。
而后粘贴到前面说的页面定制CSS代码的地方，其实你能够只用复制你修改的部分，其余的不用复制，可是为了方便，就这样全复制过来也行。
而后保存，再回到本身的主页看看，是否是变了?
这里我强烈建议你们开2个界面，一个是设置界面，一个是主页界面，修改了一个元素就在设置界面里增长，防止忘记保存！！
更进一步
标题
我想让标题更大点
我以为50px不错
导航栏
导航栏也要大点，并且字有点偏下了，移动上来点，而后最好移动的时候变蓝色
字体变大
移动变色
移动上点
好了，这里咱们保存一下
奇怪，导航栏颜色怎么没变化？？？
注意：这里不能直接复制a，若是你有点CSS基础了应该知道，这里的a是特指#navList下面的a，因此这里咱们要在a前面加上#navList
咱们再保存看看
是否是好已经修改了？
侧边栏
侧边栏的标题我以为很差看 找到这个元素
知道是用的.catListTitle类，我就对它进行大改
改完效果
修改内容显示和边栏显示
我想把这内容和边栏显示换一下，
经过查看元素咱们知道这两部分分别为mainContent和sideBar
我把mainContent的float改为right
好了，看差很少了，这里感受和边栏有点近
咱们把sidebar的float改为left
好了大功告成！
剩下的，还有不少能够个性化的地方，由你们本身去发挥吧!!
对了，文章里面的标题，h1，h2，p,img什么的也能够改哦~~你们自由发挥吧！只要在前面加上#cnblogs_post_body就好了（大家本身应该也能找到）