代码教程32【切割边框】学习笔记

作业： 一、认识切割图片边框。 一般来讲，由几个切割图片制作的边框，就需要设置几行一列的表格。在每一行的列标签中设置背景图片，背景图片为切割图片。在要放置网页内容的那一行的单元格中添加一套宽度比较小的表格标签，然后在单元格中放置网页内容。 二、填空： 在应用切割图片边框时，网页内容的（宽度）不能超过切割图片边框最里层表格的（宽度）。 切割图片边框的应用方法。 代码1： <TABLE border=0 cellSpacing=0 cellPadding=5 width=872 background=http://image53.360doc.com/DownloadImg/2012/07/1110/25434798_11 align=center> <TBODY> <TR> <TD style="FILTER: glow(strength=1) mask(color=#0000ff) chroma(color=#0000ff)" align=center> <P align=center><FONT style="LINE-HEIGHT: 150%; WIDTH: 100%; FONT-FAMILY: 华文新魏; COLOR: rgb(0,0,255); FONT-SIZE: 30pt"><B>古  典  美  女  边  框</B></FONT></P></TD></TR></TBODY></TABLE> <DIV align=center> <TABLE title=切割图片边框 border=0 cellSpacing=0 borderColor=#cccccc cellPadding=0 width=870 bgColor=#99ccff align=center> <TBODY> <TR> <TD height=164 background=http://image64.360doc.com/DownloadImg/2013/09/0106/34894093_3.gif width=870></TD></TR> <TR> <TD height=157 background=http://image64.360doc.com/DownloadImg/2013/09/0106/34894093_4.gif width=870></TD></TR> <TR> <TD height=165 background=http://image64.360doc.com/DownloadImg/2013/09/0106/34894093_5.gif width=870></TD></TR> <TR> <TD background=http://image64.360doc.com/DownloadImg/2013/09/0106/34894093_6.gif width=870> <DIV align=center> <TABLE title=切割图片边框 border=3 cellSpacing=0 cellPadding=0 width=700 height=300> <TBODY> <TR> <TD> <P style="TEXT-INDENT: 2em" align=center><FONT style="FONT-SIZE: 29px" color=#ff0000 size=4>内容处</FONT></P></TD></TR></TBODY></TABLE></DIV></TD></TR> <TR> <TD height=127 background=http://image64.360doc.com/DownloadImg/2013/09/0106/34894093_7.gif width=870></TD></TR> <TR> <TD height=133 background=http://image64.360doc.com/DownloadImg/2013/09/0106/34894093_8.gif width=870></TD></TR></TBODY></TABLE></DIV> 上面的代码，是由六个切割图片组成的边框代码。 第一层表格是六行一列的表格，每一行的列标签中都设置了背景图片。背景图片是切割图片。 第一行列标签中的背景图片为： 第二行列标签中的背景图片为： 第三行列标签中的背景图片为： 第四行列标签中的背景图片为： 第五行列标签中的背景图片为： 第六行列标签中的背景图片为： 上面的背景图片，是缩小以后的图片。高度与宽度都是原背景图片的1/2。 第四行是放置网页内容的地方。在第四行的单元格中，要添加一套宽度较小的表格标签(700px左右)，以便放入网页内容。添加的这套表格标签，是第二层表格。 第二层表格代码如下： <DIV align=center> <TABLE title=切割图片边框 border=0 cellSpacing=0 cellPadding=0 width=700 height=300> <TBODY> <TR> <TD> <P style="TEXT-INDENT: 2em" align=center><FONT style="FONT-SIZE: 29px" color=#ff0000 size=4>内容处</FONT></P></TD></TR></TBODY></TABLE></DIV> 第二层表格的宽度以多宽为宜？你可以设置边框线的宽度值（不为0）试试效果，通过测试，选择一个合适的宽度值。 如果不添加这套表格标签，放入的网页内容就会覆盖在背景图片上。 网络中搜索到的切割图片边框，往往没有这套表格标签，所以我们必须进行修改，把这套表格标签添加进去。 因为第二层表格的宽度为700px，所以，放入网页内容的宽度不能超过700px。如果超过了700px，表格就变形了。 表格发生变形的主要原因是放入的图片或者代码。图片的宽度超过700px，或者代码的宽度超过700px，而文字内容是不可能超过700px的。文字内容达到一定的宽度以后，是会自动换行的，而代码，特别是一个标签中的代码，是不会自动换行的。