作业效果图如图：
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin:0px; 9 padding:0; 10 } 11 .box{ 12 width: 490px; 13 height:44px; 14 padding-left: 5px; 15 margin:100px auto; 16 background:url(img/background.png) bottom repeat-x; 17 } 18 .box ul li{ 19 list-style: none; 20 } 21 .box ul li a{ 22 float:left; 23 width:77px; 24 display: block; 25 font-size: 13px; 26 line-height:42px; 27 text-decoration: none; 28 text-align:center; 29 color: #727983; 30 } 31 .box ul li a:hover{ 32 color: white; 33 line-height: 37px; 34 background: url(img/background2.png) top repeat-x; 35 } 36 </style> 37 38 </head> 39 <body> 40 <div class = "box"> 41 <ul> 42 <li><a href = "#"><b>sample</b></a></li> 43 <li><a href = "#"><b>sample</b></a></li> 44 <li><a href = "#"><b>sample</b></a></li> 45 <li><a href = "#"><b>sample</b></a></li> 46 <li><a href = "#"><b>sample</b></a></li> 47 </ul> 48 </div> 49 </body> 50 </html>