注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幸福人生

幸福人生

 
 
 

日志

 
 

多层背景边框的做法  

2011-07-23 17:05:57|  分类: 音画 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 多层背景边框的做法

编制/归舟

HTML语言,就是一个公式,网上有很多关于这方面的知识,我就画下下面的公式,大家照着描就好了,    你只要在可以使用HTML功能的地方,把下面的“东西”照搬着放到里面就好:

    这是个七层的公式,当然依次类推,你可以做的更多,或者你只要一层也可以啊:))

1第一层:<table div align="center" border="0" cellpadding="0" cellspacing="15" width="540" background="http://bbs.hnol.net/theimg/2004-6-20/18/2004620188861105.jpg">
<tr><td width="100%" align="center">
 

第二层:<table border="0" cellpadding="0" cellspacing="3" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg">
<tr><td width="100%" align="center">
 

第三层:
<table border="0" cellpadding="0" cellspacing="20" width="100%" background="
http://bbs.hnol.net/theimg/2004-6-20/18/200462018101221105.jpg">
<tr><td width="100%" align="center">
 

第四层:
<table border="0" cellpadding="0" cellspacing="2" width="100%" background="
http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg">
<tr><td width="100%" align="center">
 

第五层:
<table border="0" cellpadding="0" cellspacing="5" width="100%" background="
http://bbs.hnol.net/theimg/2004-6-20/18/200462018103131105.jpg">
<tr><td width="100%" align="center">
 

第六层:
<table border="0" cellpadding="0" cellspacing="1" width="100%" background="
http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg">
<tr><td width="100%" align="center">
 

第七层:
<table border="0" cellpadding="0" cellspacing="0" width="100%" background="
http://bbs.hnol.net/theimg/2004-6-20/18/200462018101221105.jpg">
<tr><td width="100%" align="center">

    大家看见了吧,除了第一层有几个格式不一样,后面几个基本一样,就是限定的数字不一样,由你自己限定,做出来看着好看就好了,这是目的:))

    注意,还有这个也是不一样的--background="http://bbs.hnol.net/theimg/2004-6-20/18/200462018101221105.jpg"*>,就是引号里面的。那个网址就是你自己想要放在自己网页里面的背景图片,你想想如果都用一种背景图片,我们干吗这么费劲地做七遍啊:))所以要选择不同的背景图片才可以显示层次感,才会丰富好看啊:)))当然,选择的时候几层要搭调,就的协调,才好看。大家看明白了吗?

    上面介绍的就是背景的制作。

    接下来,就要把自己喜欢的图片和文字加上---

    也很简单,图片的最简单格式---


<center> <IMG src=*"http://www.6to23.com/s8/s8d18/autopostimg/20031030161019.jpg" width=500 height=400>

   其中,要变化的和背景一样,就是图片的网址,和“500”、“400”。500指的是宽,你不想要那么宽,你可以设定成450、350。。。。。等。“400”指是的高,和宽的道理一样:)))

   文字,要先规定它的颜色、字体和大小,一般格式如下:

<CENTER><FONT color=green face=隶书 size=4>

    看见里面,什么是颜色,什么是字体,什么是大小了吧,这也是随你喜好调整的:)))

   在它的下面加自己的文字就好了,行和行用“<br>”就好了。

   简单吧:)))

   再下来就是放自己喜欢的音乐,常用格式如下:

<embed src="网址" autostart="true" width="330" height="83">

    可以调整的就是引号里面的“网址”--指你选择的歌的网址,播放器的大小尺寸。

    最后收尾。就是加上下面的就好了。


</DIV></TD></TR></TABLE></DIV></TD></TR></TABLE>
</DIV></TD></TR></TABLE></DIV></TD></TR></TABLE>
</DIV></TD></TR></TABLE></DIV></TD></TR></TABLE>
</DIV></TD></TR></TABLE>

