图示如何使用代码调整文字与图片间隔

来源: 2012-05-11 09:06:28 [] [博客] [旧帖] [给我悄悄话] 本文已被阅读: 次 (3003 bytes)
本文内容已被 [ 玉珠 ] 在 2012-05-11 19:35:00 编辑过。如有问题,请报告版主或论坛管理删除.

1. 一般而言我们通常点击完加新贴后的页面如图所示,是在“所见即所得”的情况下:

2. 那么这时候我们要加图片,可点击树形小图,页面上的树形小图会显示文字“插入/编辑图像”。如图所示:



3.一旦我们点击了树形小图标后,会出现一个新的窗口,在这个窗口里我们需将图片的链接填入URL框里,一般情况一两秒会出现预览图:

4. 很多情况我们会觉得图片的大小不合心意,那么在这个窗口上有“常规”“外观”以及“高级”三项选择,我们点击“外观”,即可对图片的大小进行调整。比如此图的原大小是“1024X768px”,对于页面来说有些过大。在调整大小前,我们先锁定比例:

 

5. 然后我们可以根据自己的需要调整大小。因之前我们已经锁定了图片比例,那么我们只要填写宽和高其中一项大小,那么另一项会自动随之变化。我这里选择宽为800px,那么窗口会自动将高显示为600px:

 

6. 当我们点击“插入”后,那么图片即显示在加新贴的页面上了。这时候我们可以点击“HTML源代码”以便查看贴图片的代码是什么:

 

7. 在HTML源代码情况显示应如下图,红线所划部分即贴图的代码:

8. 现在我们测试一下如何用代码将文字和图片之间加上间距。我在文字前加了<BR>,目的是将文字与前一张图之间空出一行来,在文字后又加了<BR><BR>,目的是希望在文字后再加图时可以有空隙,而不是图片紧接文字后:

9. 我们回到所见即所得的模式看看效果如何。果然文字和上图,以及文字后都留有了空隙:

 

10. 需要在文字后继续加图片,那么重复2.至9.我们可以看到如下图所示的情况:

 

11. 再看看此时的代码如何:

 

12. 如图所示的大空隙如何得来?根据上面的教程应该有点概念了?

 

13. 源代码告诉你答案,原来文字与贴图代码之间加了5个<BR>:(如果在HTML源代码模式中显示的是<br/>同<br>是一样的,大小写不妨碍效果。)

 

好,到此用代码调整文字与图片间隔就说完了。其实最简单的就是在所见即所得的模式下从网页上复制图片,再粘贴至内,在图片后多打几个回车键,也就有了空隙。但会使用简单代码也是发帖的基本常识,对于更好的发帖有一定的帮助。呵呵~Viel Spaß°°:)



所有跟帖: 

沙发!谢谢! -林笑- 给 林笑 发送悄悄话 林笑 的博客首页 林笑 的个人群组 (17 bytes) () 05/11/2012 postreply 09:12:47

嗯。有点儿~~今儿有歌给我听么? -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (0 bytes) () 05/11/2012 postreply 09:15:16

有啊 -林笑- 给 林笑 发送悄悄话 林笑 的博客首页 林笑 的个人群组 (29 bytes) () 05/11/2012 postreply 09:16:29

哦。那个我看啦。还蛮好听的~~可早说啦,那天我穿越去了,不来坛子的。还有惊喜么? -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (0 bytes) () 05/11/2012 postreply 09:18:39

这个你能看么? -林笑- 给 林笑 发送悄悄话 林笑 的博客首页 林笑 的个人群组 (112 bytes) () 05/11/2012 postreply 09:23:31

5555~~~ -_-||| -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (0 bytes) () 05/11/2012 postreply 09:25:57

没事儿 -林笑- 给 林笑 发送悄悄话 林笑 的博客首页 林笑 的个人群组 (372 bytes) () 05/11/2012 postreply 09:46:31

我以前都不喜欢听刀狼的歌,可是现在慢慢也开始听了。有个镜头是黄渤的哪部影片? -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (0 bytes) () 05/11/2012 postreply 09:54:18

他的歌比较耐听,镜头我不知道了。 -林笑- 给 林笑 发送悄悄话 林笑 的博客首页 林笑 的个人群组 (0 bytes) () 05/11/2012 postreply 10:02:26

挺喜欢刀郎的,是个汉子。歌也好听,深情。 -梵芯- 给 梵芯 发送悄悄话 梵芯 的博客首页 梵芯 的个人群组 (0 bytes) () 05/11/2012 postreply 10:14:06

好听,最好不要看 -梵芯- 给 梵芯 发送悄悄话 梵芯 的博客首页 梵芯 的个人群组 (0 bytes) () 05/11/2012 postreply 10:01:49

节日快乐!:)) -林笑- 给 林笑 发送悄悄话 林笑 的博客首页 林笑 的个人群组 (0 bytes) () 05/11/2012 postreply 10:09:27

玉珠班主老师,课将得真好! -梵芯- 给 梵芯 发送悄悄话 梵芯 的博客首页 梵芯 的个人群组 (0 bytes) () 05/11/2012 postreply 09:19:30

你说的是对的,直接复制其实是最简单的。不过就是知道一下,编辑帖子时稍微可用下。 -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (0 bytes) () 05/11/2012 postreply 09:21:18

叩谢班主大人! --眉子-- 给 -眉子- 发送悄悄话 -眉子- 的博客首页 -眉子- 的个人群组 (0 bytes) () 05/11/2012 postreply 09:25:29

不用,不用,我只要妹纸的87~:D~ -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (18 bytes) () 05/11/2012 postreply 09:27:13

看着都累.... -一江小鱼- 给 一江小鱼 发送悄悄话 一江小鱼 的博客首页 一江小鱼 的个人群组 (0 bytes) () 05/11/2012 postreply 09:33:25

你没救了你! -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (0 bytes) () 05/11/2012 postreply 10:01:25

顶顶~ -令狐冲冲- 给 令狐冲冲 发送悄悄话 令狐冲冲 的个人群组 (0 bytes) () 05/11/2012 postreply 09:54:33

谢谢~ -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (0 bytes) () 05/11/2012 postreply 10:00:00

这个技术含量高,要存起来 -万枫- 给 万枫 发送悄悄话 万枫 的博客首页 万枫 的个人群组 (0 bytes) () 05/11/2012 postreply 10:36:11

回头想办法让网管帮忙贴在坛子首页。 -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (0 bytes) () 05/11/2012 postreply 13:48:45

我看明白啦我看明白啦我看明白啦我看明白啦 -舞女- 给 舞女 发送悄悄话 舞女 的博客首页 舞女 的个人群组 (0 bytes) () 05/11/2012 postreply 19:33:17

我容易吗我容易吗我容易吗我容易吗 -玉珠- 给 玉珠 发送悄悄话 玉珠 的博客首页 玉珠 的个人群组 (0 bytes) () 05/12/2012 postreply 04:37:30

加跟帖:

当前帖子已经过期归档,不能加跟帖!
回到顶部