打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
【博客代码】如何运用代码做边框
博客留言交换链接本站资源电子邮件QQ互动
原 始 代 码     <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为虚线型边框等
5、align=center  表示该边框在日志中居正中位置,   需要说明的是:日志页面的总宽度一在720至800之间.只有宽度值小于700以下时,边框才会出现居左、居右或居中的现象; align=left  居左 align=right 居右
6、如果去除上述代码中的最后一行中的bgColor=#ffffff
代码, 最终该边框内部的颜色显示为你日志页面的颜色.如果你想在该边框内添加一种背景颜色,只要在粉红处改变颜色代码即可. 例:#ffffff表示内框背景为白色,现在需要黑色作为背景颜色只要改为#00000即可.
 
改变上述代码中的部分代码及数值后,就可以获得各种颜色形状不同的边框.
1、单线型边框样式与代码:
<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>
<TR>
<TD bgColor=#999999>填写内容</TD></TR></TBODY></TABLE>
2、双线型边框样式与代码:
 
<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>
3、凸出型边框样式与代码:
<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>
4、凹陷型边框样式与代码:
 
<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>
5、虚线型边框样式与代码:
 
<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>
6、脊状立体边框样式与代码:
 
<TABLE style="BORDER-RIGHT: #00ff00 14pt ridge; BORDER-TOP: #00ff00 14pt ridge; BORDER-LEFT: #00ff00 14pt ridge; BORDER-BOTTOM: #00ff00 14pt ridge" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#ccffcc>填写内容</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=ccff11>填写内容</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=#eeeeee>填写内容</TD></TR></TBODY></TABLE>
9、邮票型边框样式与代码:
 
<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>
10, 凹状双内虚线框样式与代码:
 
<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>
11, 点状虚线框样式与代码:
 
<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>
<TR bgColor=#111111>
<TD>填写内容</TD></TR></TBODY></TABLE>
12, 点状内虚线框样式与代码:
 
<TABLE borderColor=#00cc00 cellSpacing=2 width=720 align=center border=10>
<TBODY>
<TR>
<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>
〓〓更多的样式等着你去发现〓〓
滚动条框制作方法与代码
日志图文排列样式与代码
一分钟学会查找音乐地址
博客基本代碼解讀大全
如何给日志做封面
如何在博客设置QQ互动
特殊符号应用实例与代码
如何在留言评论中贴图
文字特效代码大全
图片特效代码大全
移动文字全都汇
图框链接教你做
幻灯片制作方法与代码
实用表格样式代码汇总
博客技巧电脑学堂素材基地
软件学院音画视听精彩图酷
博客代码书画艺术游戏大厅精美边框顶栏模版时钟超市
flash素材影音素材查看关于本站的更多信息
经典摘录收藏本站
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
简单“边框”的制作方法
教你如何用代码做日志边框
简单“边框”的制作方法?(原创)
转轴边框代码
常用代码全包括,全全全!!! - 主页交流论坛 - 育儿论坛 - 育儿网
不同结构的表格样式
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服