020导航栏
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QQ会员导航栏</title> <link rel="stylesheet" href="../css/025.css"> </head> <body> <div id="content"> <div id="list"> <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> <li><a href="#">年费专区</a></li> <li><a href="#">超级会员</a></li> <li><a href="#" id="login">登录</a></li> <li><a href="#" id="open">开通超级会员</a></li> </ul> </div> </div> </body> </html>
body{ margin: 0; padding: 0; } #list{ width: 100%; height: 25px; background: #0000FF url(../../image/心白色描边.png) 50px -4px no-repeat; } ul{ list-style: none;/*让小圆点消失*/ margin-left: 150px; margin-top: 0px; height: 50px; line-height: 22px;/*line-height 属性设置行间的距离(行高)*/ } li{ display: inline-block; margin-right: 15px; } a{ color: white; font-size: 12px; text-decoration: none; } #login{ padding: 5px 10px; color: #FAD65C; border: 1px solid #FAD65C; border-radius: 3px;/*设置圆角*/ } a:hover{ color: #FFFF00; } #login:hover{ background: #fad65c; color: white; } #open:hover{ color:blue; background: #FAD65C; }
运行结果: