博客园样式漫谈——从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浏览器上试验,感觉还是效果不太好,不过浏览器上看着还不错。

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

本文转自博客园xingoo的博客,原文链接:博客园样式漫谈——从0到1改变你的博客风格!,如需转载请自行联系原博主。

时间: 2024-10-23 01:36:13

博客园样式漫谈——从0到1改变你的博客风格!的相关文章

博客园文章编辑器5.0版本发布(markdown版)

注意:使用本软件前,需先在博客园后台设置默认编辑器为markdown 开篇 废话少说,先上界面图片: 10月25日,我发布了博客园文章编辑器的4.0版本,得到了很多朋友的支持, (后来我自己发现了一些问题,于是偷偷发了博客园文章编辑器的4.0.1版本,也没通知大家,不过好在有自动升级功能) 当时有很多朋友问我,这个工具支持不支持markdown, 我觉得写markdown的人还是挺多的, 调查了博客园确实支持markdown编辑器, 而且我开发了markdown的编辑器,对于那些使用HTML富文

【开源】博客园文章编辑器4.0版发布

源起 最近个人时间多起来了: 于是打算持续写一点东西: 前面写了两篇关于riot.js的东西: 被博客园的领导移出首页了: 原因之一是排版不整齐: 确实是不整齐,这我认, 然而,我自己可是博客园文章编辑器的作者啊, 而且持续写了三版了,从1.0.0写到3.0.0: 而且有很多园友也在用我的编辑器写博客: (陆续也有人在问我这个工具的下载地址,源码的问题:) 我自己咋就排班不好文章了呢? 于是翻出以前的工具代码, 回顾了一下,发现各个版本都还有很多问题没解决掉: 于是决定大规模重构一遍: 说白了就

博客园与啊里云的故障假设:高需与低配(补充了降频论)

背景:  博客园自从上了啊里云,故障频繁,使得大伙每星期都在看故障报告,对503不知不觉也建立直了深厚的友谊. 故障从硬盘IO到SLB到应用级别的,各自怀疑,各自检测,都各自坚持没问题,但情况是问题依旧. 而解决的方式是博客园不断的购买高配,但仍逃不出503的魔掌. 最终,博客园把怀疑点指向了啊里云的CPU. 啊里云,也怀疑是博客园自身程序问题.  对此问题,园里园外都比较关心,所以,在这背景下,我假设性的分析一下.   注意,以下内容纯属个人意淫,假设性内容,不代表符合事实,仅供各位看热门的参

打造博客园(cnblogs)超级自定义界面_其它综合

定制博客界面的核心方法是通过引用我们自己上传的外部JS,使外部JS的代码能在当前博客页面上执行,从而用这个JS修改页面DOM结构(加入新的界面元素,加入引用自定义的CSS,加入新的界面交互功能),然后我们就可以在自己写的这个外部JS里任意发挥了. 在博客园中的博客页面中引用外部JS的方法: 进入博客设置页面->设置->子标题,在这里,你可以输入你博客的一些子标题的内容,同时,你其实还可以输入如下html:<script src="XXXX">XXXX代表你的JS

如何利用http协议发布博客园博文评论_php实例

先给大家介绍下实现原理: 给博文提交评论的实质就是通过http协议服务器发送一个post请求.在发布评论前,我们需要做什么呢?对,是必须要登录的.但登录是另一件事情,我们这里先不讨论.用户登录后,服务器给客户端设置一个cookie.http是无状态的.也就是说客户端向服务器发送请求后,服务器返回响应.一次通信完成.服务器不会记得刚才是谁向自己发送请求.所以客户端需要拿着服务器给自己设定好的cookie向服务器发送请求并告知服务器自己的身份,服务器根据cookie产生响应. 准备工作: 为了完成本

微信快速开发框架(五)-- 利用快速开发框架,快速搭建微信浏览博客园首页文章

这几天接连发布了<快速开发微信公众平台框架---简介>和<体验微信公众平台快速开发框架>几篇关于微信平台的文章,不过反响一般,可能需求不是很多吧.闲来无事,还是继续改造一下这个框架. 今天更新了框架代码,听取了 @RMay 的建议,加入了一个信息中间件,用来处理xelement,避免了重复解析,所以所有接口都更改了下.此次更新如下: 1.增加信息中间件MiddleMessage 2.更改了接口参数类型,把原来的XElement都改成了MiddleMessage 3.删除了Demo项

在Web微信应用中使用博客园RSS以及Quartz.NET实现博客文章内容的定期推送功能

本篇随笔介绍在Web微信应用中使用博客园RSS以及Quartz.NET实现博客文章内容的定期推送功能,首先对Quartz.NET进行一个简单的介绍和代码分析,掌握对作业调度的处理,然后对博客园RSS内容的处理如何获取,并结合微信消息的群发接口进行内容的发送,从而构建了一个在Web应用中利用作业调度来进行消息发送的业务模型. Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)

狂热+坚持=成功&amp;nbsp;博客园CEO&amp;nbsp;DUDU访谈

博客 人物简介:dudu 1997年毕业于南京电力高等专科学校,对计算机技术有一种执着的兴趣与热情,喜欢挑战性,喜欢为了自己的目标去努力,.NET技术的坚定支持者,博客园的创建者和维护者. 我见过很多技术类个人网站,以前的Visual Basic技术网站.Visual C++技术网站.现在的.net和Java网站,他们有一个共同特点就是在开始的时候红红火火,1-2年后就逐渐消亡,很难作大,很难达到收支平衡.悄无声息的离开,似乎成为技术网站的宿命.不过几年前出现的专注.NET技术的个人网站博客园让

狂热+坚持=成功 博客园CEO DUDU访谈

人物简介:dudu 1997年毕业于南京电力高等专科学校,对计算机技术有一种执着的兴趣与热情,喜欢挑战性,喜欢为了自己的目标去努力,.NET技术的坚定支持者,博客园的创建者和维护者. 我见过很多技术类个人网站,以前的Visual Basic技术网站.Visual C++技术网站.现在的.net和Java网站,他们有一个共同特点就是在开始的时候红红火火,1-2年后就逐渐消亡,很难作大,很难达到收支平衡.悄无声息的离开,似乎成为技术网站的宿命.不过几年前出现的专注.NET技术的个人网站博客园让我们看