|
欢迎您！启步学代码。
（16）
小青年搜集整理提供
（原创编辑者:游子。 供初学HTML代码的朋友参考）
如何在三合一图框中贴图
三合一花边图框这是一种由三张图片组成的图框。它与套装图框不一样，套装图框是由几张表格图片叠成的，三合一图框则是由三张图片组成的。看下面这个图框好像是一张完整的图框。
原创编辑者:游子。
其实这是由下面三张图片合成的。
第一张图片：
第一张图片的代码：
<br><br>
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs./attachments/month_0509/01001_9TliiiYtmh6h.jpg>
<TR>
<TD>
</TD></TR></TABLE>
<
原创编辑者:游子。
|
原创编辑者:游子。
第二张图片：
第二张图片的代码：
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs./attachments/month_0509/01002_LYPmuEraic5B.jpg >
<TR>
<TD>
</TD></TR></TABLE>
原创编辑者:游子。
|
原创编辑者:游子。
第三张图片：
第三张图片的代码：
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs./attachments/month_0509/01003_2sij2ONPvtrn.jpg>
<TR>
<TD>
</TD></TR></TABLE>
原创编辑者:游子。
|
原创编辑者:游子。
把上述三张图片的代码顺序合成一起，就成为一张漂亮的三合一花边图框了。
<br><br>
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs./attachments/month_0509/01001_9TliiiYtmh6h.jpg>
<TR>
<TD>
</TD></TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs./attachments/month_0509/01002_LYPmuEraic5B.jpg >
<TR>
<TD>
</TD></TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs./attachments/month_0509/01003_2sij2ONPvtrn.jpg>
<TR>
<TD>
</TD></TR></TABLE>
<BR><BR>
◇请您把这个代码完整的复制起来，让后粘贴到下面编辑器，再击运行代码就可看效果了。
原创编辑者:游子。
|
原创编辑者:游子。
要在三合一花边框内插入图文等内容是非常方便的，就是先在第二张图框表格的单元格中插入所有内容，再在最前面插入第一张图框，在最后面插入第三张图框，就面为一个完整的花边图框贴了。使用时注意几个问题：
◆花边图片一定要用原来的宽和高的尺寸。如果要调整，必须用图像软件处理。
◆三张花边图框的宽度要一致。
◆第一、三张图框的高度，一定要用原来的尺寸，第二张图框的高度不限。
◆花边图框表格的首尾标签，不能有空格、空行等。否则会产生断层现象。
三合一花边图框贴图代码模式：
<TABLE cellSpacing=0 cellPadding=0 width=宽度 height=高度 align=center background=第一张图框的图片地址>
<TR>
<TD>
</TD></TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=宽度 height=高度 align=center background=第二张图框的图片地址 >
<TR>
<TD>
这里是第二张图框的单元格，可以开始插入内容。
</TD></TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=宽度 height=高度 align=center background=第三张图框的图片地址>
<TR>
<TD>
</TD></TR></TABLE> <br>
【说明】
◇黄色字体是第一张图框的代码。
◇白色字体是第二张图框的代码，
◇绿色字体是第三张图框的代码。
原创编辑者:游子。
|
原创编辑者:游子。
编辑：游子
（待续）
（为了让更多网友学用html代码贴图制作网页，本贴欢迎转载，但是，转载时请不要把原创编辑游子的名字改掉。谢谢！）
下面提供几个不同花边图框样式及图片地址尺寸给大家欣赏和练习.
http://image.10jqka.com.cn/2006/12/1/1164922994_42ce8ee7c3c5e53f50b4491f9c46e297.jpg
784*22
http://image.10jqka.com.cn/2006/12/1/1164923010_5633a82c842f6320acb413e4867751cf.jpg
784*822
http://image.10jqka.com.cn/2006/12/1/1164923027_fa53aa6fbf365bc7d4dfbbde60a0cdfd.jpg
784*22
原创编辑者:游子。
http://bbs./forum/UploadFile/2005-5/20055212019258.jpg
865*173
http://bbs./forum/UploadFile/2005-5/20055212030771.jpg
865*173
http://bbs./forum/UploadFile/2005-5/20055212019408.jpg
865*173
原创编辑者:游子。
http://www./bbs/UploadFile/2006-7/200671116473392928.jpg
700*160
http://www./bbs/UploadFile/2006-7/200671116473379862.jpg
700*178
http://www./bbs/UploadFile/2006-7/200671116473360039.gif
700*164
原创编辑者:游子。
.
http://bbs./UploadFile/2006-12/200612299561860418.gif
778*21
http://bbs./UploadFile/2006-12/200612299572497844.gif
778*400
http://bbs./UploadFile/2006-12/200612299573889550.gif
778*24
原创编辑者:游子。
|
