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

最新推荐文章于 2025-11-05 20:48:02 发布

转载最新推荐文章于 2025-11-05 20:48:02 发布 · 114 阅读

文章标签：

#xhtml

本文介绍如何通过简单的CSS代码更改博客园博客的皮肤图标，实现个性化博客外观。利用IEDeveloperToolbar工具辅助分析DOM结构，轻松实现图标替换。

大家一起来博皮

虽然博客园的皮肤很多，而且很漂亮。但是那些自己想更“个性化”自己博客皮肤的朋友，对博客园的皮肤模板还是颇多不满，认为皮肤的结构过于混乱，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”图标。

“IE Developer Toolbar”图标

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

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

点击“IE Developer Toolbar”图标，即可打开“IE Developer Toolbar”（界面如下图所示）。

“IE Developer Toolbar”界面

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

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

“通过点击获得元素”按钮

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

在FireFox中利用firebug

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

FireFox下的“Web Developer”

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

现在就开始吧！

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

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

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

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

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

两行代码一个皮肤

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

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

图标附近的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://i-blog.csdnimg.cn/blog_migrate/727d53072fd0e5e14bfa351d7e12662d.gif') no-repeat ; }

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

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

【通过CSS定制页面】

然后，返回你博客首页，看看效果吧～是不是还不错呢？

最终效果截图

博客园博皮小组

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

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

下期预告——

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

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