论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

如何实现hover悬停链接文字产生阴影?

文章类别:div+css布局 | 发表日期:2008-9-26 11:13:13

  
  在前面,我们说过了链接文字的下划线的一些情况,现在我们考虑如何实现链接文字产生阴影?当鼠标移到链接文字上时,链接文字可以改变颜色,并产生一定的阴影而营造出立体效果,一定比较引人注目。

  链接文字阴影效果CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
ul,li{ margin:0px; padding:0px; list-style-type: none;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li{ float:left; margin-left:30px;}
#nav span{display:none;}
#nav a{font-size:12px; font-weight:800; color:#c00; text-decoration:none; display:block;}
#nav a:hover{ color:#999;top:1px; left:1px; position:relative;}
#nav a:hover span{ display:block; top:-1px; left:-2px; position:absolute; color:#000; cursor:pointer;}

  链接文字阴影效果XHTML代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id="nav">
<ul>
<li><a href="http://www.21shipin.com/">21shipin HomePage<span>21shipin HomePage</span></a></li>
<li><a href="http://www.21shipin.com/">Div CSS教程<span>Div CSS教程</span></a></li>
<li><a href="http://www.21shipin.com/">CSS布局实例<span>CSS布局实例</span></a></li>
<li><a href="http://www.21shipin.com/">CSS2.0教程<span>CSS2.0教程</span></a></li>
<li><a href="http://www.21shipin.com/">CSS在线手册<span>CSS在线手册</span></a></li>
<li><a href="http://www.21shipin.com/">Web标准<span>Web标准</span></a></li>
<li><a href="http://www.21shipin.com/">XHTML教程<span>XHTML教程</span></a></li>
</ul>
</div>

  链接文字阴影效果实例:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058