之前也有很多人写过这个话题的博客了,但是我觉得大家都千篇一律——贴上一堆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浏览器上试验,感觉还是效果不太好,不过浏览器上看着还不错。
山寨是最快捷的创造,因此找一个喜欢的网站,改成它的风格还是很有意思的,我这里参考的是这个网址~有兴趣的可以参考下..
本文转自博客园xingoo的博客,原文链接:博客园样式漫谈——从0到1改变你的博客风格!,如需转载请自行联系原博主。