博客园样式漫谈——从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，这样可以保证他们一直不动，个人是很喜欢这种风格的。

关于盒子模型

盒子模型的意思是每个元素都是由外边距+边框+内边距组成的。外边距可以通过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浏览器上试验，感觉还是效果不太好，不过浏览器上看着还不错。

山寨是最快捷的创造，因此找一个喜欢的网站，改成它的风格还是很有意思的，我这里参考的是这个网址~有兴趣的可以参考下..

posted @ 2016-03-21 22:19 xingoo 阅读(3829) 评论(16) 编辑收藏举报

刷新页面返回顶部

xingoo