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

人无癖不可与交,以其无深情也。

人无疵不可与交,以其无真情也。

 
 
 

日志

 
 

背景图制作文字横排超链接技巧  

2011-05-30 06:03:41|  分类: 导航靓模 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  

页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。
 

背景图制作文字超链接

编辑制作:幽谷星尘
一、在背景图上制作表格超链接效果
 

     效果图 :

html常用语法 html语法教学 html语言教程 html语法效果 html实用教程
html完全教程 html语法大全 html语法教学 html语法集萃 html语法学习
博客美化教程 博客代码宝典 博客代码集锦 博客代码大全 博客代码概览
博客资源共享 最新博客代码 博客学堂素材 博客素材大全 博客特效代码

 

 代码:

 <DIV>
<P align=center>
<TABLE style="WIDTH: 468px; HEIGHT: 300px" borderColor=#383f38 cellSpacing=6 cellPadding=0 background=http://img.blog.163.com/photo/O6IeUGkrlhAViAIlSMP7qA==/2569866537368676352.jpg

border=1>
<TBODY>
<TR>
<TD><A href="
http://www.fpvision.com.cn/InfoView/Article_46482.html" target=_blank><FONT color=#cc6600>html常用语法</FONT></A></TD>
<TD><A href="
http://chinese.allproducts.com.tw/GB/html/" target=_blank><FONT color=#cc6600>html语法教学</FONT></A></TD>
<TD><A href="
http://www.gzsums.edu.cn/webclass/html/html_design.html" target=_blank><FONT color=#cc6600>html语言教程</FONT></A></TD>
<TD><A href="
http://www.haofa.net/csstx/html.htm" target=_blank><FONT color=#cc6600>html语法效果</FONT></A></TD>
<TD><A href="
http://www.eonet.ne.jp/~qingshuix/HTMLmulu/HTMLyjml.htm" target=_blank><FONT color=#cc6600>html实用教程</FONT></A></TD>
<TR>
<TD><A href="
http://xiaomanyao.blog.enorth.com.cn/article/38698.shtml" target=_blank><FONT color=#cc6600>html完全教程</FONT></A></TD>
<TD><A href="
http://www.7880.com/Info/Article-2668c380.html" target=_blank><FONT color=#cc6600>html语法大全</FONT></A></TD>
<TD><A href="
http://www.powmo.com/ae.html" target=_blank><FONT color=#cc6600>html语法教学</FONT></A></TD>
<TD><A href="
http://www.coolpc.com.cn/html/daima/20070729/6318.html" target=_blank><FONT color=#cc6600>html语法集萃</FONT></A></TD>
<TD><A href="
http://www.gujiwenxian.cn/post/100.html" target=_blank><FONT color=#cc6600>html语法学习</FONT></A></TD>
<TR>
<TD><A href="
http://gsqybje.blog.163.com/blog/static/1491505200732683829332" target=_blank><FONT color=#cc6600>博客美化教程</FONT></A></TD>
<TD><A href="
http://www.ik68.cn/Default.aspx" target=_blank><FONT color=#cc6600>博客代码宝典</FONT></A></TD>
<TD><A href="
http://www.ik68.cn/Default.aspx" target=_blank><FONT color=#cc6600>博客代码集锦</FONT></A></TD>
<TD><A href="
http://www.bokedm.com/" target=_blank><FONT color=#cc6600>博客代码大全</FONT></A></TD>
<TD><A href="
http://wuliuliu.bokee.com/4397229.html" target=_blank><FONT color=#cc6600>博客代码概览</FONT></A></TD>
<TR>
<TD><A href="
http://daohang.lingd.net/article-55115-1.html" target=_blank><FONT color=#cc6600>博客资源共享</FONT></A></TD>
<TD><A href="
http://www.sozui.com/" target=_blank><FONT color=#cc6600>最新博客代码</FONT></A></TD>
<TD><A href="
http://www.blog286.com/sucai/" target=_blank><FONT color=#cc6600>博客学堂素材</FONT></A></TD>
<TD><A href="
http://www.myboku.com.cn/material/Flash/Index.htm" target=_blank><FONT color=#cc6600>博客素材大全</FONT></A></TD>
<TD><A href="
http://texiao.lingd.net/" target=_blank><FONT color=#cc6600>博客特效代码</FONT></A></TD>
</TR></FONT></A></TD></TR></TR></TBODY></TABLE></P></DIV></DIV>

   

