一个普通的导航,带反选效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="blog%20css.css" type="text/css"/> <title>hover事件的导航</title> </head> <body> <div id="nav"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">新随笔</a></li> <li><a href="#">留 言</a></li> </ul> </div> </body> </html>
body{ margin:0; padding:0: } a{ text-decoration: none; } li{ list-style: none; } #nav{ margin:0 auto; } li{ display: block; float:left; height:30px; } a{ display: inline-block; width: 100px; text-align: center; height:30px; line-height: 30px; color:#fff; background-color: aqua; } a:hover{ color:aqua; background-color: #fff; }
效果