利用两个不同的图片(一张景态,一张动态闪烁),似的链接经过效果变得更加生动。是一个十分不错的思路哦。
<style>
.switch { width:350px; margin:12px 0px 0px 175px; height:30px;
line-height:30px; text-align:center; }
.switch ul { list-style:none; margin:0px;}
.switch li { float:left; padding-left:8px; }
.switch a { background:url(arrow2.gif) no-repeat left; padding-left:10px;
color:#457a8b; font-size:14px; font-weight:bold; }
.switch a:link { background:url(arrow2.gif) no-repeat left;
padding-left:10px; color:#457a8b; }
.switch a:visited { background:url(arrow2.gif) no-repeat left;
padding-left:10px; color:#457a8b; }
.switch a:hover { background:url(arrow1.gif) no-repeat left;
padding-left:10px; color:#78b4c7; }
.switch a:active { background:url(arrow1.gif) no-repeat left;
padding-left:10px; color:#78b4c7; }
</style>
</head>
<body>
<div class="switch">
<ul>
<li><a href="http://www.cainiao8.com/">主页</a></li>
<li><a href="http://www.cainiao8.com/">CSS</a></li>
<li><a href="http://www.cainiao8.com/">背景</a></li>
<li><a href="http://www.cainiao8.com/">切换</a></li>
<li><a href="http://www.cainiao8.com/">动态</a></li>
</ul>
</div>