博客园样式漫谈——从0到1改变你的博客风格！
之前也有很多⼈写过这个话题的博客了，但是我觉得⼤家都千篇⼀律——贴上⼀堆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，这样可以保证他们⼀直不动，个⼈是很喜欢这种风格的。
关于盒⼦模型
jquery弹出div窗口盒⼦模型的意思是每个元素都是由外边距+边框+内边距组成的。外边距可以通过margin设置，边框可以通过border设置，内边距可以通过padding设置，他们都可以细分为left、right、top、bottom四条边，分别可以设置颜⾊、宽度、样式等。
另外，需要注意边框合并的问题，⽐如⼀个ul列表，如果给每个li都设置外边距，其实相当于相邻的li只有⼀份外边距⽣效。
关于border-radius
调整样式风格，这个属性是必不可少的。它可以给⽅块般的元素边框设置圆⾓，详细的可以参考
JQuery的使⽤
上⾯罗⾥吧嗦的说了⼀堆CSS的东西，要扯起来就太多东西要说了。下⾯简单的说下JS的扩展...
由于我们的页⾸代码之前已经加载了JQuery⽂件，因此可以直接使⽤JQuery的语法。
那么使⽤JS都可以⼲嘛呢?
1 改变DOM元素
⽐如⾃定义导航：
var _navigator = $('#navList');
//_pty();
var html = "";
html += addNag("书单","wwwblogs/xing901022/p/3694709.html");
html += addNag("Web","wwwblogs/xing901022/p/4133587.html");
html += addNag("ELK","wwwblogs/xing901022/p/4704319.html");
html += addNag("简历","wwwblogs/xing901022/p/4422941.html");
_navigator.append(html);
function addNag(linkName,linkHref){
return "<li><a class=\"menu\" href=\""+linkHref+"\">"+linkName+"</li>";
}
简单介绍下上⾯的代码：
$('#xxxid') 通过id获得⽬标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浏览器上试验，感觉还是效果不太好，不过浏览器上看着还不错。
⼭寨是最快捷的创造，因此⼀个喜欢的⽹站，改成它的风格还是很有意思的，我这⾥~有兴趣的可以参考下..

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。