摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航</title> <style> *{margin: 0px;padding: 0px;} ul{ margi
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
*{margin: 0px;padding: 0px;}
ul{ margin: 0px;padding: 0px; list-style: none; text-align: center;width: 100%; }
li{display: inline; float: left; border:1px #ccc; padding-left: 2px; background-color:#bebebe; }
a{ display: block; width: 120px;color:#FFFFFF; padding: 2px; text-decoration: none;}
a:hover{background-color: red;}
</style>
</head>
<body>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</body>
</html>内外边距清除*{margin: 0px;padding: 0px;}
水平排列display: inline; a链接去下划线text-decoration: none;
a的伪元素。鼠标移上去变色a:hover{background-color: red;}