有几层加几个:     </DIV></TD></TR></TABLE>

    到此,一个漂亮的网页就在你的手下做成功了,呵~~~~试试看,是不是很很简单哦:)))

   注意,在做的时候,把所有的*号,去掉,那是为了在讲的时候,发在网页上不会显现出来是真实的图片了:)))--W我已把上面的*号去掉了:)

 

===========================下面的你可以不看,看了也没坏处:))

 

<*html> 是开头标记,指明下面是HTML语言编写的。
<*head><*bgsound src="
http://www.6uc.com/ycb/jiaoshi/g-yyj/music/20.mp3" loop=3*><*/head>
是指HTML文件主题,一般音乐文件也可以插在此处。反正隐藏的音乐无论放在什么地方都可以的。
 

相关属性调整:

[align="center"] 表格的摆放位置(水平),可选值为: "left", "right", "center"

[border="0"] 表格边框的厚度,不同浏览器有不同的内定值,故请指明。

[cellpadding="0"] 文字内容与格线的距离。

[cellspacing="15"] 表格格线的厚度,数值越大,显示就越厚。

[width="540"] 表格宽度,接受绝对值(如 80)及相对值(如 80%)。

[background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553878.jpg"]表格的背景图片,(与" bgcolor "不要同用)。

在<*td>里面的[width="100%"]是指表格里面内容占整个表格的100%,[align="center"]指表格里面的内容居中.

注明:最后一层表格,<*table border="0" cellpadding="0" cellspacing="0" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553907.jpg"*><*tr><*td width="100%" align="center"*>
在<*table .......>的属性中勿须设制居中,把居中设制在<*td width="100%" align="center"*>里面。在<*td>里面的"width="100%"是指表格里面内容占整个表格的100%,*align="center"*指表格里面的内容居中,这样在这个格里的所有内容不用加居中符号它们也是居中的,省去了很多代码。
为了使整个代码帖发表后在论坛里居中所以只用在第一层表格的<*table> 里加上居中就可以了,后面多层的居中就加在<*td>里面。第一层表格中,<*table .......>里面的*align="center"*是指表格在整个页面处于居中,*width="540"* 是指整个表格的宽度。

下面是帖子内容文字的代码:

<*FONT face=隶书 color=#FFFF00 size=5*>

[face=隶书] 指字体

[color=#FFFF00] 指文字颜色

[size=4] 指文字大小,数值越大文字越大

文字中间<*br>是换行符号

 

说明:

背景层的代码如下:<*table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"*><*tr><*td>

没用背景图片也没用背景颜色,只用了边框的颜色的属性。

[bordercolorlight="#C9B976"] 表格边框向光部分的颜色

[bordercolordark="#C9B976" ]表格边框背光部分的颜色

由于在整个内容部分的表格层里的<*td width="100%" align="center"*>中设制了居中,所以这个表格中的内容都会居中,在这里的图片边框表格和图片代码中都不需要再设制居中了。图片也只用调整宽和高了。

图片的代码如下:<*img border="0" src="http://211.147.4.138/upload/00/80/54/88/805488_1076739938031.jpg" width="320" height="240"*>

注明:在每张图片层的结尾处都不要忘了收尾<*/TD><*/TR><*/TABLE>,用了几个表格来加框这里就要有几个收尾。

在主题内容的图片和文字完了之后,由于前面把整个帖子的内容加了表格的,所以这里在内容图片文字完结之后不要忘了收尾<*/td><*/tr><*/table><*/td><*/tr><*/table><*/td><*/tr><*/table>

这里用了三个<*table>就要有三个<*/table> 来结尾.这样主题内容算是完成了。后面的就加一些装饰的图,签上名字等`````再来就是帖子结尾了。最前面的我用了七层表格做为帖子背景,这里收尾也要有七个层。

<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table>

 


说明:看起来好像是用了四层表格,其实只用了两层,同一个背景图。主要是边框向光和背光部分的颜色应用起到的效果。

原代码如下:
<table lign="center" border="1" cellpadding="8" cellspacing="10" width="400" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg" bordercolorlight="#0C091D" bordercolordark="#C0B4FE"><tr><td width="100%" align="center">
<table lign="center" border="1" cellpadding="4" cellspacing="6" width="100%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg" bordercolorlight="#0C091D" bordercolordark="#C0B4FE"><tr><td width="100%" align="center">
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br>
</td></tr></table></td></tr></table>

说明:
这种效果其实有好几种方法做出来,但是在我认为这种是最简单的,只是金色背景那层(第二层)表格的宽是100%其它属性值一律为0。主要是在第三层,第三层的宽width的取值要是99%,而第三层的td里的width属性要是100%。

源代码如下:
<table lign="center" border="0" cellpadding="0" cellspacing="10" width="400" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215251105.jpg"><tr><td width="100%" align="center">
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="99%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br>
</td></tr></table></td></tr></table></td></tr></table>

 

说明:这个好像没什么特别的,就是把四个角上的框架图用表格分开。

源代码:
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="400" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR><TD width="50%" align=left><img border="0" src="
http://bbs.hnol.net/theimg/2004-9-28/23/20049282322381105.gif"></TD><TD width="50%" align=right><img border="0" src="http://bbs.hnol.net/theimg/2004-9-28/23/20049282322681105.gif"></TD></TR></TBODY></TABLE>
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR><TD width="50%" align=left><img border="0" src="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823221011105.gif"></TD><TD width="50%" align=right><img border="0" src="http://bbs.hnol.net/theimg/2004-9-28/23/200492823221331105.gif"></TD></TR></TBODY></TABLE></td></tr></table>

 说明:
把图片应用到边框上面,整个表格的大小很重要,调整也是件麻烦的事,所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。

源代码:

<table lign="center" border="1" cellpadding="0" cellspacing="10" width="400" background="http://bbs.hnol.net/theimg/2004-9-28/23/200492823215501105.jpg" bordercolorlight="#C0B4FE" bordercolordark="#0C091D"><tr><td width="100%" align="center">
<table lign="center" border="1" cellpadding="0" cellspacing="18" width="100%" background="
http://img.hnol.net/img/2004-09-29/1/200492912701105.gif" bordercolor="#C0B4FE"><tr><td width="100%" align="center">
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br></td></tr></table></td></tr></table></td></tr></table>

") 说明:
把图片应用到边框上面,整个表格的大小很重要,调整也是件麻烦的事,所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。

源代码:

<table lign="center" border="1" cellpadding="0" cellspacing="10" width="400" background="http://bbs.hnol.net/theimg/2004-9-28/23/200492823215501105.jpg" bordercolorlight="#C0B4FE" bordercolordark="#0C091D"><tr><td width="100%" align="center">
<table lign="center" border="1" cellpadding="0" cellspacing="18" width="100%" background="
http://img.hnol.net/img/2004-09-29/1/200492912701105.gif" bordercolor="#C0B4FE"><tr><td width="100%" align="center">
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br></td></tr></table></td></tr></table></td></tr></table>

 最后把表格的相关属性再全都说明一下。

<TABLE> 的参数设定(常用):

<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF"><tr><td>

</td></tr></table>

HTML语言,就是一个公式,网上有很多关于这方面的知识,我就画下下面的公式,大家照着描就好了,    你只要在可以使用HTML功能的地方,把下面的“东西”照搬着放到里面就好:

    这是个七层的公式,当然依次类推,你可以做的更多,或者你只要一层也可以啊:))

1第一层:<table div align="center" border="0" cellpadding="0" cellspacing="15" width="540" background="http://bbs.hnol.net/theimg/2004-6-20/18/2004620188861105.jpg">
<tr><td width="100%" align="center">
 

第二层:<table border="0" cellpadding="0" cellspacing="3" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg">
<tr><td width="100%" align="center">
 

第三层:
<table border="0" cellpadding="0" cellspacing="20" width="100%" background="
http://bbs.hnol.net/theimg/2004-6-20/18/200462018101221105.jpg">
<tr><td width="100%" align="center">
 

第四层:
<table border="0" cellpadding="0" cellspacing="2" width="100%" background="
http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg">
<tr><td width="100%" align="center">
 

第五层:
<table border="0" cellpadding="0" cellspacing="5" width="100%" background="
http://bbs.hnol.net/theimg/2004-6-20/18/200462018103131105.jpg">
<tr><td width="100%" align="center">
 

第六层:
<table border="0" cellpadding="0" cellspacing="1" width="100%" background="
http://www.xqwuyu.com/UploadFile/2004-6/200462902553461.jpg">
<tr><td width="100%" align="center">
 

第七层:
<table border="0" cellpadding="0" cellspacing="0" width="100%" background="
http://bbs.hnol.net/theimg/2004-6-20/18/200462018101221105.jpg">
<tr><td width="100%" align="center">

    大家看见了吧,除了第一层有几个格式不一样,后面几个基本一样,就是限定的数字不一样,由你自己限定,做出来看着好看就好了,这是目的:))

    注意,还有这个也是不一样的--background="http://bbs.hnol.net/theimg/2004-6-20/18/200462018101221105.jpg"*>,就是引号里面的。那个网址就是你自己想要放在自己网页里面的背景图片,你想想如果都用一种背景图片,我们干吗这么费劲地做七遍啊:))所以要选择不同的背景图片才可以显示层次感,才会丰富好看啊:)))当然,选择的时候几层要搭调,就的协调,才好看。大家看明白了吗?

    上面介绍的就是背景的制作。

    接下来,就要把自己喜欢的图片和文字加上---

    也很简单,图片的最简单格式---


<center> <IMG src=*"http://www.6to23.com/s8/s8d18/autopostimg/20031030161019.jpg" width=500 height=400>

   其中,要变化的和背景一样,就是图片的网址,和“500”、“400”。500指的是宽,你不想要那么宽,你可以设定成450、350。。。。。等。“400”指是的高,和宽的道理一样:)))

   文字,要先规定它的颜色、字体和大小,一般格式如下:

<CENTER><FONT color=green face=隶书 size=4>

    看见里面,什么是颜色,什么是字体,什么是大小了吧,这也是随你喜好调整的:)))

   在它的下面加自己的文字就好了,行和行用“<br>”就好了。

   简单吧:)))

   再下来就是放自己喜欢的音乐,常用格式如下:

<embed src="网址" autostart="true" width="330" height="83">

    可以调整的就是引号里面的“网址”--指你选择的歌的网址,播放器的大小尺寸。

    最后收尾。就是加上下面的就好了。


</DIV></TD></TR></TABLE></DIV></TD></TR></TABLE>
</DIV></TD></TR></TABLE></DIV></TD></TR></TABLE>
</DIV></TD></TR></TABLE></DIV></TD></TR></TABLE>
</DIV></TD></TR></TABLE>

有几层加几个:     </DIV></TD></TR></TABLE>

    到此,一个漂亮的网页就在你的手下做成功了,呵~~~~试试看,是不是很很简单哦:)))

   注意,在做的时候,把所有的*号,去掉,那是为了在讲的时候,发在网页上不会显现出来是真实的图片了:)))--W我已把上面的*号去掉了:)

 

===========================下面的你可以不看,看了也没坏处:))

 

<*html> 是开头标记,指明下面是HTML语言编写的。
<*head><*bgsound src="
http://www.6uc.com/ycb/jiaoshi/g-yyj/music/20.mp3" loop=3*><*/head>
是指HTML文件主题,一般音乐文件也可以插在此处。反正隐藏的音乐无论放在什么地方都可以的。
 

相关属性调整:

[align="center"] 表格的摆放位置(水平),可选值为: "left", "right", "center"

[border="0"] 表格边框的厚度,不同浏览器有不同的内定值,故请指明。

[cellpadding="0"] 文字内容与格线的距离。

[cellspacing="15"] 表格格线的厚度,数值越大,显示就越厚。

[width="540"] 表格宽度,接受绝对值(如 80)及相对值(如 80%)。

[background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553878.jpg"]表格的背景图片,(与" bgcolor "不要同用)。

在<*td>里面的[width="100%"]是指表格里面内容占整个表格的100%,[align="center"]指表格里面的内容居中.

注明:最后一层表格,<*table border="0" cellpadding="0" cellspacing="0" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553907.jpg"*><*tr><*td width="100%" align="center"*>
在<*table .......>的属性中勿须设制居中,把居中设制在<*td width="100%" align="center"*>里面。在<*td>里面的"width="100%"是指表格里面内容占整个表格的100%,*align="center"*指表格里面的内容居中,这样在这个格里的所有内容不用加居中符号它们也是居中的,省去了很多代码。
为了使整个代码帖发表后在论坛里居中所以只用在第一层表格的<*table> 里加上居中就可以了,后面多层的居中就加在<*td>里面。第一层表格中,<*table .......>里面的*align="center"*是指表格在整个页面处于居中,*width="540"* 是指整个表格的宽度。

下面是帖子内容文字的代码:

<*FONT face=隶书 color=#FFFF00 size=5*>

[face=隶书] 指字体

[color=#FFFF00] 指文字颜色

[size=4] 指文字大小,数值越大文字越大

文字中间<*br>是换行符号

 

说明:

背景层的代码如下:<*table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"*><*tr><*td>

没用背景图片也没用背景颜色,只用了边框的颜色的属性。

[bordercolorlight="#C9B976"] 表格边框向光部分的颜色

[bordercolordark="#C9B976" ]表格边框背光部分的颜色

由于在整个内容部分的表格层里的<*td width="100%" align="center"*>中设制了居中,所以这个表格中的内容都会居中,在这里的图片边框表格和图片代码中都不需要再设制居中了。图片也只用调整宽和高了。

图片的代码如下:<*img border="0" src="http://211.147.4.138/upload/00/80/54/88/805488_1076739938031.jpg" width="320" height="240"*>

注明:在每张图片层的结尾处都不要忘了收尾<*/TD><*/TR><*/TABLE>,用了几个表格来加框这里就要有几个收尾。

在主题内容的图片和文字完了之后,由于前面把整个帖子的内容加了表格的,所以这里在内容图片文字完结之后不要忘了收尾<*/td><*/tr><*/table><*/td><*/tr><*/table><*/td><*/tr><*/table>

这里用了三个<*table>就要有三个<*/table> 来结尾.这样主题内容算是完成了。后面的就加一些装饰的图,签上名字等`````再来就是帖子结尾了。最前面的我用了七层表格做为帖子背景,这里收尾也要有七个层。

<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table>

说明:看起来好像是用了四层表格,其实只用了两层,同一个背景图。主要是边框向光和背光部分的颜色应用起到的效果。

原代码如下:
<table lign="center" border="1" cellpadding="8" cellspacing="10" width="400" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg" bordercolorlight="#0C091D" bordercolordark="#C0B4FE"><tr><td width="100%" align="center">
<table lign="center" border="1" cellpadding="4" cellspacing="6" width="100%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg" bordercolorlight="#0C091D" bordercolordark="#C0B4FE"><tr><td width="100%" align="center">
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br>
</td></tr></table></td></tr></table>

说明:
这种效果其实有好几种方法做出来,但是在我认为这种是最简单的,只是金色背景那层(第二层)表格的宽是100%其它属性值一律为0。主要是在第三层,第三层的宽width的取值要是99%,而第三层的td里的width属性要是100%。

源代码如下:
<table lign="center" border="0" cellpadding="0" cellspacing="10" width="400" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215251105.jpg"><tr><td width="100%" align="center">
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="99%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br>
</td></tr></table></td></tr></table></td></tr></table>

 说明:这个好像没什么特别的,就是把四个角上的框架图用表格分开。

源代码:
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="400" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR><TD width="50%" align=left><img border="0" src="
http://bbs.hnol.net/theimg/2004-9-28/23/20049282322381105.gif"></TD><TD width="50%" align=right><img border="0" src="http://bbs.hnol.net/theimg/2004-9-28/23/20049282322681105.gif"></TD></TR></TBODY></TABLE>
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR><TD width="50%" align=left><img border="0" src="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823221011105.gif"></TD><TD width="50%" align=right><img border="0" src="http://bbs.hnol.net/theimg/2004-9-28/23/200492823221331105.gif"></TD></TR></TBODY></TABLE></td></tr></table>

 说明:
把图片应用到边框上面,整个表格的大小很重要,调整也是件麻烦的事,所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。

源代码:

<table lign="center" border="1" cellpadding="0" cellspacing="10" width="400" background="http://bbs.hnol.net/theimg/2004-9-28/23/200492823215501105.jpg" bordercolorlight="#C0B4FE" bordercolordark="#0C091D"><tr><td width="100%" align="center">
<table lign="center" border="1" cellpadding="0" cellspacing="18" width="100%" background="
http://img.hnol.net/img/2004-09-29/1/200492912701105.gif" bordercolor="#C0B4FE"><tr><td width="100%" align="center">
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br></td></tr></table></td></tr></table></td></tr></table>

") 说明:
把图片应用到边框上面,整个表格的大小很重要,调整也是件麻烦的事,所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。

源代码:

<table lign="center" border="1" cellpadding="0" cellspacing="10" width="400" background="http://bbs.hnol.net/theimg/2004-9-28/23/200492823215501105.jpg" bordercolorlight="#C0B4FE" bordercolordark="#0C091D"><tr><td width="100%" align="center">
<table lign="center" border="1" cellpadding="0" cellspacing="18" width="100%" background="
http://img.hnol.net/img/2004-09-29/1/200492912701105.gif" bordercolor="#C0B4FE"><tr><td width="100%" align="center">
<table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background="
http://bbs.hnol.net/theimg/2004-9-28/23/200492823215801105.jpg"><tr><td width="100%" align="center">
<br>
<img border="0" src="
http://bbs.shidabbs.com/bbs/UploadFile/2004-9/200491343855762.gif"><br>
<br></td></tr></table></td></tr></table></td></tr></table>

 最后把表格的相关属性再全都说明一下。

<TABLE> 的参数设定(常用):

<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF"><tr><td>


</td></tr></table>


width="400"
表格宽度,接受绝对值(如 80)及相对值(如 80%)。

 

border="1"
表格边框的厚度,不同浏览器有不同的内定值,故请指明。

 

cellspacing="2"
表格格线的厚度

 

cellpadding="2" 表格格线与内容的间隔。

 

align="CENTER"
表格的摆放位置(水平),可选值为: left, right, center

 

valign="TOP".
表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。   

 

background="myweb.gif"
表格的背景图片,与 bgcolor 不要同用。

 

bgcolor="#0000FF"
表格的底色,与 background 不要同用

 

bordercolor="#CF0000"
表格边框颜色

 

bordercolorlight="#00FF00"
表格边框向光部分的颜色

 

bordercolordark="#00FFFF"
 
 
表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
width="400"
表格宽度,接受绝对值(如 80)及相对值(如 80%)。

 

border="1"
表格边框的厚度,不同浏览器有不同的内定值,故请指明。

 

cellspacing="2"
表格格线的厚度

 

cellpadding="2" 表格格线与内容的间隔。

 

align="CENTER"
表格的摆放位置(水平),可选值为: left, right, center

 

valign="TOP".
表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。   

 

background="myweb.gif"
表格的背景图片,与 bgcolor 不要同用。

 

bgcolor="#0000FF"
表格的底色,与 background 不要同用

 

bordercolor="#CF0000"
表格边框颜色

 

bordercolorlight="#00FF00"
表格边框向光部分的颜色

 

bordercolordark="#00FFFF"
 
 
表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

  评论这张
 
阅读(90)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017