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

幸福人生

梦的起航,幸福的天地

 
 
 

日志

 
 

文字图片加边框代码  

2015-07-11 08:37:18|  分类: 博客素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#28eb3c height=100 width="100%" border=1>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>

1、

1、单线型边框效果代码:
<TABLE style="BORDER-BOTTOM: #0000ff 4pt solid; POSITION: relative; BORDER-LEFT: #0000ff 4pt solid; WIDTH: 550px; HEIGHT: 0px; BORDER-TOP: #0000ff 4pt solid; TOP: 0px; BORDER-RIGHT: #0000ff 4pt solid" width=550 align=center>
<TBODY>
<TR>
<TD bgColor=#ffffff>填写内容</TD></TR></TBODY></TABLE>
改变上述代码中的部分代码及数值后,就可以获得各种颜色形状不同的边框改变上述代码中的部分代码及数值后,就可以获得各种颜色形状不同的边框

注:如果需要改变框内的颜色在红色部分输入对应颜色的代码即可。

2、

2、双线型边框效果代码:

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

3 、

3、凸出型边框效果代码:

<TABLE style="POSITION: relative; TOP: 0px; HEIGHT: 0px; WIDTH: 550px; 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=#ffffcc>填写内容</TD></TR></TBODY></TABLE>

4、

4、凹陷型边框效果代码:
<TABLE style="POSITION: relative; TOP: 0px; HEIGHT: 0px; WIDTH: 550px; 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=#ff00ff>填写内容</TD></TR></TBODY></TABLE>

5、

5、虚线型边框效果代码:
<TABLE style="BORDER-BOTTOM: #cc33ff 3pt dashed; POSITION: relative; BORDER-LEFT: #cc33ff 3pt dashed; WIDTH: 550px; HEIGHT: 0px; BORDER-TOP: #cc33ff 3pt dashed; TOP: 0px; BORDER-RIGHT: #cc33ff 3pt dashed" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#99ff00>填写内容</TD></TR></TBODY></TABLE>


6、

6、脊状立体边框效果代码:

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


7、

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

<TABLE style="BORDER-BOTTOM: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; WIDTH: 550px; HEIGHT: 50px; BORDER-TOP: #f6ae56 3px dashed; BORDER-RIGHT: #f6ae56 3px dashed" cellSpacing=8 bgColor=#f6ae56>
<TBODY>
<TR bgColor=#aeffae>
<TD>填写内容</TD></TR></TBODY></TABLE>

8、

8、凹状双内虚线框样式与代码:

<TABLE style="POSITION: relative; WIDTH: 550px; HEIGHT: 0px; TOP: 0px" border=10 cellSpacing=2 borderColor=#00cc00 width=550 align=center>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: #00cc00 3px dashed; BORDER-LEFT: #00cc00 3px dashed; BORDER-TOP: #00cc00 3px dashed; BORDER-RIGHT: #00cc00 3px dashed">填写内容</TD></TR></TBODY></TABLE>

9、

9、点状虚线框效果代码:

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


无线添加虚(实)线框代码及代码解析:

<DIV style="BORDER-RIGHT: #ff4500 3px dashed; BORDER-TOP: #ff4500 3px dashed;

BORDER-LEFT: #ff4500 3px dashed; BORDER-BOTTOM: #ff4500 3px dashed">此处

输入文字</DIV> 这四处是颜色代码 #ff4500 更换颜色代码请点这里:

博客颜色代码查询器这四处3px是线框粗细,数值越大线条越粗dashed是虚线框,

改为solid是实线框添加此BACKGROUND-COLOR: #ccffcc;代码,为框内背景


  评论这张
 
阅读(44)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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