用HTML代码制作边框过程(初学者请进)

用HTML代码制作边框过程(初学者请进)  

第一步:打开个发主题帖子编辑栏,点插入表格不用设置（默认设置确定即可）如下:

第二步:转换为HTML模式，边框变为代码如下：

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>

<TBODY>

<TR>

<TD> </TD></TR></TBODY></TABLE>

第三步:然后把代码稍微修改一下

把其中的bgColor=#ffffff(红色)去掉，换上background= 图片地址，把border=1(绿色)改为border=0 ，cellSpacing=2 (蓝色)把2修改得大一点，比如20 ，数越大，边框越宽。

这是第一层，转换为DESIGN模式，看一下效果如下:(我加的图片地址为:http://www./UploadFile/2006-5/20065171465936112.jpg)

下面是第一层的全代码：

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171465936112.jpg border=0>

<TBODY>

<TR>

<TD> </TD></TR></TBODY></TABLE>

一层效果还不好，我们接着做第二层：

第一步:把第一层的上半部分复制<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171465936112.jpg border=0>

<TBODY>

<TR>

<TD>

第二步:稍作修改,cellSpacing=20 把原来的20改为了1,再把图片地址就改一下就好了

改好后代码如下:(我用的图片地址是:http://www./UploadFile/2006-5/2006517195134444.jpg)

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>

<TBODY>

<TR>

<TD>

前两层的全代码如下：

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171465936112.jpg border=0>

<TBODY>

<TR>

<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>

<TBODY>

<TR>

<TD>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

为了看清楚效果我加了文字

 

同样的方法做第三层:

修改好的第三层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

前三层全代码如下：

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

放心去飞

 

同样的方法做第四层:

修改好的第四层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

前四层全代码如下：

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

放心去飞

 

同样的方法做第五层:

修改好的第五层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

前五层全代码如下：

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

放心去飞

 

同样的方法做第六层:

修改好的第六层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

前六层全代码如下：

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

放心去飞

 

同样的方法做第七层:

修改好的第七层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065172192889288.gif border=0>
<TBODY>
<TR>
<TD>

前七层全代码如下：

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065172192889288.gif border=0>
<TBODY>
<TR>
<TD>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

放心去飞

 

同样的方法做第八层:

修改好的第八层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

前八层全代码如下：

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/20065172192889288.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www./UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

放心去飞

 

做了八层基本上好看了吧！如果你觉得不够还可以再继续...

要注意的是每一层都要有</TD></TR></TBODY></TABLE> 来对应,

如上我做了八层就要有八个来对应,多一个少一个都发不出来的,一定要注意哦! 最好发表前检查一遍.

做好边框大家可以在边框里加你喜欢的图片和文字了.