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

汉卿博客

音画乐园

 
 
 

日志

 
 
关于我

总结经验 再创辉煌 音画乐园--展现一切美好的人和事、并通过特技发挥到极致!

网易考拉推荐

单“边框”的制作方法1  

2009-04-19 23:09:14|  分类: 博客制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

简单“边框”的制作方法?(原创) 2008-05-09 14:27 分类:边框的制作 字号: 大大 中中 小小 在制作音画作品及发表图片时,给它添加一幅漂亮的边框.这也许是许多博 友想做的...那么,该如何来为它添加漂亮的边框呢? 其实,制作‘边框’的方法有很多种,比如用Word、PS等软件都可以制作出 边框. 但这就要求你必须有一定的电脑专业知识,对于一般的朋友来说还是有点 难度的. 今天,笔者向大家介绍一种简便、制作容易的的方法: 那就是用代码直接制作音画、日志的边框. 首先,看下面的这段基本代码: 首先,看下面的这段基本代码: 原始代码:(如下)

 <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表示上、下边框线; 2、#0000ff 表示该边框线的颜色,有关颜色的选取请参见《颜色速查表》一文; 3、7pt表示该边框线的粗细度,可根据需要改变其数值;4、上述代码中的红色部分double表示该边框为单线边框、double为双线边框、outset表示为凸出型边框、inset为凹槽型边框、dashed为虚线型边框等 4、align=center 表示该边框在日志中居正中位置, 需要说明的是:日志页面的总宽度一在720至800之间.只有宽度值小于700以下时,边框才会出现居左、居右或居中的现象出现;详细内容,请参见---《如何调整“边框”在日志页面的宽度及高度?》一文的解讲; 5、如果去除上述代码中的最后一行中的bgColor=#ffffff代码, 最终该边框内部的颜色显示为你日志页面的颜色.如果你想在该边框内添加一种背景颜色,只要在粉红处改变颜色代码即可. 例:#ffffff表示内框背景为白色,现在需要黑色作为背景颜色只要改为#00000即可.

 

有关颜色的选取请参见《颜色速查表》一文. 修改代码后,可获得如下几种不同边框的效果图: 你只需要改变上述代码中的部分代码及数值复制该代码后,就可以获得形状不同的边 框. 如:<1>单线边框、<2>双线边框、<3>立体阴影边框、<4>凸线边框、<5>凹线边框、<6 >邮票型边框、<7>粒状阴影型边框、<8>虚线边框等等 1、单线型边框: 代码复制区:

<TABLE style="BORDER-RIGHT: red 4pt solid; BORDER-TOP: red 4pt solid; BORDER-LEFT: red 4pt solid; BORDER-BOTTOM: red 4pt solid" width="99%" align=center>

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

效果图如下:(可直接复制使用)

填写内容

效果图如下:(可直接复制使用) 填写内容 2、双线型边框: 代码复制区

:

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

填写内容

效果图如下:(可直接复制使用) 填写内容 3、凸出型边框: 代码复制区:

<TABLE style="BORDER-RIGHT: #33CC33 11pt outset; BORDER-TOP: #33CC33  11pt outset; BORDER-LEFT: #33CC33  11pt outset; BORDER-BOTTOM: #33CC33  11pt outset"width="99%" align=center>

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

填写内容
效果图如下:(可直接复制使用) 填写内容 4、凹陷型边框: 代码复制区:

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

填写内容

效果图如下:(可直接复制使用) 填写内容 5、虚线型边框: 代码复制区:

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

填写内容
效果图如下:(可直接复制使用) 填写内容 6、脊状立体型边框: 代码复制区: <TABLE style="BORDER-RIGHT: #cc9933 14pt ridge; BORDER-TOP: #cc9933 14pt ridge; BORDER-LEFT: #cc9933 14pt ridge; BORDER-BOTTOM: #cc9933 14pt ridge" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#cc9000>填写内容</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=#cc9933>正文</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=#ffffff>填写内容</TD></TR></TBODY></TABLE>
填写内容
效果图如下:(可直接复制使用) 填写内容 9、邮票型边框: 代码复制区: <TABLE style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; WIDTH: 780px; BORDER-BOTTOM: #f6ae56 3px dashed; HEIGHT: 50px" cellSpacing=8 bgColor=#f6ae56>
<TBODY>
<TR bgColor=#33ccff >
<TD>填写内容</TD></TR></TBODY></TABLE>
填写内容
效果图如下:(可直接复制使用) 填写内容 10, 凹状双内虚线框: 代码复制区:

<TABLE borderColor=#0000ff cellSpacing=2  cellSpacing=1 width=780 align=center  border=10>

<TBODY>

<TR>

<TD style="border:3 dashed #00cc00">填写内容</TD></TR></TBODY></TABLE>

填写内容
效果图如下:(可直接复制使用) 填写内容 最后,说明: 根据上述原始代码,稍作修改后还可以制作出许多漂亮的图片边框.比如将上述代码改为: 代码复制区: <P align=center><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,

strength=20"

src="http://img.blog.163.com/photo/ZpBXMeWlIQ4V7VwYyDwvFQ==/3687322194909962575.jpg">

</P>

单“边框”的制作方法1 - sbicqtveb - sbicqtveb博客

效果图如下: 具体操作步骤,请参见--- ◇怎样给"图片"添加漂亮的边框?◇ 相关文章链接: 1、----颜色速查表 2、 "边框"的制作方法及技巧 ◇简单"边框"的制作方法◇ ◇"边框"的代码分析◇ ◇如何不用图片做"边框"的方法◇ ◇用动、静态图片组合制作"边框"◇ ◇用"静态"图片做"边框"的方法◇ ◇怎样给"图片"添加漂亮的"边框"◇ ◇多层"边框"的添加方法◇ ◇如何改变"边框"中各边框线的粗细值◇ ◇如何调整"边框"的宽度及高度◇ ◇怎样改变边框颜色及边框线数值◇ ◇边框内层背景颜色的替换方法◇ ◇为你提供精美的"边框"及"边框"素材◇
  评论这张
 
阅读(74)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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