導航菜單不僅只有豎直排列,通過設置<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>標籤製作菜單所無法實現的