css利用A标签的背景可能作出很有意思的效果第1/2页

发布：xyz来源：转载于互联网发布日期：2007-12-11 19:14:57 字体：[增加减小] 类型：转载

这个效果是今天有人写邮件给我问的一个效果，记前以前利用A标签的背景写过一个类似的效果。于是刚刚回来就写了一下他要求的效果！顺便贴出来和大家分享一下，如果你很有创意，那么你一定能作出更有意思的效果。

他提出来的效果，是九天音乐首页一个FLASH的作的效果，要用CSS模仿同样的效果，可能是因为不想用FLASH或是SEO之类的目地。于是用FW作了两张GIF的图片，来模仿这样的效果，由于是是测试用，所以图片等很多方面没有考虑的特别细。有些粗糙，但看上去还是有那么点意思的，呵呵……
首先说一下：a:link、a:visited、a:hover、a : active：可能有人说我这是废话，但如果是新手看到了这个，会很有用的，别人告诉你的东西，总比自已悟上半天的快。

[复制此代码]CODE:

a:link{}  
a:visited {}  
a:hover {}  
a:active {}  

以上语句分别定义了“正常链接”“已访问过的链接”“鼠标停在上方时”“点下鼠标时”的样式。
对于新手，这里千万要注意，在书写的过程中，这四行的顺序千万要按上边的次序来写，否则显示出来的效果会和预想的不一样。简单的记忆方面就是“LVHA”。love ha.
以下是制用这个效果要用到的两张图片：

以下是CSS部分：

[复制此代码]CODE:

<style>  
*{ margin:0; padding:0; list-style:none; }  
body{ font-size:12px; line-height:1.8; padding:50px; background: #333; font-family:Verdana;}  
#test{ border:1px solid #000; padding:20px; float:left; background:#666666}  
#test li{float:left;margin-left:20px;}  
#test a{display:block;width:83px; line-height:79px;text-decoration:none; border:1px solid #000; text-align:center;}  
#test a:link,#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}  
#test a:hover,#test a:active{color:#000;background:url(/upload/20071211191456897.gif); border:1px solid #FF6600;}   
</style> 

以下是布局部分：
程序代码

[复制此代码]CODE:

<div id="test">  
  <ul>  
    <li><a href="http://www.sky618.com">test1</a></li>  
    <li><a href="http://www.sky618.com">test2</a></li>  
    <li><a href="http://www.sky618.com">test3</a></li>  
    <li><a href="http://www.sky618.com">test4</a></li>  
  </ul>  
</div> 

以下是效果：

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>css test-天空618-IT技术</title> 
<style> 
*{ margin:0; padding:0; list-style:none; } 
body{ font-size:12px; line-height:1.8; padding:50px; background: #333; font-family:Verdana;}

#test{ border:1px solid #000; padding:20px; float:left; background:#666666} 
#test li{float:left;margin-left:20px;}

#test a{display:block;width:83px; line-height:79px;text-decoration:none; border:1px solid #000; text-align:center;} 
#test a:link,#test a:visited{color:#000;background:url("../../../upload/20071211191456983.gif");} 
#test a:hover,#test a:active{color:#000;background:url(/upload/20071211191456897.gif); border:1px solid #FF6600;}  
</style> 
</head> 
<body>
<style type="text/css">
.t14pt1024           {color:#000000; font-size:14px; line-height:26px;}
a.t14pt1024:link     {color:#000000; text-decoration:none;}
a.t14pt1024:visited  {color:#000000; text-decoration:none;}
a.t14pt1024:hover    {color:#ff0000; text-decoration:none;}
</style>
<table width="938" border="0" align="center" cellpadding="0" cellspacing="0" 
bgcolor="#FFFFFF">
  <tr> 
    <td width="220" valign="middle"><table width="100%"  border="0" cellspacing="0" 
cellpadding="0">
  <tr>
    <td width="15"></td>
    <td><a href="/index.htm" target="_blank"><img src="/skin/default/j_logo.gif" 
width="144" height="52" hspace="3" vspace="2" border="0"></a></td>
  </tr>
</table></td>
    <TD align=right vAlign=bottom bgcolor="#F0F8FF"><table width="100%" border="0" 
align="right" cellpadding="0" cellspacing="0">
        <tr> 
    <td height="24"><A class=t14pt1024 href="http://www.sky618.com" target=_blank>首页
</A><SPAN class=t14pt1024> | </SPAN><A class=t14pt1024 href="/newsys/lyjs/Index.html" 
target=_blank>路由技术</A><SPAN class=t14pt1024> | </SPAN><A class=t14pt1024 
href="/col/3723/3723.html" target=_blank>交换技术</A><SPAN class=t14pt1024> | </SPAN><A 
class=t14pt1024 href="/col/3735/3735.html" target=_blank>接入技术</A><SPAN 
class=t14pt1024> | </SPAN><A class=t14pt1024 href="/col/3775/3775.html" target=_blank>综
合布线</A><SPAN class=t14pt1024> | </SPAN><A class=t14pt1024 href="/col/3729/3729.html" 
target=_blank>网络管理</A><SPAN class=t14pt1024> | </SPAN><A 
class=t14pt1024 href="/newsys/wlaq/Index.html" target=_blank>网络安全</A><SPAN 
class=t14pt1024> | </SPAN><A class=t14pt1024 href="/html/list/index_86.htm" 
target=_blank>操作系统</A><SPAN 
class=t14pt1024> | </SPAN><A class=t14pt1024 href="/newsys/syjq/Index.html" 
target=_blank>实用技巧</A>
<SPAN class=t14pt1024> | </SPAN><A class=t14pt1024 href="/col/289/289.html" 
target=_blank>业界动态</A></td>
        </tr>
        <tr> 
    <td height="24"> <A class=t14pt1024 href="/newsys/zxzx/index.html" target=_blank>最
新咨询</A><SPAN class=t14pt1024> | </SPAN><A class=t14pt1024 
href="/newsys/wlbc/index.html" target=_blank>网络编程</A><SPAN class=t14pt1024> | 
</SPAN><A class=t14pt1024 href="/newsys/rjbc/index.html" target=_blank>软件编程</A><SPAN 
class=t14pt1024> | </SPAN><A class=t14pt1024 href="/newsys/jbjs/index.html" 
target=_blank>脚本技术</A><SPAN class=t14pt1024> | </SPAN><A class=t14pt1024 
href="/newsys/wyzz/index.html" target=_blank>网页制作</A><SPAN class=t14pt1024> | 
</SPAN><A class=t14pt1024 href="/newsys/wzjq/index.html" target=_blank>网站技巧</A><SPAN 
class=t14pt1024> | </SPAN><A class=t14pt1024 href="/newsys/sjk/index.html" 
target=_blank>数据库</A><SPAN class=t14pt1024>  | </SPAN><A class=t14pt1024 
href="/newsys/jpsc/index.html" target=_blank>精品收藏</A><SPAN class=t14pt1024> | </SPAN><A class=t14pt1024 href="/newsys/mfzy/index.html" target=_blank>免费资源</A><SPAN class=t14pt1024> | </SPAN><A class=t14pt1024 href="/online/index.htm" target=_blank>在线书店</A></td>
        </tr>
      </table></TD>
  </tr>
</table>
<table width="938" border="1" align="center" cellpadding="0" cellspacing="0"  
style="border-collapse: collapse">
  <tr> 
    <td width="65%" height="33">                
<iframe id="baiduframe" marginwidth="0" marginheight="0" scrolling="no"
  framespacing="0" vspace="0" hspace="0" frameborder="0" width="960" height="40" 
  src="http://unstat.baidu.com/bdun.bsc?
tn=so700_pg&cv=0&cid=1087732&csid=301&bgcr=ffffff&ftcr=000000&urlcr=0000ff&tbsz=260&srop
ls=1,2,3,4,5,6">
</iframe>
              </td>
  </tr>
</table>
<table width="960" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td >
<script language="javascript" src="/adfile/indexmid.js"></script>
</td>
    </tr>
  </table>
<script type="text/javascript" language="javascript"></script> 
 <script type="text/javascript" src="http://js.coogao.cn/jscode/magicboxad.js"></script> 
<div id="test"> 
  <ul> 
    <li><a href="../../../index.htm" >test1</a></li> 
    <li><a href="../../../index.htm" >test2</a></li> 
    <li><a href="../../../index.htm" >test3</a></li> 
    <li><a href="../../../index.htm" >test4</a></li> 
  </ul> 
</div> 
</body> 
</html><INPUT onclick="runEx('runcode85189')" type="button" value="运行代码"/> <INPUT onclick="doCopy(runcode85189)" type="button" value="复制代码"/> <INPUT onclick="doSave(runcode85189)" type="button" value="保存代码"/>[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]</div><BR>
<div id="art_xg">
<h4>相 关 资 料</h4>
<div id="con_ad2"></div>

</div>
<div id="numstyle">当前1/2页 <a href="13116.htm" ><strong>1</strong></a><a href="13116_2.htm" >2</a><a href="13116_2.htm" >下一页</a></div>
</div>
<div class=blank3></div>

<div class="sm"><script type="text/javascript" src="../../../../jsad/inc/sm.js" ></script></div>
<div class="con_ff">
浏览次数：<span class="shownum" id="thehit">载入中...</span> <a href="javascript:doPrint();" class="button_link">打印本文</a><a href="javascript:window.opener=null;window.close();" class="button_link">关闭本文</a><a href="../../../index.htm"  class=button_link>返回首页</a>
</div>
<div class="blank3"></div>
<span id="con_tj_tp"><script type="text/javascript">showbanner(6,1);</script></span>
<script type="text/javascript">
if ($("con_tj")){
$("con_tj").innerHTML=$("con_tj_tp").innerHTML;
}else{
$("con_ad1").innerHTML=$("con_tj_tp").innerHTML;
}
$("con_tj_tp").innerHTML="";
</script>
<span id="con_ad2_tp"><script type="text/javascript">showbanner(5,1);</script></span>
<script type="text/javascript">
$("con_ad2").innerHTML=$("con_ad2_tp").innerHTML;
$("con_ad2_tp").innerHTML="";
</script>
<script type="text/javascript">
document.body.oncopy = function () { 
	setTimeout( function () { 
		var text = clipboardData.getData("text");
		if (text) { 
			text = text + "\r\n本文来自: 天空618(www.sky618.com) 详细出处参考："+location.href; clipboardData.setData("text", text);
		} 
				}, 100 ) 
}
</script>
<div class=blank3></div>
<div class="conad"><script src="../../../../jsad/adsense/1.js" ></script></div>
<div class="blank3"></div>
<div id="prenext">
<ul><li>上一篇文章：<a href="13115.htm" >DL.DT.DD实现左右的布局简单例子</a></li><li>下一篇文章：<a href="13198.htm" >css强制换行 css强制不换行的css方法</a></li></ul>
</div>

<div class=blank3></div>
</div>
</div>
<div class="dxy_main_r">
<div><script src="../../../../jsad/imgby/r_1.js" ></script></div>
<div class=blank3></div>
<DIV class="r_title"><H6>同 类 文 章</H6></div>
<div class="rightContent">
<ul><li><a href="../../200704/78/9382.htm"  title="用&lt;TABLE&gt;语句来实现圆角表格可以省去制作圆角图片之苦！">用&lt;TABLE&gt;语句来实现圆角表</a></li><li><a href="../../200703/78/8077.htm"  title="position:relative/absolute无法冲破的等级">position:relative/absolute无法冲破的等</a></li><li><a href="../../200612/78/5240.htm"  title="解决鼠标在 flash 链接上不停闪动的问题（web页面中）">解决鼠标在 flash 链接上不停闪动的问题（</a></li><li><a href="../../200703/78/7590.htm"  title="制作WEB在线编辑器-插入HTML标签">制作WEB在线编辑器-插入HTML标签</a></li><li><a href="../../200701/78/6023.htm"  title="CSS中常用的单位">CSS中常用的单位</a></li><li><a href="../../200711/78/12834.htm"  title="div+css实现自适应宽度按钮">div+css实现自适应宽度按钮</a></li><li><a href="../../200709/78/12366.htm"  title="创建IE各版本专属CSS IE中的if语句">创建IE各版本专属CSS IE中的if语句</a></li><li><a href="../../200612/78/5162.htm"  title="Div+Css(+Js)菜单代码及制作工具">Div+Css(+Js)菜单代码及制作工具</a></li><li><a href="13149.htm"  title="css布局网页水平居中常用方法">css布局网页水平居中常用方法</a></li><li><a href="../../200705/78/9994.htm"  title="CSS优化2-(常用CSS缩写语法总结)">CSS优化2-(常用CSS缩写语法总结)</a></li></ul>
</div>
<div class=blank3></div>
<div><script src="../../../../jsad/imgby/r_2.js" ></script></div>
<div class=blank3></div>
<DIV class="r_title"><H6>最 近 更 新</H6></div>
<div class="rightContent">
<ul><li><a href="../../200704/78/9170.htm"  title="都是IE惹的祸多浏览器兼容问题">都是IE惹的祸多浏览器兼容问题</a></li><li><a href="../../200703/78/7978.htm"  title="关于《精通css》之几个不错的注意事项">关于《精通css》之几个不错的注意事项</a></li><li><a href="../../200701/78/6477.htm"  title="用css制作星级评分">用css制作星级评分</a></li><li><a href="../../200709/78/11316.htm"  title="在解决ul居中问题时想到的几点">在解决ul居中问题时想到的几点</a></li><li><a href="../../200709/78/12366.htm"  title="创建IE各版本专属CSS IE中的if语句">创建IE各版本专属CSS IE中的if语句</a></li><li><a href="../../200711/78/12961.htm"  title="CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法">CSS hack实现 CSS完美兼容IE6/IE7/FF的通</a></li><li><a href="../../200701/78/6095.htm"  title="中文排版CSS心得">中文排版CSS心得</a></li><li><a href="../../200705/78/9995.htm"  title="font和line-height之CSS代码书写顺序不同，导致显示效果不一样">font和line-height之CSS代码书写顺序不同</a></li><li><a href="../../200612/78/5178.htm"  title="又一个典型css实例">又一个典型css实例</a></li><li><a href="../../200611/78/4342.htm"  title="css静态滤镜 + A:Hover">css静态滤镜 + A:Hover</a></li></ul>
</div>
<div class=blank3></div>
<div><script src="../../../../jsad/imgby/r_3.js" ></script></div>
<div class=blank3></div>
<DIV class="r_title"><H6>热 点 排 行</H6></div>
<div class="hotContent">
<ul class="topnum"><li class="top1"><a href="../../200701/78/5959.htm"  title="用CSS实现下拉菜单的多种方法">用CSS实现下拉菜单的多种方法</a></li><li class="top2"><a href="../../200703/78/8839.htm"  title="DIV+CSS布局教程大全与pdf电子书 下载">DIV+CSS布局教程大全与pdf电子书</a></li><li class="top3"><a href="../../200703/78/8417.htm"  title="非常漂亮的Div+CSS布局入门教程">非常漂亮的Div+CSS布局入门教程</a></li><li class="top4"><a href="../../200701/78/6534.htm"  title="在iframe中隐藏横向滚动条的方法大全">在iframe中隐藏横向滚动条的方法</a></li><li class="top5"><a href="../../200704/78/9292.htm"  title="让iframe自适应高度（支持xhtml）IE firefox兼容">让iframe自适应高度（支持xhtml）</a></li><li class="top6"><a href="../../200703/78/8774.htm"  title="用css来控制图片大小显示的实现方法与代码">用css来控制图片大小显示的实现方</a></li><li class="top7"><a href="../../200611/78/4175.htm"  title="div做细线表格,很强悍">div做细线表格,很强悍</a></li><li class="top8"><a href="../../200703/78/8798.htm"  title="比较漂亮的一个导航条的效果DIV+CSS">比较漂亮的一个导航条的效果DIV+</a></li><li class="top9"><a href="../../200611/78/4373.htm"  title="让2个DIV居中并排显示">让2个DIV居中并排显示</a></li><li class="top10"><a href="../../200612/78/5041.htm"  title="用CSS打造 抽屉菜单">用CSS打造 抽屉菜单</a></li></ul>
</div>
<div class=blank3></div>
<div><script src="../../../../jsad/imgby/r_4.js" ></script></div>
</DIV>
<div class=clear></div>
</div>
<div class="blank3"></div>
<div id="footer">
  <div id="footerinfo">
    <div id="footercontent"><a href="../../200608/56/569.htm" >关于本站</a> - <a href="../../../support.htm" >广告合作</a> - <a href="../../../linkus.htm" >联系我们</a> -  <a href="../../200608/56/547.htm" >免责声明</a> -  <a href="../../../sitemap.htm" >网站地图</a> - <a href="../../../guestbook.htm" >意见反馈</a> - <a href="#top">返回顶部</a></div>
    <div id="footercopyrights">天空618-sky618-最专业的IT技术网站。<a href='http://www.miibeian.gov.cn/'" >鄂ICP备07502852号</a><br />
      <span>Copyright © 2006-2007 www.sky618.com online services. All rights reserved. . </span><br />
	  
    </div>
  </div>
</div>
<div id="logo_m-tp">
</div>
<div id="mainad2-tp">
<script type="text/javascript" src="../../../../jsad/imgby/main760b.js" ></script>
</div>
<script type=text/javascript language=javascript src="../../../../jsad/inc/big5style.js" ></script>
<script type="text/javascript" src="../../../../jsad/inc/con_ad.js" ></script>
<div style="display:none"><script src="../../../../jsad/inc/tongji.js"  language=javascript></script></div>
<script src="../../../../jsad/admin/hits.asp-id=13116" ></script><script src="../../../../jsad/pl_counts.asp-id=13116" ></script>
</body>
</html>