百度空间 | 百度首页 
 
查看文章
 
插入图片位置的代码及效果演示图
2006-07-30 15:03

作者:王士伟
出处:缘定沧桑居——http://hi.baidu.com/tblc

应网友之请,将几个常用的插入图片的代码给大家,大家只需将相应代码添加到CSS中即可得到下面的效果。大家需要将代码中的网址,换为自己想插入图片的网址。由于图片大小不定,所以可能需要调整下面两个参数,以求和页面搭配和谐:

padding-bottom: 22px; margin-bottom: 6px; 
改后面数字即可,padding-bottom为距上高度,margin-bottom为距下高度。

下面就是具体代码和其实现效果截图:

图片显示位置——个人档案照片下面:
#m_pro div.act{margin-top:5px; background:url(http://hiphotos.baidu.com/1077/pic/item/0365c813bd3b2c23dc540120.jpg) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }


个人档案照片下面效果:

个人档案照片下面效果:

图片显示位置——文章列表1
#m_blog div.tit{font-size:14px;font-weight:bold; background:url(http://hiphotos.baidu.com/1077/pic/item/0365c813bd3b2c23dc540120.jpg) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }

效果:

图片显示位置——文章列表:
#m_blog div.tit{font-size:14px;font-weight:bold; line-height:24px; text-indent:120px; background:url(http://hiphotos.baidu.com/1077/pic/item/0365c813bd3b2c23dc540120.jpg) no-repeat; }

效果:

图片显示位置——文章列表:
#tabline{top:89px; background:url(http://hiphotos.baidu.com/1077/pic/item/0365c813bd3b2c23dc540120.jpg) no-repeat bottom; padding-bottom: 32px; margin-bottom: 6px; }

效果:

图片显示位置——相册下面:
#m_album div.image{text-align:center; background:url(http://hiphotos.baidu.com/1077/pic/item/0365c813bd3b2c23dc540120.jpg) no-repeat bottom; padding-bottom: 45px; margin-bottom: 1px; }

图片显示位置——每个友情链接下面:

#m_links div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(http://hiphotos.baidu.com/1077/pic/item/0365c813bd3b2c23dc540120.jpg) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px; }

图片显示位置——每个最新评论下面:
#m_comment div.item{color:#000000;font-size:12px; background:url(http://hiphotos.baidu.com/1077/pic/item/0365c813bd3b2c23dc540120.jpg) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }

效果:

图片显示位置——每个文章分类下面:

#m_artclg div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(http://hiphotos.baidu.com/1077/pic/item/0365c813bd3b2c23dc540120.jpg) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px; }


效果:

图片显示位置——其他区域:

#comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(http://hiphotos.baidu.com/1077/pic/item/0365c813bd3b2c23dc540120.jpg) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }

效果:

新加图片显示位置——个人控制条中间:


#tabline{margin-top:-131px;right:5px;line-height:8px; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=date&ft=3&dformat=yymmdd) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}/*
个人控制条日期显示*/


类别:百度空间模板篇 | 添加到搜藏 | 浏览() | 评论 (79)
 
最近读者:
 
网友评论:
1
2006-07-30 15:08 | 回复
沙发!`` 代码不好使!``
 
2
2006-07-30 15:28 | 回复
重新编辑了一下,现在应该没有问题了。 注意把地址换成自己想要显示的图片地址就可以了。 这里给的图片地址只是测试用的。并不太美观
 
3
2006-08-03 22:38 | 回复
的确不美观 不过一个链接都没给原作者加就不太好了吧……
 
4
2006-08-04 14:29 | 回复
好麻烦..............
 
5
2006-08-11 13:54 | 回复
HAO
 
