打开APP
userphoto
未登录

开通VIP，畅享免费电子书等14项超值服

开通VIP

首页

好书

留言交流

下载APP

联系客服
用HTML代码制作边框过程(初学者请进)
userphoto 关注

用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.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg)

下面是第一层的全代码：

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/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.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>

<TBODY>

<TR>

<TD>

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

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

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

<TBODY>

<TR>

<TD>

前两层的全代码如下：

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

<TBODY>

<TR>

<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/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.xax.net.cn/UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

前三层全代码如下：

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

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/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.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

前四层全代码如下：

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

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

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/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.xax.net.cn/UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

前五层全代码如下：

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

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

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

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/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.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

前六层全代码如下：

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

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

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

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

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/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.xax.net.cn/UploadFile/2006-5/20065172192889288.gif border=0>
<TBODY>
<TR>
<TD>

前七层全代码如下：

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

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

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

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

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

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/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.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

前八层全代码如下：

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

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

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

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

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

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

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/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> 来对应,

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

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

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。
打开APP，阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序，算一算2024你的财运
日志边框11
精美日志边框代码 复制代码即可用
记住这些常用代码，做边框就不愁啦
简单音画帖子制作
=== HTML代码音画教程：如何编辑精美日志边框 ===
几款漂亮的播放器代码
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权！
如果VIP功能使用有故障，
可点击这里联系客服！

联系客服