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

雨后秋荷

用微笑面对生活 用真情书写生活

 
 
 

日志

 
 

【引用】五种实用的首页导航代码  

2011-04-19 16:55:01|  分类: 学习工具 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自無為居士《五种实用的首页导航代码》

一、文字式(简洁)

代码:

<DIV style="LEFT: 165px; ; TOP: 194px">

<TABLE cellSpacing=0 cellPadding=0 width=550 border=0>

<TBODY>

<TR>

<TD>

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

</TD></TR></TBODY></TABLE></DIV>

 

效果:健康生活时尚潮流

【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷

 

二、标签式

代码:

 <P><FONT size=2>·</FONT><A href="地址" target=_blank><FONT color=#ff3300 size=2>题目

</FONT></A></P>

<P><FONT size=2>·</FONT><A href="地址" target=_blank><FONT color=#ff3300 size=2>题目

 </FONT></A></P>

<P><FONT size=2>·</FONT><A href="地址" target=_blank><FONT color=#ff3300 size=2>题目

</FONT></A></P>

<P><FONT size=2>·</FONT><A href="地址" target=_blank><FONT color=#ff0000 size=2>题目

</FONT></A></P>

 

说明:

把自己日志中的地址和题目替换代码中的地址和题目,最多可加到2000个字符,然后填加到首页自定义模块里。

 效果:

?题目

?题目

?题目

?题目

 【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷

  

三、表格式1

<HR width="100%" color=#0000ff SIZE=10>

 

<TABLE cellSpacing=1 cellPadding=0 width=700 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#ffffcc height=40>

<TD width="100%">

<P></P><A href="http://kawzhubing.blog.163.com/edit/">我的日志导航</A>

<P align=center></P></TD></TR></TBODY></TABLE>

<P></P>

<P style="TEXT-INDENT: 2em">

<TABLE cellSpacing=1 cellPadding=0 width=700 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#00cc00 height=20>

<TD width="33.3%">我的心情故事</TD>

<TD width="33.3%">两性之门</TD>

<TD width="33.3%">博客学堂</TD></TR></TBODY></TABLE></P>

<P style="TEXT-INDENT: 2em">

<TABLE cellSpacing=1 cellPadding=0 width=700 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#ffffcc height=20>

<TD width="33.3%"><A href="地址">标题 </A></TD>

<TD width="33.3%"><A href="地址">标题</A></TD>

<TD width="33.3%"><A href="地址">标题</A></TD></TR></TBODY></TABLE></P>

<P style="TEXT-INDENT: 2em">

<TABLE cellSpacing=1 cellPadding=0 width=700 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#ffffcc height=20>

<TD width="33.3%"><A href="地址">标题 </A></TD>

<TD width="33.3%"><A href="地址">标题</A></TD>

<TD width="33.3%"><A href="地址">标题</A></TD></TR></TBODY></TABLE></P>

<P style="TEXT-INDENT: 2em">

<TABLE cellSpacing=1 cellPadding=0 width=700 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#ffffcc height=20>

<TD width="33.3%"><A href="地址">标题</A></TD>

<TD width="33.3%"><A href="地址">标题<A></TD>

<TD width="33.3%"><A href="地址">标题</A></TD></TR></TBODY></TABLE></P>

<HR width="100%" color=#0000ff SIZE=10>

 

说明:

1、width="33.3%"是横格,100%分成三份。如是四个横格,就是25%。以此类推。

2、height=20 每格的高度。将代码中的“地址”和“标题”换成自己文章的地址和标题。

<HR width="100%" color=#0000ff SIZE=10> 是上下蓝色条代码,可换上自己喜欢的颜色。

3、Color=#ffffcc 颜色可调。

4、如想增加表格 按上面代码的规律可继续填加。

 

效果:


我的日志导航

 

标题 标题 标题

标题 标题 标题

标题 标题标题


【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷 【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷

 

 

四、表格式2

代码:

<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#1">你的文字</A></TD>

<TD width="33%"><A href="链接地址#2">你的文字</A></TD>

<TD width="33%"><A href="链接地址#3">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#4">你的文字</A></TD>

<TD width="33%"><A href="链接地址#5">你的文字</A></TD>

<TD width="33%"><A href="链接地址#6">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#7">你的文字</A></TD>

<TD width="33%"><A href="链接地址#8">你的文字</A></TD>

<TD width="33%"><A href="链接地址#9">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#10">你的文字</A></TD>

<TD width="33%"><A href="链接地址#11">你的文字</A></TD>

<TD width="33%"><A href="链接地址#12">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#13">你的文字</A></TD>

<TD width="33%"><A href="链接地址#14">你的文字</A></TD>

<TD width="33%"><A href="链接地址#15">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#16">你的文字</A></TD>

<TD width="33%"><A href="链接地址#17">你的文字</A></TD>

<TD width="33%"><A href="链接地址#18">你的文字</A></TD></TR></TBODY></TABLE>

效果:

你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字

 

【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷 【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷

 

五、图片导航类

三列代码:

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

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

 

两列代码:

<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=0 width="80%" bgColor=#080808 border=3>

<TBODY>

<TR>

<TD><A href=" http://kawzhubing.blog.163.com/blog/static/430258152008112101227999" target=_blank><IMG height=80 src=" http://img.blog.163.com/photo/jqipOrLWyMbQ1aDJftbzCg==/601793500207686817.jpg" width=80 border=0></A>

<P>&nbsp;<A href=" http://kawzhubing.blog.163.com/blog/static/430258152008112101227999" target=_blank><FONT color=#ff0000 size=2>想我不相忘的收藏</FONT></A> </P>

</TD>

<TD><A href=" http://kawzhubing.blog.163.com/blog/static/43025815200811593953972" target=_blank><IMG height=80 src=" http://img.blog.163.com/photo/SJi9pqKQrsZc6fyKMe4zJw==/582371726814840693.jpg" width=80 border=0></A>

<P>&nbsp;<A href=" http://kawzhubing.blog.163.com/blog/static/43025815200811593953972" target=_blank><FONT color=#ff0000 size=2>开怀大笑</FONT></A> </P>

</TD>

</TR></TR></TR></TBODY></TABLE>

 

说明:

1、导航地址即是你的日志地址。必须去日志后的/edit/,否则就答非所问了。

2、borderColor是图片外框线颜色,可调。

3、bgColor是背景颜色,可调。

4、color=#ff0000是字体颜色,可调。

5、width="80%是边框大小,可以根据自己模块大小调节。

6、从美观的角度看,其余的项目可以不用调。

 

效果:

【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷

 收藏

【引用】五种实用的首页导航代码 - 标准莲花 - 雨后秋荷

 开怀大笑   

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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