6
2006-08-12 00:50 | 回复
压根没看懂捏~`] 在讲什么捏~~?
 
7
2006-08-13 16:24 | 回复
很不错,而且可以加其他的东西,不一定是图片,如http://www.ip.cn/s.php 就可以显示来访着的ip地址了! 可以来我这看看效果。
 
8
2006-08-14 22:09 | 回复
厄..一定要是JPG格式的才行吗?!~~~~
 
9
2006-09-13 00:12 | 回复
怎么有的不管用啊
 
10
2006-09-19 00:27 | 回复
niu ````````
 
11
2006-09-22 15:05 | 回复
呵呵我喜欢
 
12
2006-09-24 10:56 | 回复
音乐播放器太大能改小吗?太大的模块能左右移动吗?
 
13
2006-09-24 21:39 | 回复
简直就是云里雾里啊!!!!
 
14
2006-10-08 20:12 | 回复
好用死了,谢谢
 
15
2006-10-27 15:57 | 回复
ai,好头痛呀,太麻烦了,对于刚刚涉入网络的我来说, 简直就像蚂蚁背西瓜.
 
16
2006-10-27 20:56 | 回复
讲得很清楚哦~~ 可是好麻烦啊~~~
 
17
2006-10-31 15:30 | 回复
加哪呀
 
18
2006-11-28 13:48 | 回复
谢谢!
 
19
2006-12-03 17:29 | 回复
我在文章列表栏加上LOGO了,可是第一列的连接都失效了,文章写不了,设置什么都点不进去了
 
20
2006-12-25 23:45 | 回复
很好啊,真8错!踩踩踩!!!谢谢了哦。。。。。。。
 
21
2007-01-19 14:23 | 回复
踩踩踩!!!
 
22
2007-01-21 12:37 | 回复
不明白.........
 
23
2007-01-30 12:59 | 回复
哈哈~~很清楚!!我会常来学习的!!!
 
24
2007-02-01 13:36 | 回复
请问怎样将图片位置代码放如CSS中?怎么看不到自己空间里的CSS?
 
25
2007-02-05 22:35 | 回复
不太好操作
 
26
2007-02-08 16:08 | 回复
头都大了```
 
27
2007-02-09 14:45 | 回复
好郁闷呀.. 我啥也看不懂ing...
 
28
2007-02-09 19:06 | 回复
我是一头雾水
 
29
2007-02-09 19:07 | 回复
我不懂
 
30
2007-02-13 10:59 | 回复
天啊~~~看不懂啊~~~好抽象哦·~~
 
31
2007-02-20 14:39 | 回复
看不懂,我想我是学不会代码,太复杂了/
 
32
2007-02-24 21:18 | 回复
来我这里看一下``` 也可以``我那里有CSS的全解 ` 兴许能帮你们``
 
33
2007-03-02 23:18 | 回复
怎么放啊`!``我要放的话`不就是要创做`新的模块````那我以前用的模块``就用不了``了``谁可以教教我`让不用话以前的模块``也可以``换`
 
34
2007-03-16 00:26 | 回复
看的不太懂,
 
35
2007-03-24 14:58 | 回复
我大概知道了一点点了,就是说可以添加图片到空间里的~~大小自己决定了是吧
 
36
2007-03-24 21:34 | 回复
是呀,看不懂,,,,,
 
37
2007-03-25 04:25 | 回复
妈的代码不好搞啊!~`
 
38
2007-03-26 12:26 | 回复
有点难度,看不到自己空间里的CSS?不懂啊
 
39
2007-03-31 12:35 | 回复
圖太大怎麽辦啊
 
40
2007-04-15 04:05 | 回复
如果想加到文章内容中间,比如文章在左,图片在右,怎么弄?
 
41
2007-04-16 11:03 | 回复
郁闷啊 头越来越大了
 
42
2007-04-16 11:03 | 回复
郁闷啊 头越来越大了
 
43
2007-05-20 14:49 | 回复
try two thank you
 
44
2007-05-22 10:41 | 回复
没效果
 
45
2007-05-26 08:55 | 回复
不懂
 
46
2007-06-04 13:16 | 回复
令人震憾、令人沉思的图片!就在艺泉图吧!
 
47
2007-06-08 19:20 | 回复
我自己改了张图片 可怎么才能把它当模板放到我的百度空间啊 http://cn.f11.yahoofs.com/users/4549f777z509b6758/d0fa/__tn_/ec79cnb.jpg
 
48
2007-06-22 13:37 | 回复
请问怎么把这些代码加到空间的模版里去? 我想改变空间的定义模版自己做..可以么? 但是不知道加到哪里去` 我加到源文件里面没用啊`` 还是要自己做了然后传到网络上去..?
 
49
2007-06-23 02:40 | 回复
请问怎样重新刷空间
 
50
2007-07-01 14:25 | 回复
哎呦我的天呐~`这是什么东西啊,造原子弹用的吧~杂这么抽象~``
 
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu