大家一起来博皮——1:两行代码一个皮肤,树立信心篇

大家一起来博皮——1:两行代码一个皮肤,树立信心篇
大家一起来博皮

虽然博客园的皮肤很多,而且很漂亮。但是那些自己想更“个性化”自己博客皮肤的朋友,对博客园的皮肤模板还是颇多不满,认为皮肤的结构过于混乱,css样式难以掌控。针对这种情况,博客园开发团队在2007年底,对博客园皮肤模板进行了较大程度的改进和调整,力求让更多的朋友能够更方便、简单的制作自己个性化的博客皮肤。

但是,到底如何利用新的皮肤模板,来制作个性化的博客皮肤呢?且看《大家一起来博皮》系列文章,告诉你制作个性“博皮”的秘密。

引言

博客园开发团队在2007年底,对博客园皮肤模板进行了较大程度的改进和调整。这下,博友们自己终于可以更方便的制作“博皮”了。

因为,我一直希望能做一套自己个性化的博皮。所以,第一时间便对这个新的博客皮肤模板进行了一些研究和摸索(当然,现在也仍然在继续对探索中……)。这里,我将自己对这套博客皮肤模板的一些探索结果和经验技巧,写成系列文章,拿出来和大家一起分享。不仅希望能得到大家的指点,也希望更多的,和我一样热爱博客园的朋友,能够制作出更美、更漂亮的博皮,让大家一起分享!

今天这篇文章,是用来树立信心用的,所以会很简单,甚至“无味”,但是为了兼顾到一些对css不是很熟的朋友,还请各位高手海涵。

工欲善其事,必先厉其器

不急,不急!先别急着看新的皮肤模板。让我们先来找点能够“事半功倍”的工具。

利用“IE Developer Toolbar”查看页面DOM和CSS信息

相信“IE Developer Toolbar”是很多开发者的朋友,利用它可以很方便地在IE下面查看网页DOM结构和CSS样式信息。还没有使用过这个工具的朋友,这篇文章可能对你有所帮助。 《介绍两个b/s开发中我常用到的小工具》

上篇文章中虽然提供了下载,但是却没有进行使用说明。其实“IE Developer Toolbar”都是用很简单,所以下面就进行一下简单的说明吧。

第一步:下载安装

没有什么好说的,下载地址和简要介绍可以参看《介绍两个b/s开发中我常用到的小工具》 这篇文章。

第二步:确定安装成功

打开IE(不能是IE内核的第三方浏览器,例如傲游,theWorld等),看IE上方的工具栏中是否出现了下图中所示的“IE Developer Toolbar”图标。

大家一起来博皮——1:两行代码一个皮肤,树立信心篇
“IE Developer Toolbar”图标

如果,你没有发现这个图标,请在IE工具栏中点击鼠标右击 →【自定义】→在【自定义工具栏】对话框的左边看是否有。如果还没有的话,请重新安装“IE Developer Toolbar”。

第三步:用“IE Developer Toolbar”查看页面DOM

点击“IE Developer Toolbar”图标,即可打开“IE Developer Toolbar”(界面如下图所示)。

大家一起来博皮——1:两行代码一个皮肤,树立信心篇
“IE Developer Toolbar”界面

上面是菜单和工具栏,左面是IE当前打开页面的DOM结构;中间是“当前元素”的属性;右面是“当前元素”的样式。

使用“通过点击获得元素”按钮,便可以通过在页面上点击,来将鼠标点击的元素变成“当前元素”了(超链接也可以放心的点击,不会跳转的)。如下图所示。

大家一起来博皮——1:两行代码一个皮肤,树立信心篇
“通过点击获得元素”按钮

通过上面三步,我们便可以分析网页的DOM结构和各个元素的样式啦。

在FireFox中利用firebug

FireFox中有一个firebug,功能更强大。有兴趣的朋友可以下载自己研究一下,因为这篇文章是用来树立信心的,所以就不讲这些强悍的东西了。

FireFox下的“Web Developer”

FireFox下另外一个功能强大的,网页开发者一定会喜欢的插件。有兴趣的朋友可以下载自己研究一下,因为这篇文章是用来树立信心的,所以就不讲强悍的东西了。

现在就开始吧!

最新的博客皮肤模板的名称叫做“custom”,但是今天我们先不讲这个皮肤模板,而是从另一个博皮开始,它的skin名叫做“FFandIE”,它是根据“custom”皮肤模板制作的一个新的博皮。

你可以通过下面的步骤,将你的博客皮肤设为“FFandIE”。

进入你博客园博客后台→【选项】→【Configure】→【Display Skin】。在这里选择“FFandIE”→【SAVE】保存。

为什么要使用“FFandIE”博皮呢?那是因为——

  1. 这个博皮是根据最新的博客皮肤模板“custom”制作的,所以前面的XHTML结构是最新的。
  2. 这个博皮还蛮漂亮的,至少俺比较喜欢。呵呵……
  3. 这个博皮带那个FireFox狐狸缠绕IE的图标是整个博皮的灵魂,只要替换这个图标就能更换整个博皮的灵魂,从而产生一种“像一个全新的皮肤一样”的感觉。
  4. 文章标题“两行代码一个皮肤”,就是根据这个皮肤来的。

