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

┍~玉狐的博客~┍@╰☆╮

思梅梦菊美文美女美图乐园,你所喜欢的就是我所关注的......

 
 
 

日志

 
 

【博客素材】常用的各种点线边框  

2015-06-25 09:46:13|  分类: 【软件园地】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

常用各种点线边框

编辑/制作:海洋之魂

【博客素材】常用的各种点线边框 - 海洋之魂 - 海洋之魂音画空间

代码解析:

<TABLE border=边框厚度 width=图框宽度  height=边框高度 cellspacing=内容距边框距离大小 cellpadding=3 bgcolor=背景颜色代码  bordercolor=边框颜色代码></TD></TR>

<TR>
<TD>在此插入内容</TD></TR></TBODY></TABLE></DIV>

 
 

  

一、虚线边框代码:

<TABLE style="BORDER-BOTTOM: #6f3198 2px dashed; BORDER-LEFT: #6f3198 2px dashed; BORDER-COLLAPSE: collapse; BORDER-TOP: #6f3198 2px dashed; BORDER-RIGHT: #6f3198 2px dashed" border=1 borderColor=#ff6600 cellPadding=1 width=698 bgColor=#ffffff align=center>
<TBODY>
<TR>
<TD>
<P align=center>&nbsp;</P></TD></TR></TBODY></TABLE></DIV>

 
二、双实线边框代码:

 


<TABLE border=1 cellSpacing=1 borderColor=#ffcc00 cellPadding=1 width=560 bgColor=#ff0000 align=center>
<TBODY>
<TR align=middle><TD>1</TD></TR>
<TR align=middle>
<TD>2</TD></TR></TBODY></TABLE>

 

三、凹凸效果边框代码

<TABLE style="WIDTH: 690px; HEIGHT: 27px" border=5 cellSpacing=3 cellPadding=0 bgColor=#ffffff>
<TBODY>
<TR>
<TD>
<P align=center>这里发表日志 </TD></TR></TBODY></TABLE>
ffffff边框内背景颜色代码,数值5是边框的粗细,数值3是改变文字距边框的距离,均可修改。

 
四、单边无背景线框代码:
 

1、单边特细实线框

<TABLE style="BORDER-COLLAPSE: collapse" border=1 borderColor=#000000 cellPadding=1 width=672 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>在这里发表日志</DIV></TD></TR></TBODY></TABLE>
000000是边框颜色代码,可替换。
 

2、单边(加粗)实线框

<TABLE style="BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; WIDTH: 690px; BORDER-TOP-STYLE: solid; HEIGHT: 100px; COLOR: rgb(0,0,0); FONT-SIZE: 13px; BORDER-LEFT-STYLE: solid" border=2 cellSpacing=0 borderColor=#ed1c24 cellPadding=4>
<TBODY>
<TR>
<TD>

<P align=center>在这里发表日志</TD></TR></TBODY></TABLE>

ed1c24是边框颜色代码,可替换。

 

3、单边(虚线)

<TABLE style="BORDER-BOTTOM: #6f3198 2px dashed; BORDER-LEFT: #6f3198 2px dashed; BORDER-COLLAPSE: collapse; BORDER-TOP: #6f3198 2px dashed; BORDER-RIGHT: #6f3198 2px dashed" border=1 borderColor=#000000 cellPadding=1 width=690 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>在这里发表日志</DIV></TD></TR></TBODY></TABLE>
6f3198是边框四边的颜色代码,000000是文字的颜色代码,颜色代码均可替换,2px是边框的粗细可改。
 

4、单边(点线)

<TABLE style="BORDER-BOTTOM: #0f0dff 2px dotted; BORDER-LEFT: #0f0dff 2px dotted; BORDER-COLLAPSE: collapse; BORDER-TOP: #0f0dff 2px dotted; BORDER-RIGHT: #0f0dff 2px dotted" border=2 borderColor=#000000 cellPadding=1 width=690 align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=center>在这里发表日志</DIV></DIV></TD></TR></TBODY></TABLE>
0f0dff是边框四边的颜色代码,000000是文字的颜色代码,2px是边框的粗细,均可修改。
 

5、单边(点虚线)

<TABLE style="BORDER-BOTTOM-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; WIDTH: 690px; BORDER-TOP-STYLE: dotted; HEIGHT: 100px; COLOR: rgb(117,249,150); FONT-SIZE: 13px; BORDER-LEFT-STYLE: dotted" border=1 cellSpacing=0 borderColor=#787878 cellPadding=4>
<TBODY>
<TR>
<TD>在这里发表日志</TD></TR></TBODY></TABLE>

787878是边框颜色代码,可替换。

 

五、双边无背景实线框代码:

<TABLE style="WIDTH: 656px; HEIGHT: 12px" border=3 cellSpacing=10 borderColor=#6495ed borderColorDark=#0000ff cellPadding=0 width=660 align=center>
<TBODY>
<TR>
<TD>在这里发表日志</TD></TR></TBODY></TABLE>

红色的是边框颜色代码,可替换。

 
六、图片花色背景线框代码:


<TABLE style="BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; WIDTH: 698px; BORDER-TOP-STYLE: solid; HEIGHT: 221px; COLOR: rgb(0,0,0); FONT-SIZE: 13px; BORDER-LEFT-STYLE: solid" border=1 cellSpacing=4 borderColor=#ffffff cellPadding=4 background="http://img7.ph.126.net/uvTAHkT2T6UKW6CdTd15Wg==/911134499612428687.gif">
<TBODY>
<TR>
<TD><SPAN style="COLOR: rgb(255,255,255)">在这里发表日志</SPAN></TR></TBODY></TABLE>

 

七、图片花色背景线框代码:

<TABLE style="WIDTH: 460px; HEIGHT: 70px" border=3 cellSpacing=8 borderColor=#eea2ad cellPadding=10 width=660 background=http://img2.ph.126.net/nRo8qQCKU0zgbjjyW9fEGQ==/877076027430461414.gif align=center>
<TBODY>
<TR>
<TD>
<TABLE style="WIDTH: 558px; HEIGHT: 152px" border=1 cellSpacing=1 cellPadding=3 background=http://img0.ph.126.net/AAuW-rBnQhqxBHu1EBpNxg==/2162853721044899733.gif align=right>
<TBODY>
<TR>
<TD>
<P align=left>这里发表日志</P></TR></TBODY></TABLE></TR></TBODY></TABLE>

 

八、无边框代码:
<TABLE style="BORDER-COLLAPSE: collapse" border=0 borderColor=#99ff66 cellPadding=1 width=690 bgColor=#9c5a3c align=center height=40>
<TBODY>
<TR>
<TD>
<DIV align=left>这里发表日志</DIV></TD></TR></TBODY></TABLE>
9c5a3c是文字背景的颜色,690是边框的宽度,均可修改。

 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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