制作‘边框’的方法有很多种,比如用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>
效果图如下:(可直接复制使用)
|
评论