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

吴国好的博客【文德】

海不辞水故能成其大,山不辞土故能成其高。

 
 
 

日志

 
 

【转载】用HTML代码制作边框(上)  

2013-11-05 11:36:53|  分类: 丛林e家 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

代码

<DIV>
<TABLE borderColor=#8ee5ee width=600 border=5>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>

效果

这是一个单层边框代码,边框颜色是湖蓝色(#8ee5ee),边框厚度值为“5”宽度为600,通过对边框宽度、颜色和边框厚度的设置可获得不同的边框。例如想把上面的边框制作成红色,边框厚度加大,那么就把borderColor=#8ee5ee 的#8ee5ee换成#ff0000,border=5的5改为18(数值越大边框厚度越大)代码则变成

<TABLE borderColor=#ff00ff width=600 border=18>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>

效果


如果想要边框居中则在代码前加一个居中代码<P align=center>在代码最后加一个结束标记<P>就行了

效果

在边框里加入内容

内容是加在边框中间的,所以要分清代码中哪里是中间。中间就是边框代码开始代码与结束代码的中间。
边框开始代码

<DIV>
<TABLE borderColor=#8ee5ee width=600 border=5>
<TBODY>
<TR>
<TD>

边框结束代码

</TD></TR></TBODY></TABLE></DIV>

完整代码

<DIV>
<TABLE borderColor=#8ee5ee width=600 border=5>
<TBODY><TR><TD>内容</TD></TR></TBODY></TABLE></DIV>

具体演示

这是一张图片

2009年3月2日 - 2009.hanshan - 2009.hanshanye.blog

这是一个视频

它们的代码分别是

一:<P align=center><IMG src="http://img.bimg.126.net/photo/jfL3WD6YiLfVmpNozZZ3EQ==/327073922939115227.jpg">

二:<DIV align=center><EMBED codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,5,0803 src=http://www.hld.gov.cn/government/vod/kfhld.wmv width=500 height=380 type=application/x-oleobject loop="3" standby="Loading Windows Media Player components..." classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" solid? 1px #666666 BORDER-BOTTOM: solid; BORDER-LEFT: BORDER-TOP: BORDER-RIGHT: allowNetworking="internal" allowScriptAccess="never"></DIV>

要加入的边框代码

<DIV>
<TABLE borderColor=#8ee5ee width=600 border=5><TBODY><TR><TD>内容</TD></TR></TBODY></TABLE></DIV>

把一、二代码依次放入边框内容处后,代码变为

<DIV>
<TABLE borderColor=#8ee5ee width=600 border=5>
<TBODY><TR><TD>

<P align=center><IMG src="http://img.bimg.126.net/photo/jfL3WD6YiLfVmpNozZZ3EQ==/327073922939115227.jpg">

<DIV align=center><EMBED codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,5,0803 src=http://www.hld.gov.cn/government/vod/kfhld.wmv width=500 height=380 type=application/x-oleobject loop="3" standby="Loading Windows Media Player components..." classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" solid? 1px #666666 BORDER-BOTTOM: solid; BORDER-LEFT: BORDER-TOP: BORDER-RIGHT: allowNetworking="internal" allowScriptAccess="never"></DIV></TD></TR></TBODY></TABLE></DIV>

效果

用HTML代码制作边框 - 2009.hanshan -  2009.hanshanye.blog

说明

1,这个边框用的是颜色,有时、特别是制作多层边框时要用图片,所以,用图片制作时要把原代码边框颜色代码borderColor=#8ee5ee 删除,改换图片代码background="图片地址"同时这张图片也是边框里的背景。改换后的代码

<DIV>
<TABLE background="图片地址" width=600 border=5>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>

例如:想用这张图片制作边框
图片地址:http://img.bimg.126.net/photo/CdwbCBCRcr8MdCfn0zcYeg==/3151112364276344445.jpg

用HTML代码制作边框 - 2009.hanshan -  2009.hanshanye.blog

代码为

<DIV>
<TABLE background="http://img.bimg.126.net/photo/CdwbCBCRcr8MdCfn0zcYeg==/3151112364276344445.jpg" width=600 border=5>
<TBODY>
<TR>
<TD>
内容略</TD></TR></TBODY></TABLE></DIV>

效果

用HTML代码制作边框 - 2009.hanshan -  2009.hanshanye.blog

如果是用颜色制作边框,边框内的背景颜色是与博客模块背景颜色相一致的,同一个文章放在不同风格的博客里会有不同的效果,效果受到影响不说,有时连文章都显示不全,这要在边框内背景上加上一张理想的图片。这个代码是

<CENTER>
<TABLE width=宽度(不能超出边框宽度) border=0>
<TBODY>
<TR>
<TD background=图片地址>

也可以把这个代码看成是文章内容的一部分,放在内容的最前面。下面是用颜色制作边框,用大海作背景,代码为

<CENTER>
<DIV>
<TABLE borderColor=#8ee5ee width=600 border=5>
<TBODY>
<TR>
<TD>
<CENTER>
<TABLE width=600 border=0>
<TBODY>
<TR>
<TD background=http://img.bimg.126.net/photo/CdwbCBCRcr8MdCfn0zcYeg==/3151112364276344445.jpg>
<P align=center><IMG  src="http://img.bimg.126.net/photo/jfL3WD6YiLfVmpNozZZ3EQ==/327073922939115227.jpg"></P>
<DIV align=center><EMBED codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,5,0803 src=http://www.hld.gov.cn/government/vod/kfhld.wmv width=500 height=380 type=application/x-oleobject loop="3" standby="Loading Windows Media Player components..." classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" solid? 1px #666666 BORDER-BOTTOM: solid; BORDER-LEFT: BORDER-TOP: BORDER-RIGHT: allowNetworking="internal" allowScriptAccess="never"></DIV></TD></TR></TBODY></TABLE></CENTER></TD></TR>
</TBODY></TABLE></DIV></CENTER>

效果

用HTML代码制作边框 - 2009.hanshan -  2009.hanshanye.blog

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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