二、在背景图上制作文字横排超链接特效

1、可链接不移动

 效果图:

 

☆王玥珺朋友的博客

☆野玫瑰朋友的博客

☆冰雪梅朋友的博客

☆天涯丽人朋友的博客

 代码:

<TABLE height="330" width="530" background="

http://img.blog.163.com/photo/O6IeUGkrlhAViAIlSMP7qA==/2569866537368676352.jpg" border="0" >  <TBODY>
 <TR>
 <TD align="middle" >

<P align="center" >
<FONT style=" FONT-SIZE: 60pt; FILTER: shadow(color=black); COLOR:RED; FONT-FAMILY: 华文彩云;" >

 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#FF0000" size="8" face="华文行楷" ><h2>☆王玥珺朋友的博客</h2></font></center></a>  </FONT></P><P align="center" >    <a href="http://sg765818342.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆野玫瑰朋友的博客</h2></font></center></a>  </P><P align="center" >   
 <a href="http://www.aid123.com/bxmei/shipin/" ><center><font color="#FF0000" size="6" face="华文行楷" ><h2>☆冰雪梅朋友的博客</h2></font></center></a>  </P><P align="center" > 
 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆天涯丽人朋友的博客</h2></font></center></a>  </P><P align="center" > 
 </P></TD></TR></TABLE>
 

   2、可链接由下向上移动

 效果图:   

☆王玥珺朋友的博客

☆野玫瑰朋友的博客

☆冰雪梅朋友的博客

☆天涯丽人朋友的博客

    代码:

<TABLE height="330" width="530" background="

http://img.blog.163.com/photo/O6IeUGkrlhAViAIlSMP7qA==/2569866537368676352.jpg" border="0" >  <TBODY>
 <TR>
 <TD align="middle" >
 <MARQUEE scrollAmount="4" direction="up" height="300" > 
<P align="center" >
<FONT style=" FONT-SIZE: 60pt; FILTER: shadow(color=black); COLOR:RED; FONT-FAMILY: 华文彩云;" >

 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#FF0000" size="8" face="华文行楷" ><h6>☆王玥珺朋友的博客</h6></font></center></a>  </FONT></P><P align="center" >    <a href="http://sg765818342.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆野玫瑰朋友的博客</h2></font></center></a>  </P><P align="center" >   
 <a href="http://www.aid123.com/bxmei/shipin/" ><center><font color="#FF0000" size="6" face="华文行楷" ><h2>☆冰雪梅朋友的博客</h2></font></center></a>  </P><P align="center" > 
 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆天涯丽人朋友的博客</h2></font></center></a>  </P><P align="center" > 
 </P><P></P></MARQUEE></TD></TR></TABLE>
 

3、可链接由上向下移动

 效果图:

    

☆王玥珺朋友的博客

☆野玫瑰朋友的博客

☆冰雪梅朋友的博客

☆天涯丽人朋友的博客

 代码:

<TABLE height="330" width="530" background="

http://img.blog.163.com/photo/O6IeUGkrlhAViAIlSMP7qA==/2569866537368676352.jpg" border="0" >  <TBODY>
 <TR>
 <TD align="middle" >
 <MARQUEE scrollAmount="4" direction="down" height="300" > 
