XHTML CSS应用教程——CSS实现文字的双影
本例子利用CSS实现了当鼠标经过的时候出现文字双影的效果。实际效果:
代码及简要分析:
<style type="text/css">
ul,li{list-style-type: none;}
#nav li{ float:left; margin-left:30px;}
#nav span{display:none;}
#nav a{font-size:12px;font-weight: bold;text-decoration: none;
display:block;}
#nav a:hover{ top:1px; left:1px; position:relative;}
#nav a:hover span{ display:block; top:-3px; left:-3px;
position:absolute; color:FF3300;}
</style> …… <div id="nav">
<ul>
<li><a href="http://www.cainiao8.com/">菜鸟吧<span>菜鸟吧</span></a></li>
<li><a href="http://www.cainiao8.com/">菜鸟吧<span>菜鸟吧</span></a></li>
<li><a href="http://www.cainiao8.com/">菜鸟吧<span>菜鸟吧</span></a></li>
<li><a href="http://www.cainiao8.com/">菜鸟吧<span>菜鸟吧</span></a></li>
<li><a href="http://www.cainiao8.com/">菜鸟吧<span>菜鸟吧</span></a></li>
</ul>
</div>