两行代码一个皮肤

当你看“FFandIE”博皮时,最吸引眼球的无疑是那个FireFox狐狸缠绕IE的图标。的确,整个博皮的风格就是这个图标。当你将这个图标替换后,你就会发现,整个博皮的风格也会随之改变。那如何来替换这个图标呢?其实很简单——

使用“IE Developer Toolbar”工具,我们可以得到那个图标附近的DOM结构(如下图所示)。DOM结构很简单,其实就是一个超链接<a>标签(id为“lnkBlogLogo”)里面,包一个图片<img>(id为“blogLogo”、大小为121px*145px)。

大家一起来博皮——1:两行代码一个皮肤,树立信心篇
图标附近的DOM结构

如果想换图片,我们通常的做法是直接修改img的url地址。但是,我们制作新的博皮时,并不能修改前台的结构,自然也不能修改图片的url地址。那怎么才能更换这个图片呢?其实很简单——要显示图片,并不一定要使用<img>标签,利用元素的背景图片也一样能达到效果。所以只要简单的两句就能达到效果。

/*让现有的图片消失*/
#blogLogo
{display:none;}
/*用超链接的背景图片呈现效果,可以根据你自己的图片设置width和height,以及用top和left来设置图片的位置*/
#lnkBlogLogo
{display:block;width:121px;height:145px;top:5px;left:50px;background:url('https://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo06.gif') no-repeat;}

那么将这两句话,放在什么地方呢?其实,博客后台有个【通过CSS定制页面】,只要放在那里,我们自定义的样式就会覆盖原有相对的样式了。

具体步骤:进入博客园博客后台【管理】→【选项】→【Configure】→【通过CSS定制页面】→将上面的两句代码贴在这里就可以了(当然,最后还要保存修改才可以)。如下图所示:

大家一起来博皮——1:两行代码一个皮肤,树立信心篇
【通过CSS定制页面】

然后,返回你博客首页,看看效果吧~是不是还不错呢?

大家一起来博皮——1:两行代码一个皮肤,树立信心篇
最终效果截图

相关资源

这里是一些可能对你有用的图片和资源(为什么不将下面的图片立刻用在上面学到的知识中呢?)——

  • “FFandIE”博皮图标设计(psd格式): 点击下载
  • 可能对你有帮助的图片01——
    地址:
    https://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo01.gif
    效果图:
    大家一起来博皮——1:两行代码一个皮肤,树立信心篇
  • 可能对你有帮助的图片02——
    地址:
    https://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo02.gif
    效果图:
    大家一起来博皮——1:两行代码一个皮肤,树立信心篇
  • 可能对你有帮助的图片03——
    地址:
    https://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo03.gif
    效果图:
    大家一起来博皮——1:两行代码一个皮肤,树立信心篇
  • 可能对你有帮助的图片04——
    地址:
    https://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo04.gif
    效果图:
    大家一起来博皮——1:两行代码一个皮肤,树立信心篇
  • 可能对你有帮助的图片05——
    地址:
    https://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo05.gif
    效果图:
    大家一起来博皮——1:两行代码一个皮肤,树立信心篇
  • 可能对你有帮助的图片06——
    地址:
    https://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo06.gif
    效果图:
    大家一起来博皮——1:两行代码一个皮肤,树立信心篇

博客园博皮小组

大家一起来博皮——1:两行代码一个皮肤,树立信心篇
博客园博皮小组

这是《大家一起来博皮》系列第一篇,高手看来可能比较不屑。但是,每个人都有个性化自己博客的权利。所以,为了照顾到更多的朋友,还是写了这么简单的东西。最后做个广告——对制作博皮有兴趣的朋友来参加【博客园博皮小组】哦,让我们一起制作出更多、更漂亮的博皮!

如果你对博客园博皮制作有兴趣和疑问,请你访问【博客园博皮小组】,发挥你的想象,让单调的黑白变成绚丽的彩色吧!

下期预告——

真正的来接触新的博客园皮肤模板“custom”吧。对于高手,先透露一个网址吧——http://skintemplate.cnblogs.com,这个是由博客剥离出来的静态页面,结构和真正的博客皮肤是一样的,这样就可以方便的在本地调试和修改了。这些,都将是下期会讲到的哦。

注意:新的博客皮肤模板,页面中98%以上的元素都可以通过CSS选择符明确的定位到(2%没有改变是因为考虑到历史遗留问题和修改成本)。这样只要通过修改CSS样式表,而不用修改页面结构就可以制作出新的博皮。所以,制作博皮的朋友请注意:请只通过修改CSS来制作新的皮肤,而不要修改前面的XHTML结构哦。如果有什么地方,你认为不能通过CSS来控制,请向博客园【博皮小组】反馈。谢谢!

转载于:https://www.cnblogs.com/JustinYoung/archive/2008/02/27/lets-blog-skin-01.html