框式图文导航就是将博客的浏览导航制作成图片与文字的链接形式，使博客图文并茂，既方便实用又美观漂亮。
博客浏览导航可分为首页导航（又称一级导航）和日志分类导航（又称二级导航）。
框式图文导航的制作包括单框导航、双框导航及多框导航等多种样式。现依次介绍如下。
一、单框导航代码：
<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> <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> <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> <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> <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> <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> <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> <A href="此处是链接地址" target=_blank><FONT color=#ff0000
size=2>此处是导航名称
</FONT></A> </P></TD></TR></TR></TR></TBODY></TABLE>
效果图3：
说明：
1、width=“80%”是边框的大小，可以根据自己模块大小调整；
2、边框颜色可根据自己博客风格调整搭配；
3、字体大小和颜色可调整；
4、大框内的小边框粗细及颜色可根据自己爱好调整搭配。
欣赏效果图
