<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; /*盒子外边距*/ padding: 0px; /*盒子内边距*/ } .NavigatorView { width: 100%; height: 50px; background-color:cadetblue; } .NavigatorView div{ height: 50px; width: 80%; margin-left: 17%; margin-right: 17%; } .NavigatorView div ul { list-style-type: none; /*去掉ul的无标号的 点， 即 无标记 */ } .NavigatorView div ul li { float: left; /* 左浮动 */ } .NavigatorView div ul li a { display: block; /* 块状显示，在元素后面换行，显示下一个块元素*/ height: 50px; width: 130px; text-align:center; text-decoration: none; /*去除链接下的横线*/ line-height: 50px; /*文本行高*/ color:black; } .NavigatorView div ul li a:hover{ background-color: YellowGreen; height: 50px; width: 130px; text-align:center; display: block; } .head { height: 120px; width: 100%; background-color: aliceblue; } </style> </head> <body> <div class="head"></div> <div class="NavigatorView"> <div> <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> </ul> </div> </div> </body> </html>
原文：http://www.cnblogs.com/xuewuzhijing95hao/p/7231542.html