6层边框模板 作者:也曾年轻
<table style="width:960px;background:url(http://yinling.com.cn/data/attachment/forum/201712/26/113844d61i89442118i18j.jpg);"> < tr><td style="padding:16px;text-align:center;"> <!-- 第1层边框 -->
<table style="width:100%;background:url(http://yinling.com.cn/data/attachment/forum/201712/26/113849kd3cdguulxhfwong.gif);"> < tr><td style="padding:8px;text-align:center;"> <!-- 第2层边框 -->
<table style="width:100%;background:url(http://yinling.com.cn/data/attachment/forum/201712/26/113932a1xlhm6xhz1b1jah.gif);"> < tr><td style="padding:40px;text-align:center;"> <!-- 第3层边框 -->
<table style="width:100%;background:url(http://yinling.com.cn/data/attachment/forum/201712/26/113849kd3cdguulxhfwong.gif);"> < tr><td style="padding:4px;text-align:center;"> <!-- 第4层边框 -->
<table style="width:100%;background:url(http://yinling.com.cn/data/attachment/forum/201712/26/114041b00t20epe7d2y6et.gif);"> < tr><td style="padding:24px;text-align:center;"> <!-- 第5层边框 -->
<table style="width:100%;background:url(http://yinling.com.cn/data/attachment/forum/201712/26/113849kd3cdguulxhfwong.gif);"> < tr><td style="padding:4px;text-align:center;"> <!-- 第6层边框 -->
<table style="width:100%;background:url(http://yinling.com.cn/data/attachment/forum/201712/25/185030l1431m4hhi8hi44z.jpg);"> < tr><td style="padding:24px;text-align:center;"> <!-- 内层背景图 -->
图片、文字、动画、影像等放在这里
< /td></tr></table> <!-- 内层背景结束 --> < /td></tr></table> <!-- 第6层边框结束 --> < /td></tr></table> <!-- 第5层边框结束 --> < /td></tr></table> <!-- 第4层边框结束 --> < /td></tr></table> <!-- 第3层边框结束 --> < /td></tr></table> <!-- 第2层边框结束 --> < /td></tr></table> <!-- 第1层边框结束 --> ----------------------------------------------------------------------------- 层数可以根据各人需要增删; 每层只需要4个参数即足够: 宽度: width, 最外层给一个确定的数值,内部各层一律为 width:100% 背景用到的图片: background:url(图片地址) 框的宽度:padding: 给定个宽度数值 px; 框内元素对齐方式:text-align:center; (left, center, right) 其它诸如 border 、 cellspacing、cellpadding、bgcolor、width、align 等等均可以弃之不用。
特别注意:各层边框的嵌套顺序
一个实例
- <table style="border-collapse:separate;" border="1" cellspacing="10" bordercolor="#00fbfb" cellpadding="0" width="800" background="http://img1.oldkids.cn/upload/21000/u18208/2011/08/29/tblog_20110829181117715243.jpg" align="center">
- <tr>
- <td>
-
- <table style="border-collapse:separate;" border="1" cellspacing="5" bordercolor="#00fbfb" bordercolorlight="#00fbfb" bordercolordark="#000000" cellpadding="0" width="100%" background="http://img4.oldkids.cn/upload/21000/u18208/2011/08/29/blog_20110829174509478946.gif" bgcolor="#288a6">
- <tr><td width="100%">
-
- <table style="border-collapse:separate;" border="2" cellspacing="4" bordercolor="#00fbfb" cellpadding="0" width="100%" background="http://img2.oldkids.cn/upload/21000/u18208/2011/08/31/tblog_20110831152634278407.jpg" align="center">
- <tr><td valign="center">
-
- <table style="border-collapse:separate;" class="ke-zeroborder" border="0" cellspacing="10" bordercolor="#00fbfb" cellpadding="0" width="100%" bgcolor="#000000">
- <tr><td valign="center">
-
- <table style="border-collapse:separate;" border="1" cellspacing="6" bordercolor="#00fbfb" cellpadding="0" width="100%" background="http://img2.oldkids.cn/upload/21000/u18208/2011/08/31/tblog_20110831152634278407.jpg" align="center">
- <tr><td valign="center">
-
- <table style="border-collapse:separate;" class="ke-zeroborder" border="0" cellspacing="10" bordercolor="#00fbfb" cellpadding="0" width="100%" bgcolor="#000000">
- <tr><td valign="center">
-
- <table style="border-collapse:separate; border-bottom: rgb(180,180,180) 2px double; border-left: rgb(180,180,180) 2px double; BORDER-TOP: rgb(180,180,180) 2px double; BORDER-RIGHT: rgb(180,180,180) 2px double;" width='100%' bgColor=#0000cd align=center alt="ygqt">
- <tr>
- <td height='600'></td>
- </tr>
- </table>
-
- </td></tr></table>
- </td></tr></table>
- </td></tr></table>
- </td></tr></table>
- </td></tr></table>
- </td></tr></table>
复制代码 注意, 每个table 标签都加了个 border-collapse:separate; 样式参数。 |
|