列表导航栏实例（04）——精美模板赏析

【出处】http://www.instantshift.com/2009/09/29/99-high-quality-free-xhtmlcss-templates/

一、效果

二、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;
}

 

转载于:https://www.cnblogs.com/WestGarden/archive/2012/09/13/3138326.html