【转载】记住这些常用代码，做边框就不愁啦

2014-10-25 22:30:52| 分类：【边框模板】 |举报 |字号

本文转载自和尚《记住这些常用代码，做边框就不愁啦》

记住这些常用代码，做边框就不愁啦

表格常用属性

代　码

代码属性含义

border=1 边框的边线宽度,数字越大边线越粗,为0表示没有边框。

cellpacding=1 里框与外框之间的距离,数字越大之间的宽度越宽。

cellpadding=1 里框内容与里框之间的距离,数字越大之间的宽度越宽。

width=200 宽度代码,200表示像素,数字越大越宽。

height=200 高度代码,200表示像素,数字越大越高。

bgcolor=#ffffff 边框的背景颜色,ffffff表示背景颜色为白色。

background=图片地址边框的背景图片,=后面加图片地址。

borderColor=#cccccc 边框的颜色,(当border值不为0时设置此值才显示)。

align=center 边框居中代码,(不设此代码边框居左,=后加right为右对齐)。

你如果会熟练运用这几个边框的常用属性，制作边框对你来说就不难了。只要

点一下表格按钮，就会出现下面的边框基本代码，然后你再根据自己的需要添加上

面的属性，使之边框符合你的心意。目前我们用到的边框基本上属于两大类型：一

种是框套框类型，就是大框套小框的意思；另一种类型是框叠框类型，就是一个个

框叠起来，再配上各种颜色或图片组成的。下面我说说具体的做法：

边框基本代码<TABLE border=1 cellSpacing=1 cellPadding=1 align=center>

<TBODY>

<TR>

你如果只要一个简便的双线框，只要添加几个代码就成了：(兰色的代码)

并将红色的数字改成你喜欢的宽度。

日志内容

双线带底色边框代码<TABLE border=2 cellSpacing=5 borderColor=#ffffff cellPadding=0 width=800 bgColor=#000000 align=center height=300>

<TBODY>

<TR>

你如果你要做个框套框的边框，只要添加几组单个边框代码就成了：四层就添

加三组(共四组代码)，但是，收尾代码</TD></TR></TBODY></TABLE>需要放在最

后，有几层就需要放几组收尾代码（白色代码）这是“框套框”与“框叠框”最大

的区别。框边的宽度数字可以改成你喜欢的宽度，边框颜色你可自己调。

日志内容

四层带底色彩色边框代码<TABLE border=4 cellSpacing=0 borderColorLight=#5b00ae borderColorDark=#000000 cellPadding=1 width=800 align=center>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

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

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

你如果想要将图片做框边，只要添加背景图片代码就成。下面是三层图片组成

边框外加一张底图的边框。添加图片后，底色就自动遮盖了。下面的紫色代码就是

背景图片代码。同样道理，收尾代码</TD></TR></TBODY></TABLE>需要放在最后。

日志内容

四层带底色彩色边框代码<TABLE border=0 cellSpacing=10 borderColor=#556b2f cellPadding=10 width=800 background=http://image79.360doc.com/DownloadImg/2014/11/1613/47155444_5.gif

bgColor=#ce0000 align=center>

<TBODY>

<TR>

<TD>

<TABLE border=0 cellSpacing=2 borderColor=#556b2f cellPadding=2 background=http://image79.360doc.com/DownloadImg/2014/11/1613/47155444_6.gif

bgColor=#000000 align=center>

<TBODY>

<TR>

<TD>

<TABLE border=0 cellSpacing=3 borderColor=#556b2f cellPadding=3 background=http://image79.360doc.com/DownloadImg/2014/11/1613/47155444_7.jpg

bgColor=#000000 align=center>

<TBODY>

<TR>

<TD>

<TABLE border=0 cellSpacing=0 borderColor=#556b2f cellPadding=0 width=750 background=http://image79.360doc.com/DownloadImg/2014/11/1613/47155444_8.jpg

bgColor=#000000 align=center height=200>

<TBODY>

<TR>

<TD>

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

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

下面我再说说怎么做框叠框的边框。其实最方便又好看的是框叠框边框，这种

边框一般由三张图片组成，也有些是四张五张等图片的，多一张图片就多加一层代

码就行了。与框套框的收尾代码不同的是，收尾代码</TD></TR></TBODY></TABLE>

需要放在每一层代码的后面，但是作为底板的图片，一般是第二张，收尾代码需要

放在内容的后面。举列说明：

这是第一张图，也叫框头图，图片地址如下：http://image79.360doc.com/DownloadImg/2014/11/1613/47155444_1.jpg

这是第二张图，也叫底板图，图片地址如下：http://image79.360doc.com/DownloadImg/2014/11/1613/47155444_2.gif

这是第三张图，也叫框底图，图片地址如下：http://image79.360doc.com/DownloadImg/2014/11/1613/47155444_3.jpg

将三张图片拼起的的代码如下：

框叠框的基本代码<TABLE border=0 borderColor=#cccccc cellPadding=0 width=880 background=http://image79.360doc.com/DownloadImg/2014/11/1613/47155444_1.jpg bgColor=#ffffff align=center height=360>

<TBODY>

<TR>

<TBODY>

<TR>

<TD>在此可添加内容</TD></TR></TBODY></TABLE>

<TBODY>

<TR>

以上是基本代码，你还可以在图片中加点动态的点缀，要注意两点：1.红色的宽高

数字要与其背景图片一致；2.点缀的动画宽高不能超过其背景的宽高；其代码如下:

(深黄色)

框叠框加点缀后的基本代码<TABLE border=0 borderColor=#cccccc cellPadding=0 width=880 background=http://image79.360doc.com/DownloadImg/2014/11/1613/47155444_1.jpg bgColor=#ffffff align=center height=360>

<TBODY>

<TR>

<TBODY>

<TR>

<TD>在此可添加内容</TD></TR></TBODY></TABLE>

<TBODY>

<TR>

完整边框如下：

在此可添加内容

和尚2014-10-25编辑

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。