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

壳子的博客

学无止境

 
 
 

日志

 
 

【精】博文边框装饰  

2010-07-02 19:12:41|  分类: 音画边框制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自津久井曈《引.多组实用的博文边框》

 

引用 涟依紫凌【转载素材】博文边框装饰 由涟依紫凌整理。

 

来源:(http://blog.sina.com.cn/s/blog_4a50efad0100e97e.html) - 【文章框】 多彩虚线框_巫师小北_新浪博客

粉红:<div style="border:3px dashed #FF99CC;">日志文字</div>


橘色:<div style="border:3px dashed #FF8C00;">日志文字</div> 


深蓝:<div style="border:3px dashed #00BFFF;">日志文字</div> 


紫色:<div style="border:3px dashed #8600FF;">日志文字</div> 


 浅绿:<div style="border:3px dashed #32CD32;">日志文字</div> 

 想要其他的颜色很简单,把颜色代码换成其他颜色的就行了   点击进入颜色代码表


 
以下全部来自幸福花园主站 
 
 【提示】宽度数值可以更改:代码中width="400"将400改为其他,数值越大框子越大。
文字颜色的话再添加完代码后,双击效果,选中文字直接更改,像普通博客文章一样哦`~
 
样式1

虚线

 


<TABLE width="400" style="border-style:solid; border-color:#ff99cc; border-width:1px;">
<TR><TD align="center" style="border-style:dashed; border-color:#ff99cc;
border-width:1px;">输入文字</TD></TR></TABLE>
 
 
样式2

圆点

 


<TABLE width="400" style="border-color:#ff99cc; border-width:4px;
border-style:dotted;"><TR><TD align="center">输入文字</TD></TR></TABLE>
 
 
样式3

  圆脚


<TABLE border="0" cellpadding="0" cellspacing="0">
<TBODY><TR>
<TD height="1" colspan="7"></TD>
<TD height="1" bgcolor="#ff9ace">
</TD>
<TD height="1" colspan="7"></TD>
</TR><TR><TD colspan="5"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ff9ace">
</TD>
<TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD colspan="5"></TD>
</TR><TR><TD colspan="4"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="5"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD colspan="4"></TD>
</TR><TR>
<TD colspan="3"></TD><TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="7"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD colspan="3"></TD></TR>
<TR><TD colspan="2"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="9"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD colspan="2"></TD></TR>
<TR><TD></TD>
<TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="11"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD></TD></TR><TR>
<TD></TD><TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="11"></TD><TD bgcolor="#ff9ace"></TD>
<TD></TD></TR><TR>
<TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff">
</TD>
<TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ffffff"></TD>
<TD width="120" bgcolor="#ffffff"
 style="font-size:8pt;
color:#888888;">输入
文字</TD><TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ffffff">
</TD>
<TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ffffff"></TD>
<TD bgcolor="#ff9ace"></TD>
</TR><TR><TD></TD>
<TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="11"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD></TD></TR><TR>
<TD></TD><TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="11"></TD><TD bgcolor="#ff9ace"></TD>
<TD></TD></TR
来源:(http://blog.sina.com.cn/s/blog_4a50efad0100gnnv.html) - 【文章框】各类文章框、虚线框【01】_巫师小北_新浪博客
TR><TD colspan="2"></TD><TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="9"></TD><TD bgcolor="#ff9ace"></TD>
<TD colspan="2"></TD>
</TR><TR><TD colspan="3"></TD><TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="7"></TD><TD bgcolor="#ff9ace"></TD>
<TD colspan="3"></TD>
</TR><TR><TD colspan="4"></TD><TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff" colspan="5"></TD><TD bgcolor="#ff9ace"></TD>
<TD colspan="4"></TD>
</TR><TR><TD colspan="5"></TD><TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ffffff"></TD><TD bgcolor="#ff9ace"></TD>
<TD bgcolor="#ff9ace"></TD>
<TD colspan="5"></TD>
</TR>
<TR>
<TD height="1" colspan="7"></TD>
<TD height="1" bgcolor="#ff9ace"></TD>
<TD height="1" colspan="7"></TD>
</TR>
</TBODY>
</TABLE>
 
 
样式4

方点

 


<TABLE width="400" style="border-color:#ff99cc; border-width:2px;
 border-style:dotted;"><TR><TD align="center">输入文字</TD></TR></TABLE>
 
 
样式5

双层

 


<TABLE width="400" style="border-color:#ff99cc; border-width:4px; border-style:double;">
<TR><TD align="center">输入文字</TD></TR></TABLE>
 
 
样式6

长方点

 


<TABLE width="400" style="border-color:#ff99cc; border-width:4px;
border-style:dashed;"><TR><TD align="center">输入文字</TD></TR></TABLE>
 
 
样式7

   彩虹

 


<TABLE border="0" cellpadding="8" cellspacing="3"
width=400>
<TBODY><TR><TD height="1" bgcolor="#ff99cc"></TD>
</TR>
<TR>
<TD height="1" bgcolor="#ffb9dc">
</TD></TR><TR><TD height="1" bgcolor="#ffddee"></TD>
</TR>
<TR>
<TD width="140" align="center" style="font-size:8pt;
color:#bbbbbb;">
<font size="2" color="#000000">输入文字</font></TD>
</TR><TR><TD
height="1" bgcolor="#ffddee">
</TD></TR>
<TR>
<TD height="1" bgcolor="#ffb9dc">
</TD></TR><TR>
<TD height="1" bgcolor="#ff99cc">
</TD>
</TR>
</TBODY>
</TABLE>
 
 
样式8

     
 


    虚线格子

 
     

<TABLE border="0" cellspacing="0" cellpadding="5" width=400>
<TR>
<TD width="10" height="10" style="border-bottom:1px dotted #ff99cc;border-right:1px
dotted #ff99cc;font-size:1pt"> </TD>
<TD height="10" style="border-bottom:1px dotted #ff99cc;font-size:1pt"> </TD>
<TD width="10" height="10" style="border-bottom:1px dotted #ff99cc;border-left:1px
dotted #ff99cc;font-size:1pt"> </TD>
</TR>
<TR>
<TD width="10" style="border-right:1px dotted #ff99cc;font-size:1pt"> </TD>
<TD width="120" bgcolor="#ffffff" style="font-size:8pt;color:#999999;">
<p align="center"><BR>
<font size="2" color="#000000">输入文字</font><BR>
<BR>
</TD>
<TD width="10" style="border-left:1px dotted #ff99cc;font-size:1pt"> </TD>
</TR>
<TR>
<TD width="10" height="10" style="border-top:1px dotted #ff99cc;border-right:1px
 dotted #ff99cc;font-size:1pt"> </TD>
<TD height="10" style="border-top:1px dotted #ff99cc;font-size:1pt"> </TD>
<TD width="10" height="10" style="border-top:1px dotted #ff99cc;border-left:1px
dotted #ff99cc;font-size:1pt"> </TD>
</TR>
</TABLE>
 
 
样式9

宽边

 


<table border cellpadding="3" cellspacing="0"
bgcolor="#ffddee" bordercolor="#ffffff"
bordercolordark="#ffffff"
bordercolorlight="#ff99cc" width=400>
<tr><TD align="center">
<table border cellspacing="0" width="100%"
bordercolor="#ffffff"
bordercolordark="#ffffff"
bordercolorlight="#ffb9dc" ><tr>
<TD width="150" align="center" bgcolor="#ffffff">
输入文字 </TD>
</tr></table></TD></tr>
</table>
 
 
样式10

粗边框


 


<TABLE cellspacing="1" bgcolor="hotpink" cellpadding="3"
style="font-size:8pt;">
<TBODY>
<TR>
<TD bgcolor=#ff99cc align=center> <TABLE cellspacing="1"
bgcolor="hotpink" cellpadding="5" >
<TBODY>
<TR>
<TD width="400" align="center" bgcolor="#ffffff">
输入文字</TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>

 

来源:(http://blog.sina.com.cn/s/blog_4a50efad0100gnny.html) - 【文章框】各类文章框、虚线框【02】_巫师小北_新浪博客  

 

样式1
 

虚线(带背景色)

 


<TABLE width="400" bgcolor="#ff99cc">
<TR><TD align="center" style="border-style:dashed; border-color:#ffffff;
 border-width:1px;">输入文字</TD></TR></TABLE>
 
 
样式2
 

内框圆点(带背景)

 


<TABLE width="400" bgcolor="#ff99cc">
<TR><TD align="center" style="border-style:dotted;
border-color:#ffffff; border-width:4px;">输入文字</TD></TR></TABLE>
 
 
样式3

圆点(带背景)

 


<TABLE width="400" bgcolor="#ff99cc" style="border-style:dotted;
border-color:#ff99cc; border-width:4px;">
<TR><TD align="center">输入文字</TD></TR></TABLE>
 
 
样式4 

邮票边框
 
 

<TABLE border="0" cellpadding="10"
cellspacing="0" bgcolor="#ff99cc"
style="border:dashed 3px #ff99cc;">
<TBODY><TR><TD width="400" >
<div align="center">输入文字</div></TD>
</TR></TBODY>
</TABLE>
 
 
样式5
 

     中空围边型(背景色)   

                                     


<table bgcolor="lightblue" cellspacing="5"
cellpadding="5"><tr>
<td style="border:3px solid white;">
在这里输入内容
</td></tr></table>
 
 

样式6

 

          凸出立体型        

                                     


<table border bgcolor="skyblue" bordercolordark="white"
bordercolorlight="royalblue"
cellpadding="5" cellspacing="0">
<tr><td>
<table border bordercolordark="white"
bordercolorlight="
dodgerblue" cellspacing="0"
cellpadding="5"><tr>
<td bgcolor="white">
在这里输入内容
</td></tr></table>
</td></tr></table>
 
 
样式7
 

凹入立体型

                                      


<table border bgcolor="skyblue"
bordercolorlight="white"
bordercolordark="royalblue"
cellpadding="5" cellspacing="0">
<tr><td>
<table border bordercolorlight="white"
bordercolordark="
dodgerblue"
cellspacing="0"
cellpadding="5"><tr>
<td bgcolor="white">
在这里输入内容
</td></tr></table>
</td></tr></table>
 
 
样式8
 

中空围边

                                        


<table border="1" bordercolor="royalblue" cellspacing="1" cellpadding="4"><tr><td>
在这里输入内容
</td></tr></table>
 
 
样式9
 

           深浅色围边           

             


<table style="border:1px solid royalblue;" cellpadding="4" cellspacing="4">
<tr><td style="border:1px solid lightblue;">
<font size="2">在这里输入内容</font></td></tr>
</table>

 
 
 
样式10
 

             幻彩围边         

                                      


<table style="border:1px solid red;" cellpadding="4" cellspacing="4"><tr>
<td style="border:1px solid black;">
<font size="2">在这里输入内容</font><font size="1">
</td></tr></table>
 

 
 
样式1
 

 点线深浅色

                                      


<table style="border:2px dotted royalblue;" cellpadding="4" cellspacing="4">
<tr><td style="border:2px dotted lightblue;">
<font size="2">在这里输入文字</td></tr></table>
 
 
样式2
 

点线幻彩

                                     


<table style="border:2px dotted hotpink;" cellpadding="4" cellspacing="4">
<tr><td style="border:2px dotted deepskyblue;">
<font size="2">在这里输入文字</font></td></tr>
</table>
 
 
样式3
 

              波浪型             

 


<table style="border:1px dashed deepskyblue;" cellspacing="5"
bgcolor="deepskyblue" cellpadding="5"><tr><td style="border:1px dashed white;"
 bgcolor="white">
<font size="2">在这里输入文字</font>
</td></tr></table></td>
</tr>
</table>
 
 
样式4 

            粗线彩虹         

 


<table cellpadding="4" cellspacing="0" style="border:double 5px plum;">
<tr><td style="border:double 5px lightblue;">
<font size="2">在这里输入文字 </font>
</td></tr></table>
 
 
样式5
 

          细线彩虹         

 


<table style="BORDER-RIGHT: dodgerblue 3px double;
BORDER-TOP: dodgerblue 3px double;
BORDER-LEFT: dodgerblue 3px double;BORDER-BOTTOM:
dodgerblue 3px double" cellSpacing="0"
cellPadding="0">
<tr><td>
<table style="BORDER-RIGHT: lightblue 3px double;
BORDER-TOP: lightblue 3px double;
 BORDER-LEFT: lightblue 3px double;
 BORDER-BOTTOM: lightblue 3px double" cellPadding="0">
<tr><td>
<table style="BORDER-RIGHT: dimgray 1px solid;
BORDER-TOP: dimgray 1px solid;
 BORDER-LEFT: dimgray 1px solid; BORDER-BOTTOM:
 dimgray 1px solid; BACKGROUND-COLOR: white"
cellPadding="7">
<tr><td><font size="2">在这里输入文字
</font></td>
</tr></table></td></tr>
</table></td>
</tr></table>
 
 
样式6
 

幻彩背景色


<table style="BORDER-RIGHT: lightblue 3px double;
 BORDER-TOP: lightblue 3px double;
BORDER-LEFT: lightblue 3px double;
 BORDER-BOTTOM: lightblue 3px double" height="100"
cellPadding="2" width="150">
<tr><td style="BORDER-RIGHT: plum 3px double;
BORDER-TOP: plum 3px double; BORDER-LEFT:
plum 3px double; BORDER-BOTTOM: plum 3px double;
 BACKGROUND-COLOR: aliceblue">
<p align="center">在这里输入内容</td></tr></table>
 
 
样式7
 
     圆点围边型

<table style="BORDER-RIGHT: plum 1px solid;
BORDER-TOP: plum 1px solid; BORDER-LEFT:
 plum 1px solid; BORDER-BOTTOM:plum 1px solid"
 height="100" cellPadding="5"
width="100" bgColor="#eee0e5"><tr>
<td style="BORDER-RIGHT: orchid 4px dotted;
BORDER-TOP: orchid 4px dotted;
BORDER-LEFT: orchid 4px dotted;BORDER-BOTTOM:
 orchid 4px dotted" bgColor="white">
<font size="2">在这里输入内容</font>
</td></tr></table>
 
 

来源:(http://blog.sina.com.cn/s/blog_4a50efad0100gnnz.html) - 【文章框】各类文章框、虚线框【03】_巫师小北_新浪博客
 

     双层双色花边型  

                                      


<table style="BORDER-RIGHT:
lightblue 1px dashed; BORDER-TOP:
lightblue 1px dashed;
 BORDER-LEFT: lightblue 1px dashed;
 BORDER-BOTTOM: lightblue 1px dashed"
cellSpacing="5" cellPadding="3"
 bgColor="lightblue">
<tr><td style="BORDER-RIGHT: lightcyan
1px dashed; BORDER-TOP: lightcyan 1px
 dashed;
 BORDER-LEFT: lightcyan 1px dashed;
 BORDER-BOTTOM: lightcyan 1px dashed"
bgColor="lightcyan">
<table><tr>
<td style="PADDING-RIGHT: 6px;
PADDING-LEFT: 6px; PADDING-BOTTOM: 6px;
 PADDING-TOP: 6px" bgColor="white">
<font size="2">在这里输入文字
</font></td></tr>
</table>
</td>
</tr></table>
 
 
样式9
 

            虚线花边型          

 


<table style="BORDER-RIGHT:
lightblue
1px dashed; BORDER-TOP: lightblue
1px dashed;
BORDER-LEFT: lightblue 1px dashed;
 BORDER-BOTTOM: lightblue 1px dashed"
cellSpacing="3" cellPadding="4"
bgColor="lightblue"><tr>
<td style="BORDER-RIGHT: white
1px dashed; BORDER-TOP: white 1px dashed;
BORDER-LEFT: white 1px dashed;
BORDER-BOTTOM: white 1px dashed">
<font size="2">在此输入内容
</font></td>
</tr></table>
 
 
样式10

               标题               

 双层带标题

 

 


<table style="BORDER-RIGHT:
lightblue 1px solid; BORDER-TOP:
lightblue 1px solid; BORDER-LEFT:
lightblue 1px
solid; BORDER-BOTTOM: lightblue 1px
 solid" cellSpacing="5" cellPadding="4">
<tr><td style="BORDER-RIGHT: lightblue
1px dashed; BORDER-TOP: lightblue 1px
dashed; BORDER-LEFT: lightblue 1px
dashed; BORDER-BOTTOM: lightblue 1px
dashed" bgColor="lightblue"><font size="2">
标题</font></td></tr><tr>
<td><font size="2">在这里输入内容</font>
</td></tr></table>
 
 
样式11

*        标题     *
             彩色标题




<table><tbody><tr>
<td>
<div style="border:1px
 solid #666;
background:#add8e6;
font-size:13px;
color:#666">
<div style="
border-bottom:1px
solid
 #fff;padding:3px" align="center">
*   标题   *
</div><div style="
border-top:1px
dashed #999;background:#fff;
padding:10px" align="left">
在这里输入文字
</div></div>
</td></tr></tbody>
</table>
 
 
样式12

   彩色点线

                                   


<TABLE border="0" cellpadding="0"
 cellspacing="0" width="120"
 height="50" bgcolor="#ffd9e6"
align=center>
<TR><TD><TABLE border="0"
cellpadding="5" cellspacing="0"
width="100%"
 height="100%" style="
border:dotted 4px hotpink;">
<TR><TD bgcolor="white">
<font size="2">在这里输入文字
</font></TD></TR>
</TABLE>
</TD></TR>
</TABLE>
 
 
样式13

分行虚线 1
分行虚线 2
分行虚线 3
分行虚线 4

<TABLE border="0" style="border:
solid 1px hotpink;" bgcolor="white">
<TR><TD>
<TABLE border="0" style="border:
dotted 1px pink;">
<TR><TD align="center">
<TABLE border="0" cellpadding="3"
cellspacing="3" width="100%">
<TR><TD style="border-bottom:dotted
 1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
<TR><TD style="border-bottom:dotted
1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
<TR><TD style="border-bottom:dotted
1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
<TR><TD style="border-bottom:dotted
1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>

以上,完毕
 
  评论这张
 
阅读(777)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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