Loadmemory's profile过去<-->现在<-->未来PhotosBlogLists Tools Help
    June 07

    如何在任意位置添加图片和文字(效果参见我的页面顶端)

    首先感谢Slim-cn发现了可以实现绝对和相对定位的语法,通过这段语法可以实现在空间版面的任何位置添加文字、图片及视频的效果。前两天我试着做了一个文本导航条,昨天又改动了一下,换成按钮的方式,看上去美观多了。通过这种办法可以将一些固定内容放到版面的空闲处,从而解放出更多的列表资源。但需要提醒大家的是,不要过多地在页面上添加内容,一方面影响了整体观感,另一方面也拖慢了空间的载入速度,凡事要适可而止,以免重蹈前两天嵌入JS被锁的覆辙。

    我使用的就是下面这段语法(出处:有话好好说 Slim-cn,建议大家去这里看看,有很漂亮的日志模版)

    <DIV class=LayoutIBeam style="DISPLAY: block; LEFT: ???px; WIDTH: ???px; TOP: ??px; HEIGHT: ??px;BORDER-COLLAPSE: separate;TABLE-LAYOUT: auto;"> <IMG height=60 alt=xxxxx src="图片地址" width=468 border=0></DIV>

    简单解释一下:

    <IMG height=.......>控制图片文件,这个没什么可说的,想必大家已经接触很多次了。这里也可以不使用图片,而直接输入文字,或替换成添加视频的语法。

    <DIV class=LayoutIBeam.......>控制图片、文本或视频出现的位置,这是个绝对定位命令。其中的WIDTH和HEIGHT还是对添加的图片大小的描述,而TOP是指该图片或文本与页面最顶端的距离,LEFT则是指这些元素与页面最左端的距离。

    语法的使用并不困难,照葫芦画瓢即可。关键是如何准确的定位各元素出现的位置。我采用了一种比较笨,但却很实用的办法。先用抓屏软件将整个首页面的版面上方截取下来,然后用图形处理软件打开,再将所需添加的图片或文字粘贴到刚刚截取的图片上,这样你不仅可以看到将来实现时的效果,也可以通过图形处理软件的标尺或状态栏读取添加的图片或文字的坐标位置,而该位置就是将来需要调整的LEFT及TOP值。

    确定具体位置参数后,你就可以将代码通过HTML语法编辑方式放入首页面的日志中。不过在日志编辑区域及预览里都无法体现最终实现的效果。发布日志后,进入自己的空间看看实际效果,不满意的话再调整一下数值。提醒大家注意,由于该代码是写在日志中的,就如同背景音乐一样,如果该日志已不在首页面了,则添加的那些图片或文字也将不会出现在你的空间首页面上。

     

     

    Comments (231)

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    No namewrote:
    http://www.batterylaptoppower.com/acer/aspire-5520.htm acer aspire 5520 battery
    http://www.batterylaptoppower.com/acer/aspire-5920.htm acer aspire 5920 battery
    http://www.batterylaptoppower.com/dell/inspiron-6400.htm dell inspiron 6400 battery
    http://www.batterylaptoppower.com/ibm/thinkpad-x60.htm ibm thinkpad x60 battery
    http://www.batterylaptoppower.com/ibm/thinkpad-x60s.htm ibm thinkpad x60s battery
    http://www.batterylaptoppower.com/hp/zt3000.htm hp zt3000 battery
    http://www.batterylaptoppower.com/hp/pavilion-zv5000.htm hp pavilion zv5000 battery
    http://www.batterylaptoppower.com/hp/pavilion-zv6000.htm hp pavilion zv6000 battery
    http://www.batterylaptoppower.com/hp/pavilion-zd8000.htm hp pavilion zd8000 battery
    http://www.batterylaptoppower.com/hp/pavilion-zx5000.htm hp pavilion zx5000 battery
    http://www.batterylaptoppower.com/hp/presario-v4000.htm hp presario v4000 battery
    http://www.batterylaptoppower.com/hp/presario-v2000.htm hp presario v2000 battery
    http://www.batterylaptoppower.com/hp/presario-m2000.htm hp presario m2000 battery
    http://www.batterylaptoppower.com/compaq/presario-v4000.htm compaq presario v4000 battery
    http://www.batterylaptoppower.com/compaq/presario-v2000.htm compaq presario v2000 battery
    http://www.batterylaptoppower.com/compaq/presario-v3000.htm compaq presario v3000 battery
    http://www.batterylaptoppower.com/compaq/presario-v6000.htm compaq presario v6000 battery
    http://www.batterylaptoppower.com/compaq/presario-c700.htm compaq presario c700 battery
    http://www.batterylaptoppower.com/dell/fk890.htm dell fk890 battery
    http://www.batterylaptoppower.com/toshiba/pa3593u-1bas.htm toshiba pa3593u-1bas battery
    http://www.batterylaptoppower.com/hp/m2000.htm hp m2000 battery
    http://www.batterylaptoppower.com/hp/338794-001.htm hp 338794-001 battery
    http://www.batterylaptoppower.com/hp/395789-001.htm hp 395789-001 battery
    http://www.batterylaptoppower.com/compaq/116314-001.htm compaq 116314-001 battery
    http://www.batterylaptoppower.com/toshiba/satellite-a70.htm toshiba satellite a70 battery
    http://www.batterylaptoppower.com/compaq/319411-001.htm compaq 319411-001 battery
    http://www.batterylaptoppower.com/hp/346970-001.htm hp 346970-001 battery
    http://www.batterylaptoppower.com/hp/367759-001.htm hp 367759-001 battery
    http://www.batterylaptoppower.com/hp/411462-421.htm hp 411462-421 battery
    http://www.batterylaptoppower.com/hp/ev088aa.htm hp ev088aa battery
    http://www.batterylaptoppower.com/hp/ex941aa.htm hp ex941aa battery
    http://www.batterylaptoppower.com/laptop battery
    http://www.batterylaptoppower.com/laptop batteries
    http://www.batterylaptoppower.com/dell laptop batteries/
    http://www.batterylaptoppower.com/dell/wr050.htm dell wr050 battery
    http://www.batterylaptoppower.com/hp laptop batteries/
    Oct. 24
    Oct. 13
    Sept. 4
    May 14
    Feb. 12
    真是很棒!!谢谢啦!会常来做客的^_^
    Oct. 24
    灵 李wrote:
    惊为天人啊!
    太棒了……
    这简直是梦寐以求的东西啊……
    June 5
    ☆静☆wrote:
    你的网页真的好棒!羡慕!教教我啊!我试了,但是图片都变形了!
    May 1
    囡囡wrote:
    请问 现在有没有办法 在本地上传的图片上添加文字? 因为一些收集的图片是很难再找到链接地址的
     
    Mar. 18
    caynicewrote:
    搞不懂~~
    那个放图片的地址该怎么放啊??
    如果是从我自己的档案那儿放的。。该怎么写啊??
    Nov. 8
    wrote:
    咋滴自己就没想到呢~~
    Aug. 13
    xuxugardenwrote:
    用“查看”中的源文件编辑,真得谢谢哦!!好东西!!
    July 29
    Jun.C.wrote:
    迷茫ing
    June 25
    漫舞飞扬wrote:
    是哦在其他的地方看不见图在MSN好使
    June 16
    Lim Leewrote:
    <DIV style="TABLE-LAYOUT: auto; DISPLAY: block; LEFT: 100px; WIDTH: 100px; TOP: 10px; BORDER-COLLAPSE: separate; HEIGHT: 30px"><IMG height=23 src="http://global.msads.net/ads/9947/0000009947_000000000000000307563.gif" width=23 border=0></DIV>
    June 4
    Lim Leewrote:
    是不是这个语法又被过滤了?为何图片只出现在我的日志中?
    June 4
    CCwrote:
    说的好笼统 ,不明白
    May 30
    水阁香花wrote:
    不懂,弄不好,
     
    May 21
    kiki .wrote:
    好可怜啊,弄了几次不成功
    May 14
    娟 娟wrote:
    ....试过,但没成功.....郁闷!~~~
    May 7

    Trackbacks (44)

    The trackback URL for this entry is:
    http://loadmemory.spaces.live.com/blog/cns!DF60452AB22143AE!6608.trak
    Weblogs that reference this entry