天涯部落

小圈子,大声音!呼朋引伴网聚部落!

创建新部落?

从零启步学代码【十四】

楼主:人间惆怅客SD 时间:2012-09-14 08:33:27 点击:562 回复:8
脱水模式给他打赏只看楼主 阅读设置
  此帖绝对不能点击“编辑”“不能编辑”两个按钮。否则,帖子中的示范代码就没有了,只剩下效果了。切记!!!




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

[转载]欢迎您!启步学代码 ( 十四 )转载 - 幻影日月 - 幻影日月


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


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


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


   (单层或多层图框内),插入多段文字的和图片.
  根据插入的图片宽度和色彩选好图框。有些论坛对代码


  贴图的宽度限制在500之内,所以图框包括边线宽度不能


  超过500,插入的图片宽度在400以内,否则其超过部


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


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


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


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




[转载]欢迎您!启步学代码 ( 十四 )转载 - 幻影日月 - 幻影日月



       在一张图框或图片内如何插入文字和图片?
  要在表格的单元格<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
  
作者 :枫叶Fs 时间:2012-09-14 20:02:56
  喜欢!好特别。。。赞哦!!
作者 :我的心在飞扬2011 时间:2012-09-14 20:48:15
  惆怅讲解得好仔细哦,赞!问好@人间惆怅客SD
楼主人间惆怅客SD 时间:2012-09-14 23:11:24
  大家喜欢就好,我就高兴了。
作者 :枫叶Fs 时间:2012-09-15 16:43:14
  周末愉快!
  
作者 :不与莉花同梦 时间:2013-05-27 16:57:24
  严重学习。
作者 :十三妮子绿窗中 时间:2013-05-27 18:10:40
  学些来了,O(∩_∩)O~
作者 :花若怜_泪涧成线 时间:2013-07-12 16:14:34
  学习!!

相关推荐

    发表回复

    请遵守天涯社区公约言论规则,不得违反国家法律法规