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

一花一世界一叶一菩提……

菩提本无树,明镜亦非台,本来无一物,何处惹尘埃

 
 
 

日志

 
 
关于我

个性随风 年龄不老 性别如图 职业瞎干 职务羔管 学历不死 爱好苦思 行事善缘

网易考拉推荐

【转载】怎样制作边框 2011年11月02日  

2013-01-04 10:59:44|  分类: 日记制作技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 

怎样制作边框

2011年11月02日 - 杨东 - 杨东小园

  

制作边框的第一步

一、以下是一层边框的代码,将边框代码复制粘贴第一次,在图片地址处粘贴图片地址,将边框的宽度(width)设定为750,(注:边框的宽度能大能小,只要在第一层用数值来控制之外,从第二层开始只要用width="100%"来确定.)看看效果怎样;

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width=750 align=center bgColor=#ffffff background=在此添加第一层图片地址 border=0>
<TBODY>
<TR>
<TD>

纯红色图片实样怎样制作边框 2011年10月15日 - 杨东 - 杨东小园这张原图片的宽100高为100

纯红色图片地址:http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg

代入图片后的代码

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>

代入闪动图片后的效果如下

代入纯红色图片后的效果


二、在第一层纯红色图片的基础上,依然将开始那段边框代码复制粘贴第二次,第二次用纯绿色图片,地址处粘贴代码中,将整个边框的宽度(width)在第一层700的基础上设为width="100%",将cellSpacing的值设为10,

插入的纯绿色图片实样怎样制作边框 2011年10月15日 - 杨东 - 杨东小园这张原图片的宽为60高为60

纯绿色图片地http://img154.ph.126.net/AYYRuGi9QEwHDfQcC_0idw==/2265029137592186421.jpg

代入图片地址后的代码如下;

<TABLE borderColor=#cccccc cellSpacing=5 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=5 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img154.ph.126.net/AYYRuGi9QEwHDfQcC_0idw==/2265029137592186421.jpg border=0>
<TBODY>
<TR>
<TD>

 

第二次看效果:

加了第二层图片后的效果

 

三、为了能让朋友们充分理解,现在依然将第一层的代码复制后,粘贴到第二层的下边作为第三层处理,将整个边框的宽度(width)在第一层700的基础上,第三层的宽度也要设定为width="100%",将cellSpacing的值设为10,修改后新组成的代码如下;

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img154.ph.126.net/AYYRuGi9QEwHDfQcC_0idw==/2265029137592186421.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>

第三次看看效果:

加了第三层图片后的效果


 

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

第四张图片作为写日志用的背景底版面图片,故而就用淡色的怎样制作边框 2011年10月15日 - 杨东 - 杨东小园此图片的宽为60高为26.

图片地址 http://img.bimg.126.net/photo/UGR4La40Nb_kLkNgtUeGdQ==/3113394717397305237.jpg

第四次代码

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img154.ph.126.net/AYYRuGi9QEwHDfQcC_0idw==/2265029137592186421.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img845.ph.126.net/QxYSvxKjBQhBlxWgKgARDQ==/901282875427621466.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=
http://img.bimg.126.net/photo/UGR4La40Nb_kLkNgtUeGdQ==/3113394717397305237.jpg border=0>
<TBODY>
<TR>
<TD>

第四次效果

加了第四层背景图片后的效果


小 结

1、从以上实验来看,写日志采用做任何边框,实际上就是做表格框的代码.由不同颜色的表格框加分层次叠加而成,四周没有被遮盖的部分就形成了边界;2、做几层边框你就把同一个边框代码复制粘贴几次,修改一下宽度,粘贴不同颜色的图片地址就行了; 3、从以上可见,边框只限宽度,高度没有特别的控制,这原因是只要你把日志内容写进去,高度就会无限的增长,是看来这个四层的边框很小,但只要一把内容放进去,它就会扩大了。内容放得越多,边框就会自动撑得越大。

总结以上解析,现在我们用一组由六个层面的实用代码制作一个框架。


 

由六个层面组建的实样


以上由六个层面组建的模型代码如下

