立体框式浏览导航图的制作
2009年2月11日 腾飞
浏览导航的制作方法多种多样，对于在三栏式的博客首页的中间栏安排浏览导航的话，因中间栏面积较宽，用表格形式我看不如用立体框式的美观，当然，这仅仅是我个人的感觉。立体框式也很好制作，它的基本代码是：
<P align=center><FONT face=黑体 color=#00c024 size=2 ></FONT>
<TABLE cellSpacing=1 cellPadding=0 align=center border=0 >
<TBODY><TR>
<DIV><FONT face=黑体 color=#00c024 size=2></FONT></DIV></TR></TBODY></TABLE>
<TABLE cellSpacing=6 cellPadding=6 width=450 background=http://image22.360doc.com/DownloadImg/2011/01/1221/8435287_5.gif border=15 bordercolordark="#336666">
<TBODY>
<TR P align=center height=60>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
</TBODY></TABLE></A></P>
效果如下：
制作说明：
上图是根据我的首页中间栏尺寸制订的，你需根据你的首页情况略加变动，上图我只列出一行让你看看，你需要几行就加上几行。但要明确以上代码的含义。
background=http://image22.360doc.com/DownloadImg/2011/01/1221/8435287_5.gif 这是背景颜色的图片地址，background=（填图片地址），你可到我博客里查找《小块显底素材》选择使用。
<TABLE cellSpacing=6 cellPadding=6 width=450 这一行代码中width=450表示宽=450，也就是上图四格总宽度。你可根据你的情况而定，数字可改。
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>这是一个单元格的代码。上图是四个单元格，是由这么四行代码组成的。你需要几个单元格就加几行单元格代码。
color=#ff0000 这是字体颜色代码，#ff0000 是红色，你根据需要到“颜色代码大全”里选择。
size=3 这是字体大小号码，把3改为1的话字体最小。
<TR P align=center height=60>这是分行代码。如果你需要每行四格，共需三行的话，就这样安排：
<P align=center><FONT face=黑体 color=#00c024 size=2 ></FONT>
<TABLE cellSpacing=1 cellPadding=0 align=center border=0 >
<TBODY><TR>
<DIV><FONT face=黑体 color=#00c024 size=2></FONT></DIV></TR></TBODY></TABLE>
<TABLE cellSpacing=6 cellPadding=6 width=450 background=http://image22.360doc.com/DownloadImg/2011/01/1221/8435287_5.gif border=15 bordercolordark="#336666">
<TBODY>
<TR P align=center height=60>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TR P align=center height=60>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TR P align=center height=60>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑体 size=3>日志名称</FONT></A></TD>
</TBODY></TABLE></A></P>
看看效果：
点击查看：“常用背景素材荟萃”
|
