效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS初識</title>
<link rel="stylesheet" href="CSS初識樣式表.css">
</head>
<body>
<ul class="menu">
<li class="top"><a href="#" class="top_link" ><span>首頁</span></a></li>
<li class="top"><a href="#" class="top_link" ><span>我的相冊</span></a></li>
<li class="top"><a href="#" class="top_link" ><span>我的日誌</span></a></li>
<li class="top"><a href="#" class="top_link" ><span>我的音樂盒</span></a></li>
<li class="top"><a href="#" class="top_link" ><span>我的介紹</span></a></li>
<li class="top"><a href="#" class="top_link" ><span>留言本</span></a></li>
</ul>
</body>
</html>.menu{
padding: 0 0 0 32px;
margin:0;
list-style: none;
height: 40px;
position:relative;/*給後面添加子元素提供定位*/
font-family:arial,cerdana,sans-serif;
margin-top:50px;
}
/*列表項轉化成塊元素顯示，並向左浮動，實現並列的效果*/
.menu li.top{
float: left;
}
/*定義超鏈接的樣式*/
.menu li a.top_link{
float: left;/*具有塊顯示的功能，不用再聲明塊*/
height: 40px;
line-height: 33px;
color: #bbb;
text-decoration: none;/*清除下劃線*/
font-size: 11px;
font-weight: bold;
padding: 0 0 0 12px;
cursor: pointer;/*手形顯示*/
}
/*設置span元素*/
.menu li a.top_link span{
float: left;
padding: 0 24px 0 12px;/*距離的計算*/
height: 40px;
}
.menu li a.top_link:hover{
color: #000;
background: url(機器貓.jpg) no-repeat;
}
.menu li a.top_link:hover span{
background: url(p_103x196_1.jpg) no-repeat right top;
}