blogbus模板修改实战之 背景图片修改篇

该日志由 jiee @ 21:59:00 发布,Tag:

声明：这套模板并非万恶制作，而是 fuqilan(点此查看作者博客)根据iZ的Pennyroyal Tea主题修改的。这个教程的目的是想让大家理解css中background的用法，希望能够有用……下面是教程中要用到3张图片（fuqilan发给我的）的缩略图：
（实际尺寸：960X210）
（实际尺寸：960X9)
（实际尺寸：960X135)

先看下教程用模板最终效果。

下面我们再来看下iZ的Pennyroyal Tea主题的样式结构：
以及相应的html代码结构：
好了，进入正式的改造工作了！进入新/旧模板系统中，新建自定义模板后，导入Pennyroyal Tea主题代码后，使用改主题（一定要点击“使用自定义模板”，不然的话，用的还是系统模板）。原模板的布局是按照764px的宽度进行的，而我们现在的效果图是按照960px的宽度布局的，因此我们得修改布局宽度为960px。
1.修改宽度：进入css代码块中，复制代码块到记事本中（或者其它文本编辑器），替换764为960（全部替换）。再复制修改后的代码到css代码块中，查看下页面效果吧：
2.修改body（页面主体）的背景图片：因为页面主体有条纹图片的干扰，我们这里选择去除原有的条纹背景。再次复制css代码到记事本中，搜索body，去掉其中url的图片地址即可，修改后应该是这样的了：
background: #FFF url() top left repeat-x;
去除背景条纹后的页面效果：
3.修改header部分（头部）的背景图片：现在要修改头部的背景图片了！恩，继续搜索#header，其中有这样的代码： 
background: url(http://public.blogbus.com/blogbus/skin/5080/headerna.jpg) top center no-repeat;
4.修改container部分（内容区）的背景图片：继续搜索#container，其中有这样的代码：
 background: #FFF url(http://public.blogbus.com/blogbus/skin/5080/mainbg.gif) top center repeat-y;
5.修改footer部分（底部）的背景图片：继续搜索#footer，其中有这样的代码：
 background: url(http://public.blogbus.com/blogbus/skin/5080/footerbg.gif) left bottom no-repeat;
好了，现在再来查看下效果吧：
6.细节处理：从上面的截图中我们可以看到footer块的背景并没有显示完全。定位到
#footer {
 margin: 30px 0 0;
 background: url(http://files.blogbus.com/mobanxx2.blogbus.com/files/s/11999718612.jpg) left bottom no-repeat;
}
中，修改 margin: 30px 0 0; 为padding: 35px 0 0;
修改后的css代码我这里提供了下载，如果你懒得话，就自己复制到css中试试效果吧……
这节的教程就到这了，大家自己试着按照这个教程修改下吧。当然，如果你会ps的话，你可以按照相应的尺寸去处理一些素材图片后，在css中替换相应的图片网址，这样，一个新模板不就有了吗？
分类于：模板教程 您可以: 阅读全文 () | 评论 (10) | 引用 (0)

评论

  • [avatar:40]jiee同学~教程很好很强大，让我这个对代码一点不懂的人都能学得差不多~
    不过这篇教程里的740实际上是764吧？害我找了N久都找不到~~

    jiee 回复 夏小花 说：
    恩，对，不好意思，我也一直没发现，经你一说，我去看了下日志，发现前面还在说764，后面又变成740了，，
    不好意思，让你迷惑了
    (2008-07-31 13:08:57)

    夏小花 () 发表于 2008-07-30 14:45:32  [回复]

  • [avatar:40]为什么我的没反应？？是不是少了什么程序？？

    jiee 回复 YY 说：
    可能是你没有使用自定义模板，或者你可以试试强制刷新！还不行的话，你可以加我qq……
    (2008-04-23 22:00:45)

    YY () 发表于 2008-04-23 18:53:23  [回复]

  • [avatar:42]这个模板真不错
    不过万恶的讲解更经典
    深入浅出，通俗易懂。

    jiee 回复 六号袜子 说：
    “经典”，我倒不知道能不能算得上

    但我是想通俗易懂来着的……
    (2008-01-16 19:51:19)

    六号袜子 (http://www.6socks.com) 发表于 2008-01-16 17:57:49  [回复]

  • [avatar:40]不知道为什么，在这边留言后，我突然自救成功了也。。。还是谢谢你

    jiee 回复 大we 说：
    自救成功，那就不用谢我咯，

    也谢谢你的关注
    (2008-01-16 19:52:47)

    大we () 发表于 2008-01-14 23:44:05  [回复]

  • [avatar:40]因为我整个背景是白的，如果整个背景改成比如绿的，那么日志部分也就变成绿的，我希望日志部分仍是白的~该怎么做呢？

    大we () 发表于 2008-01-14 22:30:36  [回复]

  • [avatar:40]我想问怎么把日志部分的背景改成白的，现在我的版是透明的，改了整个背景，日志部分也跟着变了~

    jiee 回复 大we 说：
    "现在我的版是透明的",我这边看是白色的啊？

    你是说要修改日志部分的背景吗？
    (2008-01-14 21:17:21)

    大we (http://a-we.blogbus.com) 发表于 2008-01-14 20:32:07  [回复]

  • 抱歉~由您的blog名直接定义成用户名了。。。。

    jiee 回复 JC 说：
    哈哈，不要紧啊，不过还是叫我jiee舒服点，
    “万恶”是我的博客简称
    (2008-01-12 23:07:57)

    JC (http://jessie0426.blogbus.com) 发表于 2008-01-12 23:01:11  [回复]

  • 这个范例模版很cool~
    符合玩美化的人的口味~[face:03]

    顺便问问，有多少人阅读全文这个咋弄得啊？
    能教教否？[face:11]

    anya (http://an-ya.blogbus.com/) 发表于 2008-01-12 14:46:34  [回复]

  • 受教了。我是小鸟。[face:03]

    jiee 回复 justinby 说：
    哈哈，有用就好……
    (2008-01-12 01:50:49)

    justinby (http://ponders.blogbus.com) 发表于 2008-01-11 22:27:21  [回复]

  • 这个教程很适合入门级的用户使用，万恶同学真是造福世人的说[face:03]

    jiee 回复 JC 说：
    万恶同学？
    (2008-01-12 01:49:34)

    JC (http://jessie0426.blogbus.com) 发表于 2008-01-11 20:32:31  [回复]

发表评论

姓名：
E-mail：
地址：
 
 
表情(不再使用)：