默認分類 2009-02-11 20:59:49 閱讀500 評論30 字號：大中小
立體框式瀏覽導航圖的制作
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>
效果如下：
日志名稱日志名稱日志名稱日志名稱制作說明：
上圖是根據(jù)我的首頁中間欄尺寸制訂的，你需根據(jù)你的首頁情況略加變動，上圖我只列出一行讓你看看，你需要幾行就加上幾行。但要明確以上代碼的含義。
background=http://image22.360doc.com/DownloadImg/2011/01/1221/8435287_5.gif 這是背景顏色的圖片地址，background=（填圖片地址），你可到我博客里查找《小塊顯底素材》選擇使用。
<TABLE cellSpacing=6 cellPadding=6 width=450 這一行代碼中width=450表示寬=450，也就是上圖四格總寬度。你可根據(jù)你的情況而定，數(shù)字可改。
<TD width="20%"><A href="日志地址" target=_blank><FONT color=#ff0000 face=黑體 size=3>日志名稱</FONT></A></TD>這是一個單元格的代碼。上圖是四個單元格，是由這么四行代碼組成的。你需要幾個單元格就加幾行單元格代碼。
color=#ff0000 這是字體顏色代碼，#ff0000 是紅色，你根據(jù)需要到“顏色代碼大全”里選擇。
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>
看看效果：
日志名稱日志名稱日志名稱日志名稱日志名稱日志名稱日志名稱日志名稱日志名稱日志名稱日志名稱日志名稱點擊查看：“常用背景素材薈萃”騰飛向您問好！
