实例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul{
float:left;
list-style-type:none;
width:100%;
padding:0;
margin:0;
}
a{
float:left; /*设置链接左浮动*/
width:100px;
text-decoration:none; /*取消链接下划线 */
color:white;
background-color:purple; /* 设置链接的背景颜色*/
padding:0.2em 0.6em; /* 设置链接的内边距*/
border-right:1px solid white;/* 设置链接的边框颜色*/
}
a:hover{
background-color:red;/* 当鼠标移动到链接的时候变为红色*/
}
li{
display:inline; /* 设置li为内联元素*/
}
</style>
</head>
<body>
<h3>制作水平菜单</h3>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link frou</a></li>
<li><a href="#">Link five</a></li>
</ul>
<body>
</html>
运行效果：
评论