【出处】

一、效果

二、HTML

    
        
        
            
    
        
     
            
      
                Portfolio Web Design
            
      
                
       
Home
                
       
Portfolio
                
       
Services
                
       
Contact
            
      
        
     
    
    

 

三、CSS

body {  background:#ccc url(../images/body-bg.jpg) repeat-x 0 0;}#container {  width:950px;  margin:0 auto;}#masthead h1 {  display:block;  float:left;  width:269px;  height:121px;  text-indent:-9999px;}#masthead h1 a {  display:block;  width:100%;  height:100%;  background:url(../images/logo.jpg) no-repeat 0 0;  outline:none;}#masthead ul {  display:block;  float:left;  height:121px;  list-style:none;  background:url(../images/nav-sprite.jpg) no-repeat 0 0;}#masthead ul li {  display:block;  height:121px;  float:left;}#home {  width:115px;}#portfolio {  width:160px;}#services {  width:144px;}#contact {  width:147px;}#masthead ul li a {  display:block;  width:100%;  height:100%;  text-indent:-9999px;  outline:none;}li#home a:hover {  background:url(../images/nav-sprite.jpg) no-repeat 0 -121px;}li#portfolio a:hover {  background:url(../images/nav-sprite.jpg) no-repeat -115px -121px;}li#services a:hover {  background:url(../images/nav-sprite.jpg) no-repeat -275px -121px;}li#contact a:hover {  background:url(../images/nav-sprite.jpg) no-repeat -419px -121px;}