引用
亮剑 的 用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.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> 来对应,
如上我做了八层就要有八个来对应,多一个少一个都发不出来的,一定要注意哦! 最好发表前检查一遍.
做好边框大家可以在边框里加你喜欢的图片和文字了.
★ “引用”日志的方法 ★
1. 进入日志浏览页面→ 2. 点击日志右下角“引用”→ 3. 点左下角引用此篇日志到
我的博客→ 4.出现日志编辑页面 → 5.点发表日志即可。博客代码汇总实用教程汇总方法技巧汇总电脑知识汇总影视欣赏汇总
名曲欣赏汇总幽默笑话汇总心情图文汇总博客游戏汇总情感杂谈汇总
美图欣赏汇总博客音画汇总散文朗诵汇总博客页面设置边框系列汇总
卷轴音画汇总健康天地汇总特效素材汇总综合素材集锦博客动画汇总
评论