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

彼岸花开

 
 
 

日志

 
 

【引用】为博客日志添加精美边框教程  

2012-01-26 10:05:28|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

   

 为了美化我们的日志,不但可以为它加入背景,插入图片,我们还可以为日志加上精美的边框,方法也很简单,当然也要求用源码来完成。

        在发布日志的时候,首先勾选“源代码”,在其中粘入下面的代码:

  <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>

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

        之后再取消源代码的选择,在编辑面板中就会出现下面的边框样式:

填写内容

 

        这样我们就可以把光标放在边框中输入日志内容了。边框也可以根据输入的内容自行调节宽度和高度了。

 代码解析:

 

1、BORDER-RIGHT:表示该边框的右边框线;LEFT表示左边框线;TOP、BOTTOM表示上、下边框线。

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

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

4、double表示该边框为双线边框、outset表示为凸出型边框、inset为凹槽型边框、dashed为虚线型边框等。      

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

6、最后一行中的bgColor=#ffffff 是指该边框内部的颜色,如果去掉则显示为你日志页面的颜色.也可改变其它颜色,如:#ffffff表示内框背景为白色,现在需要黑色作为背景颜色只要改为#00000即可。

 

        这样你就可以根据自己的设计去改变代码中的部分数值去获得颜色和形状不同的边框了。

 日志边框不同样式及代码(一)见:

源码一:单线型边框

<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>
<TD bgColor=#999999>
填写内容</TD></TR></TBODY></TABLE>

样式:

填写内容

 

源码二:双线型边框

<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>

                                                                                               样式:

填写内容

 

源码三:凹陷型边框

<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>

                                                                                                                                  样式:

 
填写内容

 

源码四:凸出型边框

 

<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>

样式:

 

填写内容

 

源码五:虚线型边框

<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>

 

样式:

 

填写内容

 

日志边框不同样式及代码(二)见:

 

源码六:粒状阴影边框

<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>

 

样式:

 

填写内容

$qVb{$]0

 

源码七:立体阴影边框

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



样式:

.

填写内容

 

`

源码八:邮票型边框

<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>

 

样式:

 

填写内容

 

 

源码九:外实内虚双线型边框

 

<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>

样式:

 

填写内容

 

 

源码十:点状外虚线型边框

<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>
'U)@ g1B7Ct7W0<TR bgColor=#111111>
<TD>
填写内容</TD></TR></TBODY></TABLE>

 

样式:

填写内容

 

源码十一:点状内虚线型边框



<TABLE borderColor=#00cc00 cellSpacing=2 width=720 align=center border=10>
<TBODY>
<TR>
e n!emQw0<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>

 

样式:

填写内容

 

 

 

 

 

 

 

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

历史上的今天

评论

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

页脚

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