【原创】常用插入图片位置的代码及效果图
空间交流社区吧
全部回复
仅看楼主
level 6
tblc 楼主
【原创】常用插入图片位置的代码及效果图出处:缘定沧桑居——http://hi.baidu.com/tblc作者:王士伟应网友之请,将几个常用的插入图片的代码给大家,大家只需将相应代码添加到CSS中即可得到下面的效果。大家需要将代码中的网址,换为自己想插入图片的网址。由于图片大小不定,所以可能需要调整下面两个参数,以求和页面搭配和谐:padding-bottom: 22px; margin-bottom: 6px; 改后面数字即可,padding-bottom为距上高度,margin-bottom为距下高度。各种图片素材青岛这个文章:【收集】各种日历,时钟和显IP图片下面就是具体代码和其实现效果截图:图片显示位置——个人档案照片下面:#m_pro div.act{margin-top:5px; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }下面各帖为各种效果,想直接看原文请到:http://hi.baidu.com/tblc个人档案照片下面效果:
2006年07月17日 17点07分 1
level 6
tblc 楼主
图片显示位置——文章列表1:#m_blog div.tit{font-size:14px;font-weight:bold; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }效果:
2006年07月17日 17点07分 2
level 6
tblc 楼主
图片显示位置——文章列表:#m_blog div.tit{font-size:14px;font-weight:bold; line-height:24px; text-indent:120px; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat; }效果:
2006年07月17日 17点07分 3
level 6
tblc 楼主
图片显示位置——文章列表:#tabline{top:89px; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 32px; margin-bottom: 6px; }效果:
2006年07月17日 17点07分 4
level 6
tblc 楼主
图片显示位置——相册下面:#m_album div.image{text-align:center; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 45px; margin-bottom: 1px; }效果:
2006年07月17日 17点07分 5
level 6
tblc 楼主
图片显示位置——每个友情链接下面:#m_links div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px; }效果:
2006年07月17日 17点07分 6
level 6
tblc 楼主
图片显示位置——每个最新评论下面:
#m_comment div.item{color:#
000000;font-size:12px; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }效果:
2006年07月17日 17点07分 7
level 6
tblc 楼主
图片显示位置——每个文章分类下面:#m_artclg div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px; }效果:
2006年07月17日 17点07分 8
level 6
tblc 楼主
图片显示位置——其他区域:#comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }效果:
2006年07月17日 17点07分 9
level 6
tblc 楼主
新加图片显示位置——个人控制条中间:#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}/*个人控制条日期显示*/效果:
2006年07月18日 05点07分 10
level 1
沙发,学习。
2006年07月18日 06点07分 12
level 1
沙发被吧主抢走 :(
2006年07月18日 06点07分 13
level 1
````````
2006年07月18日 07点07分 14
level 6
tblc 楼主
谢谢掌柜的和楼上各位朋友^_^
2006年07月18日 07点07分 15
level 5
up
2006年07月18日 10点07分 16
level 1
好好学学
2006年07月18日 11点07分 17
level 2
好极了...盗走.了.
2006年07月18日 12点07分 18
level 1
实在是看不懂啊,能不能说的明白点?
2006年07月18日 15点07分 19
level 1
对图没啥兴趣
2006年07月18日 15点07分 20
1 2 3 尾页