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

语辰的博客

学习的园地生活的乐园

 
 
 

日志

 
 

【转载】学做博客的精美边框  

2014-06-25 20:33:49|  分类: 博客学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自箫墨诗剑《学做博客的精美边框》

音画的第一步是做边框:

一、将边框代码复制粘贴第一次,在图片地址处粘贴纯色图片地址,将整个边框的宽度(width)设为700,看看效果怎样;

(单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
          单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离)

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=700>

看看效果:

二、依然将开始那段边框代码复制粘贴第二次,在图片地址处粘贴纯色图片地址,将整个边框的宽度(width)设为680,将cellSpacing的值设为10,看看效果怎样;

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=680 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=680>第二次看效果:

三、依然将开始那段边框代码复制粘贴第三次,在图片地址处粘贴纯色图片地址,将整个边框的宽度(width)设为660,将cellSpacing的值设为10,看看效果怎样;

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=680 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=680>

<TABLE cellSpacing=10 cellPadding=0 width=660 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=660>

第三次看看效果:

四、依然将开始那段边框代码复制粘贴第四次,在图片地址处粘贴纯色图片地址,将整个边框的宽度(width)设为640,将cellSpacing的值设为10,看看效果怎样;

<TABLE cellSpacing=15 cellPadding=0 width=700 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=700>

<TABLE cellSpacing=10 cellPadding=0 width=680 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=680>

<TABLE cellSpacing=10 cellPadding=0 width=660 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=660>

<TABLE cellSpacing=10 cellPadding=0 width=640 background=底层边框图片地址(纯色图片) border=0>

<TBODY>

<TR>

<TD width=640>

第四次看看效果:

小结:

    1、说白了,做音画的边框,实际上就是做表格框.由不同颜色的表格框层叠起来,四周没有被遮盖的部分就形成了边框;

    2、做几层边框你就把开始的那段边框代码复制粘贴几次,修改一下宽度,粘贴不同颜色的图片地址就行了;

    3、现在看来这个四层的边框很小,但只要一把内容放进去,它就会扩大了。内容放得越多,边框就会自动撑得越大。

 

 

 

 在此输入内容

 
 

上图的示范代码
<DIV align=center>
<TABLE style="WIDTH: 700px; TOP: 0px; LEFT: -128px" title=香儿编辑 border=0 cellSpacing=20 width=700 background=http://img1.ph.126.net/r6AZ9A61Sm9r_rViR7D6Ag==/1386264260300434021.jpg#; align=center>
<TBODY>
<TR>
<TD>
<DIV align=center>
<CENTER>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="95%">
<TBODY>
<TR>
<TD>
<DIV align=center>
<CENTER>
<TABLE border=1 cellSpacing=3 borderColorLight=#87695b borderColorDark=#3c302a cellPadding=0 width="100%" background=http://img9.ph.126.net/ToKGOZR-2ZSOYV92Tq-B1w==/1806224925553878229.jpg#; bgColor=#4a3b34>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE border=1 cellSpacing=12 borderColorLight=#87695b borderColorDark=#3c302a cellPadding=0 width="100%" background=http://img7.ph.126.net/aJcE_xjSXMmmYZn76vqfBg==/1386264260300434017.jpg#; bgColor=#4a3b34>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" background=http://img9.ph.126.net/ToKGOZR-2ZSOYV92Tq-B1w==/1806224925553878229.jpg#; bgColor=#4a3b34>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE border=0 cellSpacing=8 cellPadding=0 width="100%" background=http://img1.ph.126.net/r6AZ9A61Sm9r_rViR7D6Ag==/1386264260300434021.jpg#; bgColor=#4a3b34>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE border=1 cellSpacing=0 borderColorLight=#87695b borderColorDark=#3c302a cellPadding=0 width="100%" background=http://img7.ph.126.net/aJcE_xjSXMmmYZn76vqfBg==/1386264260300434017.jpg#; bgColor=#4a3b34>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE border=1 cellSpacing=0 borderColorLight=#87695b borderColorDark=#3c302a cellPadding=0 width="100%" background=http://img9.ph.126.net/ToKGOZR-2ZSOYV92Tq-B1w==/1806224925553878229.jpg#; bgColor=#4a3b34>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE border=1 cellSpacing=0 borderColorLight=#87695b borderColorDark=#3c302a cellPadding=0 width="99%" background=http://img2.ph.126.net/yZH4-bWeZ-S5VVPIhQ-wJA==/1117737132518458212.jpg#; bgColor=#4a3b34>
<TBODY>
<TR>
<TD width="100%">
<CENTER>
<P style="TEXT-ALIGN: left; TEXT-INDENT: 21pt; MARGIN: 0cm 0cm 0pt; mso-char-indent-count: 2.0" align=left><SPAN style="FONT-FAMILY: 宋体; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 宋体; mso-fareast-theme-font: minor-fareast; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin"></SPAN><FONT size=5><STRONG>&nbsp;在此输入内容</STRONG></FONT></P></CENTER></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></CENTER></DIV></TD></TR></TBODY></TABLE></CENTER></DIV></TD></TR></TBODY></TABLE></DIV>


  评论这张
 
阅读(23)| 评论(6)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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