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

风语无言的博客

-------------------感悟人生风雨,留下岁月印迹

 
 
 

日志

 
 

博客首页导航的制作  

2010-03-07 12:12:37|  分类: 博客制作 |  标签: |举报 |字号 订阅

  下载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>

 

二、双框导航代码:

 

效果

 
导航的制作 - 小小紫薇星 - 清水漪澜

  相逢是首歌

导航的制作 - 小小紫薇星 - 清水漪澜

  祝福你一生

 

<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>

 

 

三、四框导航代码: 
效果:
 

导航的制作 - 小小紫薇星 - 清水漪澜

随笔杂谈

导航的制作 - 小小紫薇星 - 清水漪澜

 共同学习

导航的制作 - 小小紫薇星 - 清水漪澜

 音画欣赏

导航的制作 - 小小紫薇星 - 清水漪澜

 美图欣赏

<P align=center>
<TABLE borderColor=#ff0000 cellSpacing=8 cellPadding=0 width="250" bgColor=#080808 border=5>
<TBODY>
<TR>
<TD><a href="
http://xuzhichao385.blog.163.com/blog/static/37738768200791474914846/" target="_blank"><IMG height=180 src="http://img.blog.163.com/photo/vpfcTtjuOWqMjyyQgx9ZzA==/850054429667093149.jpg" width=125></A>
<P><a href="
http://xuzhichao385.blog.163.com/blog/static/37738768200791474914846/" target="_blank"><FONT color=#ff0000 size=3>随笔杂谈</FONT></A> </P></TD>
<TD><a href="
http://xuzhichao385.blog.163.com/blog/static/377387682007916104725840/" target="_blank"><IMG height=180 src="  http://img.blog.163.com/photo/5lZ_k4yc_rW1EYzRpUz8zg==/1734448806492146106.jpg  " width=125></A>
<P>&nbsp;<a href="
http://xuzhichao385.blog.163.com/blog/static/377387682007916104725840/" target="_blank"><FONT color=#ff0000 size=3>共同学习</FONT></A> </P></TD>
<TR>
<TD><a href="
http://xuzhichao385.blog.163.com/blog/static/37738768200791515045620/" target="_blank"><IMG height=180 src="http://img.blog.163.com/photo/ZsnpbirTOhSBWwL9aR41aA==/1762877779139924700.jpg" width=125></A>
<P>&nbsp;<a href="
http://xuzhichao385.blog.163.com/blog/static/37738768200791515045620/edit/" target="_blank"><FONT color=#ff0000 size=3>音画欣赏</FONT></A> </P></TD>
<TD><a href="
http://xuzhichao385.blog.163.com/blog/static/3773876820079151123147/" target="_blank"><IMG height=180 src="http://img.blog.163.com/photo/RCtoxqOrcKXyyZzp426Rzw==/850335904643803776.jpg" width=125></A>
<P>&nbsp;<a href="
http://xuzhichao385.blog.163.com/blog/static/3773876820079151123147/" target="_blank"><FONT color=#ff0000 size=3>美图欣赏</FONT></A> </P></TD>
</TR></TR></TBODY></TABLE></DIV></P>

 

、多框导航代码:

效果:

导航的制作 - 小小紫薇星 - 清水漪澜

 相逢是首歌

导航的制作 - 小小紫薇星 - 清水漪澜

 祝福你一生

导航的制作 - 小小紫薇星 - 清水漪澜

  遇上你是缘

导航的制作 - 小小紫薇星 - 清水漪澜

 真的好想你

导航的制作 - 小小紫薇星 - 清水漪澜

 相逢是首歌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>

 

 

说明:

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

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

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

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

  评论这张
 
阅读(13)| 评论(0)
推荐

历史上的今天

评论

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

页脚

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