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

兰馨的博客

用智慧营造心灵的空间

 
 
 

日志

 
 
关于我

不争,元气不伤,不畏,慧灼闪光,不怒,百神和畅,不忧,心地清凉,不求,不卑不亢,不执,可圆可方,不贪,便是富贵,不苟,何惧君王!

网易考拉推荐

框式图文导航的制作及代码   

2008-07-16 21:10:56|  分类: 博客导航 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

框式图文导航的制作及代码  

       
       框式图文导航即是将博客的浏览导航制作成图片与文字的链接形式使博客图文并茂,既方便实用又美观漂亮

    博客浏览导航可分为首页导航(又称一级导航)和日志分类导航(又称二级导航)

   框式图文导航的制作包括单框导航双框导航及多框导航等多种样式现依次介绍如下

             

一单框导航代码:

<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=0 width="80%" bgColor=#080808

border=3>
<TBODY>
<TR>
<TD><A href="
此处是链接地址" target=_blank><IMG height=80 src="此处是图片地址
"

width=80 border=0></A>
<P>&nbsp;<A href="
此处是链接地址" target=_blank>

<FONT color=#ff0000 size=2>此处是导航名称 </FONT></A> </P></TD>

 

效果图1:

导航引领点击欣赏

 

二双框代码:

<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=0 width="80%"

bgColor=#080808 border=3>
<TBODY>
<TR>
<TD><A href="
此处是链接地址" target=_blank><IMG height=80 src="
此处是图片地址
"

width=80 border=0></A>
<P>&nbsp;<A href="
此处是链接地址" target=_blank><FONT color=#ff0000 size=2>
此处是导航名称

</FONT></A> </P>
</TD>
<TD><A href="
此处是链接地址" target=_blank><IMG height=80 src="此处是图片地址
"

width=80 border=0></A>
<P>&nbsp;<A href="
此处是链接地址" target=_blank><FONT color=#ff0000 size=2>此处是导航名称

</FONT></A> </P></TD></TR></TR></TR></TBODY></TABLE>

 

效果图2:

 

 多框代码:

 

<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=0 width="80%"

bgColor=#080808 border=3>
<TBODY>
<TR>
<TD><A href="
此处是链接地址" target=_blank><IMG height=80 src="
此处是图片地址
"

width=80 border=0></A>
<P>&nbsp;<A href="
此处是链接地址" target=_blank><FONT color=#ff0000 size=2>
此处是导航名称

</FONT></A> </P>
</TD>
<TD><A href="
此处是链接地址" target=_blank><IMG height=80 src="此处是图片地址
"

width=80 border=0></A>
<P>&nbsp;<A href="
此处是链接地址" target=_blank><FONT color=#ff0000 size=2>此处是导航名称

<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=0 width="80%"

bgColor=#080808 border=3>
<TBODY>
<TR>
<TD><A href="
此处是链接地址" target=_blank><IMG height=80 src="
此处是图片地址
"

width=80 border=0></A>
<P>&nbsp;<A href="
此处是链接地址" target=_blank><FONT color=#ff0000 size=2>
此处是导航名称

</FONT></A> </P>
</TD>
<TD><A href="
此处是链接地址" target=_blank><IMG height=80 src="此处是图片地址
"

width=80 border=0></A>
<P>&nbsp;<A href="
此处是链接地址" target=_blank><FONT color=#ff0000 size=2>此处是导航名称

</FONT></A> </P></TD></TR></TR></TR></TBODY></TABLE>

 


效果图3:


 相逢是首歌

 祝福你一生

  遇上你是缘

 真的好想你

 相逢是首歌2

 

说明:

1width=80%是边框的大小,可以根据自己模块大小调整

2边框颜色可根据自己博客风格调整搭配;

3字体大小和颜色可调整;

4大框内的小边框粗细及颜色可根据自己爱好调整搭配




----------------------------
一键转贴,快速捕捉生活精彩,赢每周好礼!查看活动首页>>

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

历史上的今天

评论

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

页脚

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