<P align="center" >
<FONT style=" FONT-SIZE: 60pt; FILTER: shadow(color=black); COLOR:RED; FONT-FAMILY: 华文彩云;" >

 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#FF0000" size="8" face="华文行楷" ><h2>☆王玥珺朋友的博客</h2></font></center></a>  </FONT></P><P align="center" >    <a href="http://sg765818342.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆野玫瑰朋友的博客</h2></font></center></a>  </P><P align="center" >   
 <a href="http://www.aid123.com/bxmei/shipin/" ><center><font color="#FF0000" size="6" face="华文行楷" ><h2>☆冰雪梅朋友的博客</h2></font></center></a>  </P><P align="center" > 
 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆天涯丽人朋友的博客</h2></font></center></a>  </P><P align="center" > 
 </P><P></P></MARQUEE></TD></TR></TABLE>

4、可链接由左向右移动

 

 效果图:

   

☆王玥珺朋友的博客

☆野玫瑰朋友的博客

☆冰雪梅朋友的博客

☆天涯丽人朋友的博客

 代码:

<TABLE height="330" width="530" background="

http://img.blog.163.com/photo/O6IeUGkrlhAViAIlSMP7qA==/2569866537368676352.jpg" border="0" >  <TBODY>
 <TR>
 <TD align="middle" >
 <MARQUEE scrollAmount="4" direction="right" height="300" > 
<P align="center" >
<FONT style=" FONT-SIZE: 60pt; FILTER: shadow(color=black); COLOR:RED; FONT-FAMILY: 华文彩云;" >

 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#FF0000" size="8" face="华文行楷" ><h2>☆王玥珺朋友的博客</h2></font></center></a>  </FONT></P><P align="center" >    <a href="http://sg765818342.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆野玫瑰朋友的博客</h2></font></center></a>  </P><P align="center" >   
 <a href="http://www.aid123.com/bxmei/shipin/" ><center><font color="#FF0000" size="6" face="华文行楷" ><h2>☆冰雪梅朋友的博客</h2></font></center></a>  </P><P align="center" > 
 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆天涯丽人朋友的博客</h2></font></center></a>  </P><P align="center" > 
 </P><P></P></MARQUEE></TD></TR></TABLE>
 

5、可链接由右向左移动

    效果图:

☆王玥珺朋友的博客

☆野玫瑰朋友的博客

☆冰雪梅朋友的博客

☆天涯丽人朋友的博客

 

 代码:

<TABLE height="330" width="530" background="

http://img.blog.163.com/photo/O6IeUGkrlhAViAIlSMP7qA==/2569866537368676352.jpg" border="0" >  <TBODY>
 <TR>
 <TD align="middle" >
 <MARQUEE scrollAmount="4" direction="left" height="300" > 
<P align="center" >
<FONT style=" FONT-SIZE: 60pt; FILTER: shadow(color=black); COLOR:RED; FONT-FAMILY: 华文彩云;" >

 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#FF0000" size="8" face="华文行楷" ><h2>☆王玥珺朋友的博客</h2></font></center></a>  </FONT></P><P align="center" >    <a href="http://sg765818342.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆野玫瑰朋友的博客</h2></font></center></a>  </P><P align="center" >   
 <a href="http://www.aid123.com/bxmei/shipin/" ><center><font color="#FF0000" size="6" face="华文行楷" ><h2>☆冰雪梅朋友的博客</h2></font></center></a>  </P><P align="center" > 
 <a href="http://lianyi2328977.popo.blog.163.com/" ><center><font color="#00FF00" size="6" face="华文行楷" ><h2>☆天涯丽人朋友的博客</h2></font></center></a>  </P><P align="center" > 
 </P><P></P></MARQUEE></TD></TR></TABLE>
 

 

★ 欢迎朋友。感谢您的光临。 ★

 
欢迎光临幽谷星尘家园
欢迎光临幽谷星尘家园
 
 

幽谷星尘家园欢迎你

 

 

4、
  评论这张
 
阅读(869)| 评论(6)

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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