当前位置:首页 >> 实用素材 >> 套装素材 >> 柿子红了 6层边框代码
    
  双击自动滚屏  
柿子红了 6层边框代码

发表日期:2019年12月19日  出处:原创  作者:老可人  本页面已被访问 1788 次















 

 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 等等均可以弃之不用。

特别注意:各层边框的嵌套顺序

一个实例

  1. <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">
  2. <tr>
  3. <td>
  4. <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">
  5. <tr><td width="100%">
  6. <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">
  7. <tr><td valign="center">
  8. <table style="border-collapse:separate;" class="ke-zeroborder" border="0" cellspacing="10" bordercolor="#00fbfb" cellpadding="0" width="100%" bgcolor="#000000">
  9. <tr><td valign="center">
  10. <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">
  11. <tr><td valign="center">
  12. <table style="border-collapse:separate;" class="ke-zeroborder" border="0" cellspacing="10" bordercolor="#00fbfb" cellpadding="0" width="100%" bgcolor="#000000">
  13. <tr><td valign="center">
  14. <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">
  15. <tr>
  16. <td height='600'></td>
  17. </tr>
  18. </table>
  19. </td></tr></table>
  20. </td></tr></table>
  21. </td></tr></table>
  22. </td></tr></table>
  23. </td></tr></table>
  24. </td></tr></table>
复制代码
注意, 每个table 标签都加了个 border-collapse:separate; 样式参数。


 


 
 
 
 
 
 
 

 



  双击自动滚屏  
  相关评论:    

发表人:浮云
发表人邮件:fy@qq.com发表时间:2019-12-19 19:15:00
6层边框的代码,可以方便我们自己编制新的边框,——这只要用新的图片地址换掉原来代码中的地址,就可以了,……
发表人:浮云
发表人邮件:fy@qq.com发表时间:2019-12-19 19:12:00
九头牛老师,欢迎您来这里注册,这里会因为您诸位的到来,而促进心缘的重新振兴!我以这里的老会员的身份向大家表示感谢了!
发表人:九头牛
发表人邮件:2498832759@qq.com发表时间:2019-12-19 14:01:00
能够在这里看到老师的音画作品,非常高兴。

  发表评论:    

用 户 名:
电子邮件:
评论内容:
(最多评论字数:500)

心缘之梦 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 |

联系人:“心缘之梦”微信群yueyuanzhongqiu20080815