导航菜单不仅只有竖直排列,通过设置<li>标记为左浮动,可以使项目列表按水平方向排列
效果图:
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#box{
font-size:12px;
font-family:"宋体";
}
#box ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#box li{
float:left;
}
#box li a{
display:block; /*通过该语句,超链接被设置成块元素,当鼠标移动到该块的任何部分时都会被激活*/
padding:5px 5px 5px 8px;
text-decoration:none;
border:1px solid #711515;
margin:2px;
}
#box li a:link{
background-color:#c11136;
color:#ffffff;
}
#box li a:visited{
background-color:#c11136;
color:#ffffff;
}
#box li a:hover{
background-color:#990020;
color:#ffff00;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">音乐MP3</a></li>
<li><a href="#">个人相册</a></li>
<li><a href="#">我的博客</a></li>
<li><a href="#">我的空间</a></li>
</ul>
</div>
</body>
</html>
提示:采用水平时,如果没有设置<ul>标签的宽度width属性时,当浏览器的宽度缩小时,菜单会自动换行,这是使用<table>标签制作菜单所无法实现的