列表导航栏实例（04）——精美模板赏析
生活随笔
收集整理的這篇文章主要介紹了
列表导航栏实例（04）——精美模板赏析
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
【出處】http://www.instantshift.com/2009/09/29/99-high-quality-free-xhtmlcss-templates/
一、效果
二、HTML
<!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" /><link href="css/reset.css" rel="stylesheet" type="text/css" /><link href="css/layout.css" rel="stylesheet" type="text/css" /><title>無標(biāo)題頁</title> </head> <body><div id="container"><div id="masthead"><h1><a href="#">Portfolio Web Design</a></h1><ul><li id="home"><a href="">Home</a></li><li id="portfolio"><a href="#">Portfolio</a></li><li id="services"><a href="#">Services</a></li><li id="contact"><a href="#">Contact</a></li></ul></div></div> </body> </html>?
三、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; }
?
轉(zhuǎn)載于:https://www.cnblogs.com/java20130723/archive/2012/09/13/3211596.html
總結(jié)
以上是生活随笔為你收集整理的列表导航栏实例（04）——精美模板赏析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UVA532 - Dungeon Mas
- 下一篇： 对makefile中，变量定义中 通配符