从零启步学代码【十四】_代码交流平台_天涯部落

　　此帖绝对不能点击“编辑”“不能编辑”两个按钮。否则，帖子中的示范代码就没有了，只剩下效果了。切记！！！

（原创制作者:游子。供初学HTML代码的朋友参考）

如何在图框内插入图片或文字。

学习和掌握了HTML代码两大基本功即文字设置和表格设置

之后，就可以制作一些多姿多彩的代码贴了。
　　我们可以在一张用图片或颜色作背景的表格单元格内

（单层或多层图框内），插入多段文字的和图片．
　　根据插入的图片宽度和色彩选好图框。有些论坛对代码

贴图的宽度限制在５００之内，所以图框包括边线宽度不能

超过５００，插入的图片宽度在４００以内，否则其超过部

份就无法显示。如果论坛对代码贴宽度不限制,插入的图片就

可宽限些．由于插入的图片加图框的宽很大，所以必须设置

全屏代码，才能完整显示。网络上有很多漂亮的图框（套装）

，可以拿来套用。启步学习时，最好采用较简单的图框。

在一张图框或图片内如何插入文字和图片？
　　要在表格的单元格<TD>与</TD>中间插入。例如：

<TABLE width=480 height=350 bordercolor=olive background=http://sucai.heima.com/sucai/news/bg/23.gif border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#0000ff><B><p align=CENTER>插入文字或图片</P>
<p align=CENTER>插入文字或图片</P>
<p align=CENTER>插入文字或图片</P>
</B> </FONT>
</TD></TR></TABLE></CENTER>

　　说明：
　　●width=480＝图框宽度；
　　●height=350＝图框高度；
　　●bordercolor=oliv＝边框颜色；
　　●border=8＝边框线粗度．
　　●background=背景图片地址．

显示结果：

插入文字或图片

插入文字或图片

代码实例：

<TABLE width=480 height=350 bordercolor=olive background=http://sucai.heima.com/sucai/news/bg/23.gif border=18>
<TABLE width=480 height=350 bordercolor=olive background=http://sucai.heima.com/sucai/news/bg/23.gif border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#0000ff><B>
<br> <p align=CENTER>万紫千红总是春</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/03.jpg"width=400 border=1>
</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/08.jpg"width=400 border=1>
</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/19.jpg"width=400 border=1>
</P>
<p align=CENTER>图文：网络／编辑：游子</P>
</B> </FONT>
</TD></TR>;</TABLE></CENTER>

显示结果：

可爱的小动物

[转载]欢迎您！启步学代码（十四）转载 - 幻影日月 - 幻影日月

图文：网络／编辑：游子

把上面窄幅代码贴的图框和图片宽度各加大200,代码如下:

<TABLE width=680 height=350 bordercolor=olive background=http://sucai.heima.com/sucai/news/bg/23.gif border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#0000ff><B>
<br> <p align=CENTER>万紫千红总是春</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/03.jpg"width=600 border=1>
</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/08.jpg"width=600 border=1>
</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/19.jpg"width=600 border=1>
</P>
<p align=CENTER>图文：网络／编辑：游子</P>
</B> </FONT>
</TD></TR></TABLE></CENTER>

显示结果：

可爱的小动物

[转载]欢迎您！启步学代码（十四）转载 - 幻影日月 - 幻影日月

图文：网络／编辑：游子

像这样的宽幅代码贴,就必须加设全屏代码:

在代码的第一行前面加以下代码：
<DIV id=table1 style="LEFT: -220px; WIDTH:

800px;POSITION: relative; TOP: 40px">

在代码最后一行加以下代码：
</DIV><br><br><br><br>

不设置全屏代码时，贴子右边有一部份不能显示。

举报 |

| 收藏 | 更多 | 楼主回复

楼主：人间惆怅客SD 时间：2012-09-14 08:43:35

举报 | 收藏 | 1楼 | 打赏 | 评论

作者：枫叶Fs 时间：2012-09-14 20:02:56

　　喜欢!好特别。。。赞哦！！

举报 | 收藏 | 2楼 | 打赏 | 评论

作者：我的心在飞扬2011 时间：2012-09-14 20:48:15

　　惆怅讲解得好仔细哦，赞！问好@人间惆怅客SD

举报 | 收藏 | 3楼 | 打赏 | 评论

楼主：人间惆怅客SD 时间：2012-09-14 23:11:24

　　大家喜欢就好，我就高兴了。

举报 | 收藏 | 4楼 | 打赏 | 评论

作者：枫叶Fs 时间：2012-09-15 16:43:14

　　周末愉快！
　　

举报 | 收藏 | 5楼 | 打赏 | 评论

作者：不与莉花同梦时间：2013-05-27 16:57:24

　　严重学习。

举报 | 收藏 | 6楼 | 打赏 | 评论

作者：十三妮子绿窗中时间：2013-05-27 18:10:40

　　学些来了，O(∩_∩)O~

举报 | 收藏 | 7楼 | 打赏 | 评论

作者：花若怜_泪涧成线时间：2013-07-12 16:14:34

　　学习！！

举报 | 收藏 | 8楼 | 打赏 | 评论

天涯部落

从零启步学代码【十四】

如何在图框内插入图片或文字。

相关推荐