博客空间网页模板背景制作方法

2007-03-08

在决定制作博客空间网页模板背景的时候,首先要确保的是自己的博客空间是可以自己修改,设计或制作模板的,如Blogbus,Blogcn,本文以Blogbus为例介绍修改传统模板,也就是旧模板系统5种方法。如果有什么问题,请务必也留下你的回访地址喔~! 新的模板系统我没有研究过,不太清楚怎么改。

首先请看〖修改模板前必须先……〗 

http://dolphin01.blogbus.com/files/1169830649.gif1。颜色背景http://dolphin01.blogbus.com/files/1169830697.gifhttp://dolphin01.blogbus.com/files/1169830697.gifhttp://dolphin01.blogbus.com/files/1169830697.gif

以某种颜色为背景是最简单、常用的方法,在显示速度上占绝对优势。方法是在自定义模板的CSS里的“body {”下写

background-color: #6位数颜色代码;

注意(英文输入法的)分号不要掉啦。颜色代码是什么呢?看这里吧:颜色代码或者 调色板

这种方法虽然简单,但是在色彩的选择和整体搭配上要做到协调美观就不是那么容易的事咯~选的不好,或者搭配不好就会很恶心的。

点击查看原始尺寸

http://dolphin01.blogbus.com/files/1169830754.gif2。砂纹背景(图片的重复)http://dolphin01.blogbus.com/files/1169830743.gifhttp://dolphin01.blogbus.com/files/1169830743.gifhttp://dolphin01.blogbus.com/files/1169830743.gif

沙纹背景属于图片背景的范畴,它的主要特点是整个页面的背景可以看作是局部背景的反复重排,也就是同一张图片在水平和竖直方向上的反复排列,在这类背景中以沙纹状的背景是为常见,所以统称为沙纹背景。

找一张小的图片,要注意的是当其反复排列成一个背景时要能成为一个整体。方法是在自定义模板的CSS里的“body {”下写

background-image: url(http://开头的图片的网址);
background-repeat:repeat;

注意(英文输入法的)分号不要掉啦。

如果是黑色的背景图片,特别是星空背景,建议在CSS里的“body {”下按第一种颜色背景的方法再加上“ background-color: #000000;”,颜色代码是6个零,即黑色。这里有一些模版背景的图片素材:黑色星空背景模版图片-黑夜彩色背景模版、图片

点击查看原始尺寸

http://dolphin01.blogbus.com/files/1169831772.gif3。条状背景(图片的重复)http://dolphin01.blogbus.com/files/1169831788.gifhttp://dolphin01.blogbus.com/files/1169831788.gifhttp://dolphin01.blogbus.com/files/1169831772.gif

条状背景与沙纹背景比较相似,不同的是它只让图片在一个方向上重复排列。以在竖直方向上排列为例,方法是在自定义模板的CSS里的“body {”下写

background-image: url(http://开头的图片的网址);
background-position: top center;
background-repeat: repeat-y;

注意(英文输入法的)分号不要掉啦。图片的大小要选取适当,尽量选宽一点的。点击查看原始尺寸

http://dolphin01.blogbus.com/files/1169831594.gif4。整图背景http://dolphin01.blogbus.com/files/1169831594.gifhttp://dolphin01.blogbus.com/files/1169831594.gif

这里所说的整图背景是指只用一整张大的图片作为背景,在拉动浏览器窗口的滚动条时,图片仍然位于页面的正中间而不随页面内容一起滚动。方法是在自定义模板的CSS里的“body {”下写

background-image: url(http://开头的图片的网址);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 50%;

如果你觉得照片位于页面的正中间不满意,你也可以随意地调整它在页面中的位置,只需要调整"background-position"的值就可以了。

或者:background: url(http://开头的图片的网址) no-repeat top left fixed; 

点击查看原始尺寸

http://dolphin01.blogbus.com/files/1169831463.gif5。双重背景两层图http://dolphin01.blogbus.com/files/1169831474.gifhttp://dolphin01.blogbus.com/files/1169831490.gif

双重背景的意思是和新浪的模板背景相似,模版最底层铺一个背景,在这层背景的上面,即日志模块和侧边栏上再铺一层背景盖住。如图

方法是在自定义模板的CSS里的“body {”下写:

background-image: url(http://开头的图片的网址);
background-repeat:repeat;

在“#container {”下写:
width: 800px;
border-left: 1px solid  #6位数颜色代码;
border-right: 1px solid  #6位数颜色代码;
margin: 0 auto;
background-image: url(http://开头的图片的网址);
background-repeat:repeat;

注意(英文输入法的)分号不要掉啦。其中“width: ”后面的800是上面一层背景的宽度,可以自己修改,一般container下已经给了这个宽度;“border-left:”“ border-right:”分别是上面一层背景左右两侧的竖条分隔线,将上、下两层背景分开,所以这个也可以不要。

忆瀞原创Creative Commons License本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 许可协议进行许可。如需转载,请先点击阅读,并做好出处链接.╰εїз゚忆瀞忆境






╰εїз゚ Comments >>>

  • 韩国新网的怎做?
    sanshai | @ 2008-05-18 20:35:01     [回复]
  • 为什么不行啊 ,我快风了啊!!!就一个模版可以啊,为什么得不到我想要的啊 !!!快快告诉我,谢谢!!
    Kissdolphin 回复 千天圣 说:
    因为你用的是新模板系统喔!
    (2008-05-06 14:35:47)
    千天圣 | http://tianben.blogbus.com/ @ 2008-05-05 18:26:00     [回复]
  • 还是谢谢你了。^^
    一。 | @ 2008-05-05 12:47:49     [回复]
  • 请问一下我的版头为什么不能显示正常大小呢。

    我用的是ATTITUDE CAMERA
    Kissdolphin 回复 一。 说:
    我写的是修改旧模板的方法哦,新的模板我没有研究过,不太清楚怎么改,很头疼~~~~
    (2008-05-05 11:26:04)
    一。 | http://sweetdream01.blogbus.com @ 2008-05-02 19:14:42     [回复]
  • 偶然发现你的博。
    试了。真有用。
    呵呵。细心有才气的女子。我喜欢。
    Kissdolphin 回复 dracula. 说:
    Thank you!
    (2008-04-15 19:37:50)
    dracula. | @ 2008-04-14 17:49:42     [回复]
  • 你好,我很笨,对这些是一窍不通。能给我个完整的代码吗?我直接复制就好了。呵呵....
    tian | http://xietian629.blogbus.com/ @ 2008-03-29 03:58:02     [回复]
  • 你好,博客很漂亮。
    想请问一下,你的模板最上面的那图片地址是什么,很喜欢。谢谢!
    junjun | @ 2008-03-28 17:40:47     [回复]
  • 。親.實在是研究了狠多下都沒找到門路.火=_=||
    。我想弄成像我新浪那種效果http://blog.sina.com.cn/yaozaizai
    。但試了幾款模板都沒找到該改哪.
    。覺得親這款模板的背景好看.但不知道最頂上那圖片該在哪改.
    。找了狠久沒找到.要抓狂喇..$_$
    。親可以幫我看看我要的效果應該選哪款模板還有該改哪不..
    。謝謝噠..無限感激德TAT
    Ivy_h | http://bonnieh-he.blogbus.com/ @ 2008-03-06 19:24:47     [回复]
  • 。親會做板子八~
    話說在大巴裏很少有滿意德模板~
    。親能告知些許技巧不~
    先謝過噠~=_=++
    Kissdolphin 回复 Ivy_h 说:
    技巧就是一点一点地改。。。。。。呵呵
    (2008-03-05 23:35:17)
    Ivy_h | http://bonnieh-he.blogbus.com/ @ 2008-03-05 18:21:41     [回复]
  • 刚刚地址错了.呵呵
    lee | http://lisiyue.blogbus.com @ 2008-02-11 17:39:38     [回复]
  • 谢谢你的教材噢..让我初步了解代码了..
    lee | http://www.lisiyue.blogbus.com @ 2008-02-11 17:37:19     [回复]
  • 我的横幅怎么也换不了。。。我按你说的,把图片地址换了。。。怎么还不行啊。。。麻烦你帮我解答一下,谢谢谢谢啦~~~~~~
    R.*world | @ 2008-02-06 01:25:49     [回复]
  • 你好!
      我想问一下你这个博的背景,就是白色底上面有淡灰色暗花纹的这个背景是怎么弄的?我也想改成这样,不知道怎么找图片呢-.- 还请赐教啊!!!:>
    wbbloveforever | http://wbbloveforever.blogbus.com @ 2008-02-04 15:51:32     [回复]
  • 亲爱的 怎么弄的??我想学
    我就是我 | @ 2008-02-02 21:27:53     [回复]
  • 姐姐。你的THEME COVER是怎么做的啊
    我也想弄一个类似的。可以在那个页面显示出留言板的

    还有。就是我的博的日志评论那里左边对不齐该怎么弄
    Kissdolphin 回复 小铁 说:
    留言板在BUS论坛里有人教了个比较简单的做法,你可以看看。日志评论那里是那样的,因为标点符号和字所占的空间大小不一样,只能左对齐,没办法两端对齐的。
    (2007-11-25 11:24:29)
    小铁 | http://loveforshin.blogbus.com @ 2007-11-25 00:49:26     [回复]
  • 啊 ~~~
    笨笨 | http://梦幻家园 @ 2007-11-22 22:33:27     [回复]
  • CSS里的body是什么意思不明白请指教一点谢谢拉11111不会
    Kissdolphin 回复 王华 说:
    这个要进入旧模板里.
    (2007-11-14 21:38:01)
    王华 | http://wanghua198765 @ 2007-11-13 03:16:59     [回复]
  • bangbang我!怎么播放器里的音乐没动静阿 阿?55555555555
    Kissdolphin 回复 谢谢 说:
    原因很多,缓冲慢了,网速慢了,代码不对,地址不对,文件有防盗链,地址已经删除等……
    (2007-11-03 23:31:25)
    谢谢 | http://blog.sina.com.cn/hrbcuiwen @ 2007-11-03 22:56:30     [回复]
  • 为什么我的背景音乐不响呢?http://blog.sina.com.cn/hrbcuiwen
    学生 | @ 2007-11-03 22:41:10     [回复]
  • 你好,第一次来你的BLOG觉得做得很不错。我有个一问题想请教,以前在CSS模块里面更换背景图片还有头顶得图拼都能更换。但是发现现在改变了图片地址后浏览显示不出图片了,找不出原因。请问问什么呢?
    谢谢指教~
    Kissdolphin 回复 harukachen 说:
    你的博客很可爱啊!这个原因有好几个,最常见的就是图片地址不对,或者有防盗链,你图片是上传到自己的BUS了吗?
    (2007-10-23 12:20:26)
    harukachen | http://harukazone.blogbus.com @ 2007-10-22 11:55:05     [回复]
  • css 在哪啊``?

    我怎么找不到呢`

    怎么样整好空间背景 | @ 2007-09-16 09:19:06     [回复]
  • 恩,我也发觉了,但我自己真的没有能力去改上面的摸板块,,,补救措施是把摸板控制在1个818P的整体色块里,以达到统一效果就好了...哈,我已经很满意了,,,谢谢你,问候你.快乐!!!
    treeF | @ 2007-09-13 16:27:22     [回复]
  • 我按你这样的方法做双重背景两层图:

    方法是在自定义模板的CSS里的“body {”下写:

    background-image: url(http://开头的图片的网址);

    background-repeat:repeat;



    在“#container {”下写:

    width: 800px;

    margin: 0 auto;

    background-image: url(http://开头的图片的网址);

    background-repeat:repeat;

    .........................................



    结果出来的效果只有窄窄的1条黑色 背景.

    似乎需要3层背景???

    麻烦你再帮我看看吧.....

    谢谢!!
    Kissdolphin 回复 treeF 说:
    你选的这个模板如果要保留原来的日志模块的样式,就很难做双层的,因为你的每篇日志的模块已经有背景图片了。
    (2007-09-13 14:00:14)
    treeF | http://treef.blogbus.com @ 2007-09-12 22:47:42     [回复]
  • 忆瀞,我按你的方法已经实现了背景换图,真的很感激你;

    我11号才开的BLOG,对程序完全不懂,想不到遇到你这样的好心高人,你的BLOG很棒,几乎含盖摸板所有的教程方法,而且讲的非常细致入微,连我个对程序一窍不通的外行都学的带劲十足,佩服你尽心尽责的做事态度.希望与你交个朋友!!!

    你的BLOG也很漂亮呢!!!

    谢谢啦!!快乐!
    Kissdolphin 回复 treeF 说:
    很聪明喔~!
    (2007-09-13 13:58:38)
    treeF | http://treef.blogbus.com @ 2007-09-12 20:48:06     [回复]
  • 大姐你好,我是菜鸟。

    我在我模板里怎么改也做不了第四个整图背景。是不是我模板不对啊???
    小伙子 | http://xiaojianping.0831.cn @ 2007-08-31 20:40:35     [回复]
  • 大姐你好,我是菜鸟。

    我在我模板里改半天,怎么也不能做到第四点整图背景

    是不是我的模板有问题啊?
    小伙子 | http://xiaojianping.0831.cn @ 2007-08-31 20:35:31     [回复]
  • 你的背景白色的这个很好,可以告诉我图片的连接么?
    Kissdolphin 回复 MIA 说:
    这个是BUS系统里的蔷薇模板。
    (2007-08-28 11:59:56)
    MIA | @ 2007-08-26 14:50:20     [回复]
  • http://skin28.blogbus.com/

    我想以这个模版为底自己改变他的顶图和色调,可是看了ccs就该不来。。。。。。能帮帮看看应该改哪些部分呢?
    yy | @ 2007-08-24 22:44:15     [回复]
  • 请问如果要做图的话,怎么做呢~~

    我在photoshop 那里做了几张,可是出来的效果不行,

    怎么会这样?

    我应该有什么软件,还有怎么做?
    Kissdolphin 回复 xuan 说:
    。。。。。我不会作图,PS我只会一丁点
    (2007-08-24 20:15:57)
    xuan | @ 2007-08-24 17:25:20     [回复]
  • 有是我,我刚才没有说清楚,

    我的意思是说怎么可以做成那个网站的效果~~

    并不是要弄那个网站~~

    谢谢~~

    xuan | @ 2007-08-22 19:43:46     [回复]

  • 评论分页:共3页 1 2 3 下一页 最后一页

╰εїз゚ Write Comments >>>

姓名 Name 
邮箱 E-mail 
主页 Website