之前也有很多人写过这个话题的博客了，但是我觉得大家都千篇一律——贴上一堆CSS的代码，对于新手来说，可能直接拷贝过去CSS代码,能改变下博客的样式，但是知其然不知其所以然，想要自己修改样式，仍然无从下手。
本篇就通过博客布局、CSS基本的方法、JQuery的使用、调试技巧、响应式布局扩展 等几个方面讲述下修改博客样式的经验。
博客布局
博客园的前端结构很规整，因此基本上所有的博客都是一样的。大致可以如下面的Html结构所示：
<html>
<header>
1 默认的样式文件
2 默认的JS文件，如Jquery
3 自定义的样式
4 自定义的JS文件
</header>
<div id="home">
<div id="header">这是导航</div>
<div id="main">这是主题部分</div>
<div id="footer">这是底部</div>
</div>
</html>通过上面的伪代码，我们大概就就知道了，我们自定义的CSS可以覆盖默认的CSS；html中的页首代码可以使用已经加载的JS文件——Jquery。
大致的结构如下图所示：
按照这种方式，继续研究前端的代码，就可以发现下面这些明显的部分：
导航的结构是这样的：
正文部分是这样的：
在博客园中【页面定制CSS代码】可以设置自定义的样式，【页首Html代码】中可以放入<script>标签进行JS的扩展。
CSS的基本方法
关于选择器
在博客园中，大部分都是采用class或者id进行样式设定，那么可以使用不同的选择器选取目标元素设置其样式：
- 如果页面中某个元素有id属性，那么可以通过#xxx {}设置其样式；
- 如果有class属性，可以通过.xxx {}设置样式；
- 如果是特定的标签，可以通过标签名称 a {}设置样式；
一般来说，id用于特定的元素的样式；而class则用于某一批元素的样式。
另外，选择器可以叠加使用，比如我想设置文章内容中的超链接样式：
#main a{
//设置的样式
}
#main a:hover{
//设置鼠标悬浮时的样式
}关于选择器还有很多高级的内容，就不一一介绍了，上面的三种足够调样式了。
关于样式的覆盖
本来CSS中是有样式的覆盖的，感兴趣的可以深入研究下，一般来说，只需要记住：
- 相同的样式设定，下面的会覆盖上面的
- 同一目标中，#会覆盖标签的，具体的他们都有分值来比较，感兴趣的可以多研究下
关于定位
在CSS中有几种常用的定位方法：
- position:absolute 这种定位方法是相对父级的定位，而改变效果的
- position:relative 这种定位是相对于它原本的位置定位。
- position:fixed 这种方式，是直接相对浏览器进行定位。
我的博客中，导航和左边的sideBar都是fixed，这样可以保证他们一直不动，个人是很喜欢这种风格的。
关于盒子模型
盒子模型的意思是每个元素都是由外边距+边框+内边距组成的。外边距可以通过margin设置，边框可以通过border设置，内边距可以通过padding设置，他们都可以细分为left、right、top、bottom四条边，分别可以设置颜色、宽度、样式等。
另外，需要注意边框合并的问题，比如一个ul列表，如果给每个li都设置外边距，其实相当于相邻的li只有一份外边距生效。
关于border-radius
调整样式风格，这个属性是必不可少的。它可以给方块般的元素边框设置圆角，详细的可以参考用户手册
JQuery的使用
上面罗里吧嗦的说了一堆CSS的东西，要扯起来就太多东西要说了。下面简单的说下JS的扩展...
由于我们的页首代码之前已经加载了JQuery文件，因此可以直接使用JQuery的语法。
那么使用JS都可以干嘛呢?
1 改变DOM元素
比如自定义导航：
var _navigator = $('#navList');
//_navigator.empty();
var html = "";
html += addNag("书单","http://www.cnblogs.com/xing901022/p/3694709.html");
html += addNag("Web","http://www.cnblogs.com/xing901022/p/4133587.html");
html += addNag("ELK","http://www.cnblogs.com/xing901022/p/4704319.html");
html += addNag("简历","http://www.cnblogs.com/xing901022/p/4422941.html");
_navigator.append(html);
function addNag(linkName,linkHref){
return "<li><a class=\"menu\" href=\""+linkHref+"\">"+linkName+"</li>";
}简单介绍下上面的代码：
- $('#xxxid') 通过id获得目标DOM元素
- xxx.empty() 清空内部的DOM元素
- xxx.append() 在内部追加DOM元素或者html
- 考虑到每次append都会造成页面的刷新效率很低，这里先拼接完整的html字符串在append到目标元素上
2 自定义事件
比如，我的博客中，如果你点击左边最上面的随笔分类，是有隐藏和显示的效果的，偶尔会有BUG哦~刷新一下页面就好了
var _menuBtn = $('#sidebar_postcategory h3');
_menuBtn.click(function(){
$("#sidebar_postcategory ul").toggle(300);
});调试的技巧
按f12可以弹出控制台，我这里使用的是chrome浏览器。
另外，如果要设置元素的颜色，可以点击元素所在的框框，可以在页面中快速选取相应的颜色。
响应式布局扩展
现在的互联网风格的博客都支持响应式布局，即可以根据浏览器窗口的大小改变内部的样式，具体的是如何实现的呢？
其实很简单：
@media screen and (max-width:800px){
body{}
#header {}
#main {}
#footer {}
}当浏览器宽度小于800px的时候，就会自动使用这个大括号内的样式。所以在这里调整样式，就可以实现响应式的。
我的博客中，在只设置了这一种尺寸，而且删除了很多不必要的元素、并且改变了按钮的风格。
不过还是有点小瑕疵，在uc浏览器上试验，感觉还是效果不太好，不过浏览器上看着还不错。
山寨是最快捷的创造，因此找一个喜欢的网站，改成它的风格还是很有意思的，我这里参考的是这个网址~有兴趣的可以参考下..
