边框的制作与应用

边框的制作与应用编辑：陈雨欣作者：柔情沙

一、首先我们先做一个边框（把这些代码先复制到源代码状态）代码如下： <table cellSpacing=38 width="100%" background=http://www.rqsha.com/Article/UploadFiles/200607/20060718110826988.jpg>
    <tr>
      <td>
        <table cellSpacing=0 borderColorDark=#0d1737 cellPadding=12 width="100%" borderColorLight=#24387a background=http://www.rqsha.com/Article/UploadFiles/200607/20060718110829771.jpg border=1>
          <tr>
            <td>
              <table cellPadding=5 width="100%" background=http://www.rqsha.com/Article/UploadFiles/200607/20060718110829119.jpg>
                <tr>
                  <td>
                    <table width="100%" background=http://www.rqsha.com/Article/UploadFiles/200607/20060718110830828.jpg border=0>
                      <tr>
                        <td>
                        <P> </P></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
</table> 切换到编辑栏里看效果：

加入内容

二、边框的基本格式及说明： <table cellSpacing=边框宽度 width="网页宽度" background=第一层边框图片网址>
    <tr>
      <td>
        <table cellSpacing=边框宽度 borderColorDark=暗边框的颜色 cellPadding=边框距离 width="网页宽度" borderColorLight=亮边框的颜色 background=第二层边框图片网址 border=边框的厚度>
          <tr>
            <td>
              <table cellPadding=边框距离 width="100%" background=第三层边框图片网址>
                <tr>
                  <td>
                    <table width="网页宽度" background=背景图片网址 border=边框的厚度>
                      <tr>
                        <td>
                        <P> </P></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
</table> 说明：     <table>：表格的起始符。任意一个表格的开始都必须以它开头，且必须有终止符</table>。     cellspacing：单元格间距，用来指定表格与各单元格之间的空隙。 cellpadding：用来指定单元格内容与单元格边界之间的空白距离的大小。     width：表格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800×600的显示分辨率下，如果表格设置成1000个像素的宽度，那么，得出的效果将导致IE的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比，如widht="100%"，这种赋值法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。     background：表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突，也建议这么做，这样，当图片不能显示时，表格的外观依然是好看的。     <tbody>：表体的起始符。紧跟在<table>之后，表示表体开始。必须有结尾符，放在</table>之前。     <tr>：tr的作用是规定表格的行，其中，t是table，r是row（行）。有多少组tr，这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。     <td>：td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。以上就第一层边框的基本要素，现在我们在看看第二层边框： <TABLE cellSpacing=0 borderColorDark=#0d1737 cellPadding=边框宽度 width="网页宽度" borderColorLight=#24387a background=第二层边框图片网址 border=1>
<TBODY>
<TR>
<TD> 其它的全和第一层一样，但多了这二组： 1：cellSpacing=1 borderColorDark=#0d1737 为暗边框，边框宽度为1象素，颜色为0d1737 2：    cellpadding：单元格间距。指该单元格里的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。 3：borderColorLight=#24387a 为亮边框，颜色为0d1737 第三层边框和第一层一样，现在我们来看最后一层边框也就是背景。 <TABLE width="网页宽度" background=背景图片网址 border=0>
<TBODY>
<TR>
<TD> 它只有背景的宽度width="网页宽度"，背景展示的网址：background=背景图片网址，还多了一个border=0它是什么意思呢？ border：此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框。三、认识了边框的结构和代码后，让我们自己亲自制作一些边框吧首先我们先选好所需的素材
1、我们先制作一个表格

2、转换为HTML模式，边框变为代码如下： <table borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=2 heihgt="">
    <tr>
      <td> </td>
    </tr>
</table>
3、修改边框颜色代码: 点击进入提取颜色代码代码： http://www.rqsha.com/Article/ShowArticle.asp?ArticleID=305 代码如下: <TABLE borderColor=#EE7600 cellSpacing=2 cellPadding=3 width="100%" bgColor=#FF82AB border=1>
<TBODY>
<TR>
<TD>内容</TD></TR></TBODY></TABLE> 4、添加背景图片即代码background，代码如下：换上代码background= 及图片地址，把border=1改为border=0 ，cellSpacing=2 把2修改得大一点，比如20 ，数越大，边框越宽第一层的全代码： <TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" bgColor=#FF82AB background=http://bbs.rqsha.com/flash003/jiaocai/img/a001.jpg border=0>
<TBODY>
<TR>`
<TD>添加内容</TD></TR></TBODY></TABLE> 5、这是第一层，转换为“编辑”模式，看一下效果 `

添加内容

我们接着做第二层：
1。把第一层的上半部分复制， <TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a001.jpg border=0>
<TBODY>
<TR>
<TD>
我们将图片地址修改一下 2、然后稍作修改就可以了。
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a002.jpg border=0>
<TBODY>
<TR>
<TD> cellSpacing=1 把原来的20改为了1。同样的方法做第三层
第三层的代码是 <TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a003.jpg border=0>
<TBODY>
<TR>
<TD>
不用发出，你转换一下模式就可以看出效果了

前三层全代码如下： <TABLE borderColor=##EE7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a001.jpg   border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=##EE7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a002.jpg border=0>
<TBODY>
<TR>
<TD> <TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a003.jpg border=0>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> 看看效果：

七层边框：第四层跟第二层一样，第五层跟第一层一样，第六层跟第二层还一样，把原来的代码依次复制过来就可以了。（图片还可以自由组合）都复制过来看看效果：

<TABLE borderColor=#0e7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a001.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a002.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ee7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a003.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a004.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0e7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a001.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a002.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ee7600 cellSpacing=1 cellPadding=0 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a002.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> OK，让我们预览一下效果：

我们做八层边框，再复制一层代码过来，然后换上背景地址就OK了。最后一层代码如下： <TABLE borderColor=##EE7600 cellSpacing=1 cellPadding=0 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a003.jpg border=0>
<TBODY>
<TR>
<TD>内容</TD></TR></TBODY></TABLE> 让我们一起看看八层边框组成的效果吧：

内容
<table borderColor=#0e7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a001.jpg border=0>
    <tr>
      <td>
        <table borderColor=#0e7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a002.jpg border=0>
          <tr>
            <td>
              <table borderColor=#ee7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a003.jpg border=0>
                <tr>
                  <td>
                    <table borderColor=#0e7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a004.jpg border=1>
                      <tr>
                        <td>
                          <table borderColor=#0e7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a001.jpg border=0>
                            <tr>
                              <td>
                                <table borderColor=#0e7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a002.jpg border=0>
                                  <tr>
                                    <td>
                                      <table borderColor=#ee7600 cellSpacing=1 cellPadding=0 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a002.jpg border=0>
                                        <tr>
                                          <td>
                                            <table borderColor=#0e7600 cellSpacing=1 cellPadding=0 width="100%" background=http://bbs.rqsha.com/flash003/jiaocai/img/a003.jpg border=0>
                                              <tr>
                                                <td>内容</td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
</table> 八层的边框套装就这样制成了，现在朋友们可以找不同的边框背景图片直接套用，要多练习就能熟悉，祝朋友们开心！！欢迎光临柔情沙网站
http://www.rqsha.com/Article/Index.asp