标签:
css实现鼠标经过导航颜色变换效果,如下图:
1、先准备两张图片分别为:nav.jpg、hover.jpg,放到images文件夹里面。
2、准备一个index.html文档,该文档跟images评级,如下图:
index.html的html代码
<div class="nv"> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品介绍</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">联系我们</a></li> </ul> </div>
index.html的css代码
<style type="text/css"> *{margin:0px; padding:0px;} html{background:#ffffff; font-size:12px; font-family:"宋体"; text-decoration:none;} body{margin:auto; padding:auto;} ul{list-style-type:none;} .nv{width:400px; height:30px; margin:auto; padding:auto; background:url(images/nav.jpg)} .nv li{float:left; width:80px; height:30px; line-height:30px; text-align:center;} .nv a{font-size:14px; color:#fff; text-decoration:none; width:80px; height:30px; display:block;} .nv a:hover{background:url(images/hover.jpg); color:#000000;} </style>
标签:
原文地址:http://www.cnblogs.com/ityz/p/4958083.html