天涯部落

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

创建新部落?

从零启步学代码【十二】

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


 




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

如何用HTML代码贴图。


 


    用HTML代码贴图,图片必须是网络上的图片绝对地址(URL)


如果是本机硬盘的图片,应先上传到较隐定的空间(免费相册或可


上传图片的论坛),取得图片的地址和图片的尺寸大小。新学习者


最好选择一些较简单的图框来贴图。由于各论坛系统对贴子宽度有


不同的限制,因此图框的宽最好不要超过500,图片宽度则在400左


右。


 


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



几种常用贴图代码。

 第一种:
<img src="图片地址">
 


第二种:
<img src=“图片地址” width='80'height='280'


border='10'>
 


第三种:)(图片可调大小)
<INPUT src="图片地址" type=image width=500>

第四种:(用图片作表格背景的贴图方法)



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



第一种最简易使用的贴图代码。


       <img src="图片地址">
用网络上的图片绝对地址(URL)粘贴上去就可以了。但这种方


法贴的图片,各论坛对图片宽度显示有不同的限制,有时不是原


图片的尺寸,更不是你想要多大就多大。
这里有一张图片地址:
http://photo.southcn.com/upload/F202922004.11.4.22.


24.422.jpg


把它粘贴在上面代码中的“图片地址”如下:


 



<CENTER>
<img src="http://img3.laibafile.cn/p/m/117142594.gif


5d44c6e5&690">
</CENTER>


 


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


显示结果:


 


起步学代码【十二】 - 不是人间富贵花 - 生命载厚德故丰盈  心灵因大爱而高洁




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



第二种简易使用的图片可定大小有黑色边框的贴图代码:



<CENTER>
<img src=http://photo.southcn.com/upload/F202922004.


11.4.22.24.422.jpg width=620 height=380 border='10'>
</CENTER>


 


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


显示结果:


 


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


 




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



第三种:图片可调大小的代码:







有一张图片原尺寸宽1024,高768.图片地址:
http://www.5pk.cn/infoPic/pic85/pic85961c1.jpg

把图片地址套入下面代码,同时设置不同宽度,图片就可变大或变小。
<INPUT src="图片地址" type=image width=500>


◆代码1:

<INPUT src="http://static8.photo.sina.com.cn/middle/


5d114333g6fcca4


d555f7&690" type=image width=300>



◆代码2:

<INPUT src="http://static15.photo.sina.com.cn/middle/5d114333g


77434330e76e&690" type=image width=500>


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


显示结果:





◆代码3:

<INPUT src="http://static14.photo.sina.com.cn/middle/5d114333g


774342f3e70d&690" type=image width=650>


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


显示结果:


 




 


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

第四种;用表格的贴图代码。

 
<CENTER>
<TABLE borderColor=#fbd44c cellSpacing=3 cellpadding=0 background=http://photo.southcn.com/upload/F202922004.11.

4.22.24.422.jpg width=660 height=380 border=15>
<TBODY>
<TR>
<TD>
<br>
</TD></TR></TBODY></TABLE></CENTER>

●说明:用图片作表格背景必须注意图片素材原尺寸和图框宽度设置要一致。如果图片小而图框大,会显示部份重影,多出一部份图像。相反如果图片大而图框小则只显示图像的一部份。

 

第四种;用表格贴图代码实例





<CENTER>
<TABLE borderColor=#fbd44c cellSpacing=3 cellpadding=0 background=http://static15.photo.sina.com.cn/middle/


5d114333g7e34523ae11e&690


width=600 height=400 border=15>
<TBODY>
<TR>
<TD><br>
</TD></TR></TBODY></TABLE></CENTER>
 


 


 


 

 

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

显示结果:

 





楼主人间惆怅客SD 时间:2012-09-13 23:14:30
  
作者 :星连193 时间:2012-09-13 23:41:42
  学习。
作者 :枫叶Fs 时间:2012-09-14 20:05:04
  问好好友!@人间惆怅客SD,@星连193
作者 :我的心在飞扬2011 时间:2012-09-14 20:45:39
  来学习!
作者 :孤客在路上 时间:2012-12-12 20:39:19
  学习了
作者 :美到心间 时间:2013-04-29 11:34:00
  我觉得第四种是一种简单有效果的做边框的方法。
作者 :冰雪儿的眼泪 时间:2013-07-31 13:00:58
  辛苦了,楼主。

相关推荐

发表回复

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