CSS Sprite制作的鼠标感应网站导航条- 导航代码

当前位置: 首页 > 图文教程 > 网页特效 > 导航代码 > CSS Sprite制作的鼠标感应网站导航条

导航代码: 网页制作的网页下拉菜单（5）; 网页制作的网页下拉菜单（6）; CSS Sprite制作的鼠标感应网站导航条; 100%高度全屏自适应网页布局; 类似按钮效果的网站导航CSS代码

No. « ‹ 1 2 »

技术文章搜索

关键字

导航代码中的 CSS Sprite制作的鼠标感应网站导航条

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 416 ::

收藏到网摘: n/a

网页制作的网页下拉菜单（6） 100%高度全屏自适应网页布局

本文是CSS Sprite制作的网站导航条特效，大家可以参考下：CSS Sprite图片处理技巧。

<!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" /> <title>X/HTML+CSS Sprite Navigation Example</title> <style> body {background: #f5f5f5; margin: 0px auto; position:relative; font-family: Arial, Verdana; font-size: 14px; color:#313131;} .siteAlignment{width:950px; margin:0px auto;} h1 {font-family:Arial, Verdana; font-size:1.7em; color:#313131; margin:0px; padding:0px; letter-spacing: -1px;} /* wwwNav */ #wwwNav { width:950px; height:35px; margin:25px 0;} #wwwNav #Nav { width:950px; height:35px; margin:0; padding:0; background:url(sprite-nav.jpg) 0 0 no-repeat;} #wwwNav #Nav li { display:inline; } #wwwNav #Nav li a { float:left; outline:none; width:125px; height:0; padding-top:35px; overflow:hidden; } #wwwNav #Nav li a { background-image: url('/upload/tech/20091010/20091010013912_66368270ffd51418ec58bd793f2d9b1b.jpg'); background-repeat: no-repeat; } /* a */ #wwwNav #Nav li#nav00 a { background-position: 0 0; } #wwwNav #Nav li#nav01 a { background-position: -125px 0; } #wwwNav #Nav li#nav02 a { background-position: -250px 0; } #wwwNav #Nav li#nav03 a { background-position: -375px 0; } #wwwNav #Nav li#nav04 a { background-position: -500px 0; } #wwwNav #Nav li#nav05 a { background-position: -625px 0; } /* a:hover */ #wwwNav #Nav li#nav00 a:hover { background-position: 0 -35px; } #wwwNav #Nav li#nav01 a:hover { background-position: -125px -35px; } #wwwNav #Nav li#nav02 a:hover { background-position: -250px -35px; } #wwwNav #Nav li#nav03 a:hover { background-position: -375px -35px; } #wwwNav #Nav li#nav04 a:hover { background-position: -500px -35px; } #wwwNav #Nav li#nav05 a:hover { background-position: -625px -35px; } /* a:active */ #wwwNav #Nav li#nav00 a:active { background-position: 0 -70px; } #wwwNav #Nav li#nav01 a:active { background-position: -125px -70px; } #wwwNav #Nav li#nav02 a:active { background-position: -250px -70px; } #wwwNav #Nav li#nav03 a:active { background-position: -375px -70px; } #wwwNav #Nav li#nav04 a:active { background-position: -500px -70px; } #wwwNav #Nav li#nav05 a:active { background-position: -625px -70px; } /* a.current */ body#home #Nav li#nav00 a { background-position: 0 -105px; } body#about #Nav li#nav01 a { background-position: -125px -105px; } body#services #Nav li#nav02 a { background-position: -250px -105px; } body#work #Nav li#nav03 a{ background-position: -375px -105px; } body#blog #Nav li#nav04 a{ background-position: -500px -105px; } body#contact #Nav li#nav05 a { background-position: -625px -105px; } </style> </head> <body id="about" class="siteAlignment"> <h1>X/HTML & CSS Sprite Navigation Example</h1> <div id="wwwNav"> <ul id="Nav"> <li id="nav00"><a href="http://www.ruanchen.com/'about' to illustrate the means of a current state.</em></p> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

图片特效中应用的图片/upload/tech/20091010/20091010013912_66368270ffd51418ec58bd793f2d9b1b.jpg

网页制作的网页下拉菜单（6） 100%高度全屏自适应网页布局

导航代码 中的 CSS Sprite制作的鼠标感应网站导航条

评论 (0) All

导航代码中的 CSS Sprite制作的鼠标感应网站导航条