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

jinlch的博客

向各位博友学习

 
 
 

日志

 
 

教你不用图片地址做边框的简单方法  

2010-08-15 14:27:00|  分类: 空间交流 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

                               不用图片地址做边框的方法?

                         一、不引用图片地址做边框的代码:

首先看一下效果图,如下:

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,

在这里还可以放一个或多个动画代码(做多层透明flash动画)。

代码如下:

<TABLE style="BORDER-RIGHT: #FF0000 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #0000ff 10px ridge; BORDER-BOTTOM: #CC00ff 10px ridge; BACKGROUND-COLOR: #0099ff" cellSpacing=0>
<TBODY>
<TR>
<TD>

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

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

 

说明:

<1>: (、右边框的取色)红色代码是右边框;绿色代码是上边框;深蓝色代码是左边框;桃红色代码是下边框;

<2>:蓝色代码是边框内面背景颜色;黄色代码cellSpacing=0是限制内边框与外边框距离的,“0”表示没有距离.(可根据需要,适当修改其数据)

<3>:边框颜色的取色,要根据你的需要而选取不同的颜色.找到代码中的 # 号后面的000000便是颜色代码,'色代码.颜色的选用,请叁见:《颜色代码大全》一文.(点击下列表格中的文章)

《颜色代码大全》

    
<4>:要想使四面边框颜色统一,只需将 # 号后面的'000000'全部变为同一颜色代码即可.10px是表示外边框的宽度,数值同样可以适当修改.

<5>:这段代码中没有内边框代码,所以称之为:一层边框或单层背景边框.

二、多层边框的制作方法:(二层边框)

上面讲的是一层即单层边框的制作方法.那么该怎样给单层边框加多层内边框呢?

先看下面代码:(二层边框)

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge;

BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge;

BACKGROUND-COLOR: #ff0000" cellSpacing=0>
<TBODY>
<TR>
<TD>

<TABLE border=1>
<TBODY>
 <TR>
 <TD>

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

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

说明:

 <1>:黑色处为单层边框代码. 绿色处为多层边框开头的必加代码,把它放在单层代码后面;

 <2>:兰色处即为内层边框,其中 border=1表示内边框的粗、细,可在1-6之间选择.数值过大,边框就会显得过粗而影响美观;cellSpacing=0表示内外边框间的距离;

<3>:此代码为二层边框代码,看它的效果图如下:

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的

代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

<4>:如将上面代码中的border=1、cellSpacing=0数值修改为;border=4、cellSpacing=6后,看到的效果图如下:

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片

的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

<5>:如果想做三、四或多层边框,只需采用复制粘贴上面代码中码兰色处即可.现在我以四层边框为例:

  看代码:

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge;

BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge;

BACKGROUND-COLOR: #ff0000" cellSpacing=0>
<TBODY>
<TR>
<TD>

<TABLE cellSpacing=0 border=1>
<TBODY>
 <TR>
 <TD>

<TABLE cellSpacing=0 border=1>
<TBODY>
 <TR>
 <TD>

<TABLE cellSpacing=0 border=1>
<TBODY>
 <TR>
 <TD>

<TABLE cellSpacing=0 border=1>
<TBODY>
 <TR>
 <TD>

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

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

说明:cellSpacing=0和上面同样表示内边框与内边之间的距离 border=1表示里层各边框的粗、细度.

 看它的效果图如不:(该效果图中的cellSpacing=0、border=1数据本人己作了修改)

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片

的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

 

 以上就是不用图片地址,来做简易边框的方法.

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

历史上的今天

评论

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

页脚

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