<P align=center>
<TABLE title="" borderColor=#cccccc cellSpacing=5 cellPadding=0 width=750 align=center bgColor=#ffffff background=http://img319.ph.126.net/x3jVDN0HOzMUsjLud15skg==/3825807883451405866.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=26 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img.ph.126.net/5-JvzuYXK19f2B9UpGGVZA==/3224295858221899188.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=5 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img319.ph.126.net/x3jVDN0HOzMUsjLud15skg==/3825807883451405866.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img.ph.126.net/Kw0exm1Cu71ypvjVSy9Bdw==/2783224569731803869.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img764.ph.126.net/jQoAU6c1xw-IflOTfVeH5w==/2979131153506663753.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=25 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img306.ph.126.net/fWDr2KwAQ1RP8bh2hRMpEA==/3869999454795603069.jpg border=0>
<TBODY>
<TR>
<TD align=middle>
<P align=center><FONT color=#000000>&nbsp;</FONT></P>
<DIV style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 40%; FONT-FAMILY: 华文彩云" FONT scrollAmount="8">
<P align=center><FONT face=黑体><B>由六个层面组建的实样</B></FONT></P></DIV><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
<P></P><BR></TBODY></TABLE></P>

简 要 说 明

单从这组代码看,第一层的宽度width=750 这是最外层的边缘宽度, 然而这个单元格距离cellSpacing=5 是指第一层面最外边的显现部份为5,是一条很细的外边,然后第二层的cellSpacing=26这是一个能转动的图片,这图片自身的宽度为26,为了能让这个动态图片充分发挥作用所以设定为26,第三层是同第一层同样的图片,也设定为cellSpacing=5 第四层是一张闪光图,这张图片是杨东小园自制的,原图宽34,没有全部利用,,第五层是一根动态直条,第六层是写博的底版层面.cellSpacing=20这是为了在写入日志文字时,促使所写入的文字左右二边不顶足边缘所设定的空隙距离.

可见以上这六个层面中每个层面都是用的同一个框图代码,但是不同之处是每个层面用的图片有所不同也有相同的,层次的距离数值有所不同也有相同的,另外相同之处是除了第一层面的宽长限止为750以外,其他的五个层面都用"100%" 来规范,这是因为从第二层到第六层,是在第一层面的基础上确定的,不需要求再用量化来处理的结果.

怎样制作边框 2011年11月02日 - 杨东 - 杨东小园

  

编后申明

  本作品制作虽拙劣粗糙,但从构思创意、精心编著都纯属原创.目的是为了与爱好博客写作的朋友们学习探索,如若此作品,有错误之处,恳请朋友们在以下评论栏中提出赐教指正意见,或良好的改进建议.杨东为此不胜铭感,特此申明,深表谢意.

 

怎样制作边框 2011年11月02日 - 杨东 - 杨东小园

怎样制作边框 2011年11月02日 - 杨东 - 杨东小园

养生宝典 四季养生 民间土方 中华名画长卷 历代国画 怀旧电影 电视剧场
博客建议 博客技巧 博客代码 杨东小园博客动态欢迎 博客素材 -音乐网址 - . 名人博客
 简作音画. FLASH视频教程 PS视频教程 U5实例制作视频教程 3D文字制作视频教程 各类图片 - .
颜色代码 .  在线制作工具. 杨东热烈欢迎各位贵宾莅临小园赐教指导,祝愿诸君健康快乐 幸福永远!  在线视频教程- . 复制代码处- .
生活知识 美图美景 各种边框 新解红学 各种书架 词文朗诵 学博园地
音画欣赏 孙子兵法 娱乐游戏 经典音乐 红楼画集 历史回顾 杨东小园

 

2011年11月02日 - 杨东 - 杨东小园2011年11月02日 - 杨东 - 杨东小园2011年11月02日 - 杨东 - 杨东小园

2011年11月02日 - 杨东 - 杨东小园

2011年11月02日 - 杨东 - 杨东小园

2011年11月02日 - 杨东 - 杨东小园

2011年11月02日 - 杨东 - 杨东小园

2011年11月02日 - 杨东 - 杨东小园

 

 

 

 

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

历史上的今天

评论

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

页脚

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