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

听雪斋

博客灯下书痴话,砚池边上度春秋。淡看人间百态图,轻描素宣千姿秀。

 
 
 

日志

 
 

【转载】如何制作边框  

2014-06-26 09:11:52|  分类: 博客装扮知识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自闲散人也《如何制作边框》

 

如何制作边框

代码:

<TABLE(表格符号) background="背景地址" borderColor=# (框边的颜色) cellSpacing= (框边间距离) cellPadding= (单元格高度) width= (宽度) height= (高度) bgColor=# (背景颜色) align=center(居中) border= (框边宽度) >

<TBODY>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR></TBODY></TABLE>

以上代码确切地说是表格代码,把括号内文字改成数字或去掉,变成以下代码形式:

<TABLE background="背景地址" borderColor=#800000 cellSpacing=2 cellPadding=0 width=500 height=0 bgColor=#555555 align=center border=2>

<TBODY>
<TR>
<TD>
填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容</TD></TR>
<TR>
<TD>填入内容</TD>
<TD>填入内容</TD>
<TD>填入内容
</TD></TR></TBODY></TABLE>

得到的表格效果:

填入内容 填入内容 填入内容
填入内容 填入内容 填入内容
填入内容 填入内容 填入内容

 

如果把上述代码中的红色部分去掉,就得到简化后的边框代码:

<TABLE background="背景地址" borderColor=#800000 cellSpacing=2 cellPadding=0 width=500 height=0 bgColor=#555555 align=center border=2>

<TBODY>
<TR>
<TD>
填入内容
</TD></TR></TBODY></TABLE>

这个代码得到的图案效果就是一个最简单的单边边框:

填入内容

 

在框内粉色填入内容处可写文字日志,也可贴图或flash。如果将以上代码复制粘贴覆盖住填入内容,就会得到双层或多层边框。

多层边框代码:

<TABLE background="背景地址" borderColor=#800000 cellSpacing=2 cellPadding=0 width=500 height=0 bgColor=#555555 align=center border=2>

<TBODY>
<TR>
<TD>

 <TABLE background="背景地址" borderColor=#800000 cellSpacing=2 cellPadding=0 width=500 height=0 bgColor=#555555 align=center border=2>

<TBODY>
<TR>
<TD>

<TABLE background="背景地址" borderColor=#800000 cellSpacing=2 cellPadding=0 width=500 height=0 bgColor=#555555 align=center border=2>

<TBODY>
<TR>
<TD>

<TABLE background="背景地址" borderColor=#800000 cellSpacing=2 cellPadding=0 width=500 height=0 bgColor=#555555 align=center border=2>

<TBODY>
<TR>
<TD>
填入内容</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

边框效果:

填入内容

 

调整各层边框内的 borderColor=#(边框颜色)、cellSpacing=(边框间距)、bgColor=#(背景颜色)、 border=(边框宽度),就可得到颜色变化的边框。

如最外层borderColor=#ffcbb3、cellSpacing=1、bgColor=#000000、border=7

次外层borderColor=#ff8f59、cellSpacing=1、bgColor=#000000、border=6

第三层borderColor=#fd94600、cellSpacing=1、bgColor=#000000、border=5

最内层borderColor=#642100、cellSpacing=4、bgColor=#888888、border=4

所得到的边框效果如下:

填入内容

 

做更多层的边框,用以上方法以此类推。

关于边框的 cellPadding= (单元格高度) height= (高度)  width= (宽度) 三个尺寸问题,高度均设为0,通过日志的内容自然找齐。最内层边框根据实际设宽度值,其他层的宽度均设为0。

下面的边框,完全是用颜色代码制作的:

君不见黄河之水天上来
奔流到海不复回
君不见高堂明镜悲白发
朝如青丝暮成雪
人生得意须尽欢
莫使金樽空对月
天生我材必有用
千金散尽还复来
烹羊宰牛且为乐
会须一饮三百杯
岑夫子 丹丘生
将进酒 杯莫停
与君歌一曲
请君为我倾耳听
钟鼓馔玉不足贵
但愿长醉不愿醒
古来圣贤皆寂寞
惟有饮者留其名
陈王昔时宴平乐
斗酒十千恣欢虐
主人何为言少钱
尽须沽酒对君酌
五花马 千金裘
呼儿将出换美酒
与尔同销万古愁

 

 

以上只是利用颜色代码和调整各个参数做的边框。如要做带有花色图案的边框,则需选好背景图片,将每层的图片地址置入该层的 background="背景地址" 中,但同时要适当加大该层中的cellSpacing= (框边间距离),图案方能显示清楚、美观。一般做这样的边框需用多个边框代码套用,多则十几个。

请看以下边框效果:

之一:

 

 

2011年07月06日 - 闲散人也 - .

 

 

之二:

 

2011年07月06日 - 闲散人也 - .

 

之三:

 

2011年07月06日 - 闲散人也 - .

 

本想把以上边框效果图的代码贴到此处,但代码贴上后,字符数远超过65500,边框效果图就全没了。如有索取代吗的朋友,请点击 博客边框,引用后即可得到代码。


欢迎语素材 - 闲散人也 - .

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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