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

壳子的博客

学无止境

 
 
 

日志

 
 

【精】如何运用代码做边框  

2010-06-28 20:11:18|  分类: 音画边框制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自杜芊芊《如何运用代码做边框》

 

引用

杜芊芊如何运用代码做边框


 

博客留言 交换链接 本站资源 电子邮件 QQ互动

原 始 代 码

    <TABLE style="BORDER-RIGHT: #0000ff 7pt double; BORDER-TOP: #0000ff 7pt double; BORDER-LEFT: #0000ff     7pt double; BORDER-BOTTOM: #0000ff 7pt double" width="80%" align=center>

       <TBODY>
       <TR>
       <TD bgColor=#ffffff>填写内容</TD></TR></TBODY></TABLE>


 代码解析:

1、BORDER-RIGHT:表示该边框的右边框线;LEFT表示左边框线;TOP、BOTTOM表示上、下边框线;width:宽。bgColor:背景颜色

2、#0000ff 表示该边框线的颜色,有关颜色的选取请参照〓博客颜色代码表〓

3、7pt表示该边框线的粗细度,可根据需要改变其数值;

4、上述代码中的红色部分double表示该边框为单线边框、double为双线边框、outset表示为凸出型边框、inset为凹槽型边框、dashed为虚线型边框等      

5、align=center  表示该边框在日志中居正中位置,   需要说明的是:日志页面的总宽度一在720至800之间.只有宽度值小于700以下时,边框才会出现居左、居右或居中的现象; align=left  居左 align=right 居右

6、如果去除上述代码中的最后一行中的bgColor=#ffffff

代码, 最终该边框内部的颜色显示为你日志页面
的颜色.如果你想在该边框内添加一种背景颜色,只要在粉红处改变颜色代码即可. 例:#ffffff表示内框背景为白色,现在需要黑色作为背景颜色只要改为#00000即可.

改变上述代码中的部分代码及数值后,就可以获得各种颜色形状不同的边框.

1、单线型边框样式与代码:

<TABLE style="BORDER-RIGHT: #0000ff 4pt solid; BORDER-TOP: #0000ff 4pt solid; BORDER-LEFT: #0000ff 4pt solid; BORDER-BOTTOM: #0000ff 4pt solid" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#999999>填写内容</TD></TR></TBODY></TABLE>


2、双线型边框样式与代码:

<TABLE style="BORDER-RIGHT: #00ff00 7pt double; BORDER-TOP: #00ff00 7pt double; BORDER-LEFT: #00ff00 7pt double; BORDER-BOTTOM: #00ff00 7pt double" width="99%">
<TBODY>
<TR>
<TD bgColor=#ffffff>填写内容</TD></TR></TBODY></TABLE>


3、凸出型边框样式与代码:

<TABLE style="BORDER-RIGHT: #999999 11pt outset; BORDER-TOP: #999999  11pt outset; BORDER-LEFT: #999999  11pt outset; BORDER-BOTTOM: #999999  11pt outset"width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#111111>填写内容</TD></TR></TBODY></TABLE>


4、凹陷型边框样式与代码:

<TABLE style="BORDER-RIGHT: #880000 11pt inset; BORDER-TOP: #880000 11pt inset; BORDER-LEFT: #880000 11pt inset; BORDER-BOTTOM: #880000 11pt inset" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#000000>填写内容</TD></TR></TBODY></TABLE>


5、虚线型边框样式与代码:

<TABLE style="BORDER-RIGHT: #cc33ff 3pt dashed; BORDER-TOP: #cc33ff 3pt dashed; BORDER-LEFT: #cc33ff 3pt dashed; BORDER-BOTTOM: #cc33ff 3pt dashed" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#99ff00>填写内容</TD></TR></TBODY></TABLE>


6、脊状立体边框样式与代码:

<TABLE style="BORDER-RIGHT: #00ff00 14pt ridge; BORDER-TOP: #00ff00 14pt ridge; BORDER-LEFT: #00ff00 14pt ridge; BORDER-BOTTOM: #00ff00 14pt ridge" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#ccffcc>填写内容</TD></TR></TBODY></TABLE>


7、粒状阴影框样式与代码:

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66, 
strength=20" height=55 cellSpacing=6 cellPadding=0 width="99%" border=1>
<TBODY>
<TR>
<TD bgColor=ccff11>填写内容</TD></TR></TBODY></TABLE>


8、立体阴影框样式与代码:

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,
direction:145,  strength:15)" height=55 cellSpacing=6 width="99%" border=1>
<TBODY>
<TR>
<TD bgColor=#eeeeee>填写内容</TD></TR></TBODY></TABLE>


9、邮票型边框样式与代码:

<TABLE style="BORDER-RIGHT: #ccFF66 5px dashed; BORDER-TOP: #ccFF66 5px dashed; BORDER-LEFT: #ccFF66 5px dashed; WIDTH: 720px; BORDER-BOTTOM: #ccFF66 5px dashed; HEIGHT: 50px" cellSpacing=8 bgColor=#ccFF66>
<TBODY>
<TR bgColor=#00ccff >
<TD>填写内容</TD></TR></TBODY></TABLE>


10, 凹状双内虚线框样式与代码:

<TABLE borderColor=#00cc00 cellSpacing=2  cellSpacing=1 width=720 align=center  border=10>
<TBODY>
<TR>
<TD style="border:3 dashed #00cc00">填写内容</TD></TR></TBODY></TABLE>


11, 点状虚线框样式与代码:

<TABLE style="BORDER-RIGHT: #ccFF66 8px dotted; BORDER-TOP: #ccFF66 8px dotted; BORDER-LEFT: #ccFF66 8px dotted; BORDER-BOTTOM: #ccFF66 8px dotted; WIDTH: 720px;  HEIGHT: 50px" cellSpacing=5 bgColor=#ccff66>
<TBODY>
<TR bgColor=#111111>
<TD>填写内容</TD></TR></TBODY></TABLE>


12, 点状内虚线框样式与代码:

<TABLE borderColor=#00cc00 cellSpacing=2 width=720 align=center border=10>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #00cc00 3px dotted; BORDER-TOP: #00cc00 3px dotted; BORDER-LEFT: #00cc00 3px dotted; BORDER-BOTTOM: #00cc00 3px dotted">填写内容</TD></TR></TBODY></TABLE>





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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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