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

`

`

 
 
 

日志

 
 

立体框式浏览导航图的制作  

2010-06-11 08:37:26|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 腾飞立体框式浏览导航图的制作


立体框式浏览导航图的制作

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://img3.3lian.com/2006/013/14/200412121612728659.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://img3.3lian.com/2006/013/14/200412121612728659.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://img3.3lian.com/2006/013/14/200412121612728659.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>

看看效果:

日志名称 日志名称 日志名称 日志名称
日志名称 日志名称 日志名称 日志名称
日志名称 日志名称 日志名称 日志名称

点击查看:“常用背景素材荟萃”

       腾飞的博客 - 腾飞的博客 - .腾飞向您问好!腾飞的博客 - 腾飞的博客 - .

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

历史上的今天

评论

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

页脚

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