列表导航栏实例(04)——精美模板赏析
2012-09-13 00:11
232 查看
【出处】http://www.instantshift.com/2009/09/29/99-high-quality-free-xhtmlcss-templates/
一、效果
二、HTML
三、CSS
一、效果
二、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>无标题页</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; }
相关文章推荐
- 列表导航栏实例(04)——精美模板赏析
- 列表导航栏实例(02)——精美电子商务网站赏析
- 列表导航栏实例(03)——精美电子商务网站赏析
- 列表导航栏实例(02)——精美电子商务网站赏析
- 列表导航栏实例(03)——精美电子商务网站赏析
- 列表导航栏实例-精美电子商务网站赏析
- 经典导航栏04,一个精彩的JS+CSS精彩导航实例
- 列表导航栏实例(01)
- 数据列表DataList模板之实例
- 数据列表DataList模板之实例
- 数据列表DataList模板之实例
- 模板数据数据列表DataList模板之实例
- 数据列表DataList模板之实例
- 列表导航栏实例(01)
- jquery控制左右箭头滚动图片列表的实例
- Android应用底部导航栏(选项卡)实例(TabHost&TabActivity)
- Selenium2学习-010-WebUI自动化实战实例-008-Selenium 操作下拉列表实例-Select
- PHP文件缓存smarty模板应用实例分析
- 15款精美的 WordPress 电子商务网站模板
- listview列表显示系统应用实例代码