您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网页素材>>>综合素材>>>边框的制作及代码知识
边框的制作及代码知识
发表日期:2007/4/10 23:35:00 出处:未知 作者:未知 发布人:zhang9607lin 已被访问 2211

一、首先我们先做一个边框(把这些代码先复制到源代码状态)

代码如下:

  <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>&nbsp;</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>&nbsp;</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>&nbsp;</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>

八层的边框套装就这样制成了,现在朋友们可以找不同的边框背景图片直接套用,要多练习就能熟悉,祝朋友们开心!!

 

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



sxg99999
(2007/7/3 22:16:00)

不老草站长:你这些都会吗?可我却还是丈二摸不着头脑!怎样才能学会呢?

 发表评论:共有 1 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

闪客公寓休闲娱乐网 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:340623306 联系人:王小华