您的位置:首页 >科技 >正文

科技常识:CSS Sprite打造的个性化导航菜单代码

今天小编跟大家讲解下有关CSS Sprite打造的个性化导航菜单代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS Sprite打造的个性化导航菜单代码 的相关资料,希望小伙伴们看了有所帮助。

下面先看效果: 首先 是在正常模式下浏览: 下面先看效果:

首先 是在正常模式下浏览:

然后 是在鼠标悬停的时候浏览:

最后 是在鼠标点击链接的时候浏览:

可以看到 过渡的很自然。具体的素材如下:

其实 刚才的鼠标悬停和点击链接的图片切换 就是通过位置控制取自bg2_btn.jpg 下面是具体实现方法:

首先是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> <title>20个web2.0导航样式</title> <link href="https://www.aidi.net.cn//css/mydemo.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <img src="https://www.aidi.net.cn//css/image/logo/logo2.jpg" alt="wenqi"s blog" /> </div> <!------- 导航2 -------> <div class="menu2"> <div class="left2"></div> <div class="center2"> <a href="">Blog</a> <a href="">Themes</a> <a href="">Service</a> <a href="">About</a> <a href="">Help</a> <del></del> </div> <div class="right2"></div> <div class="clear"></div> </div> </body> </html> 其次就是css的代码: 复制代码代码如下: html { width:100%; height:100%; } body { background-color:#fff; font-size:18px; font-family:"Arial","Tahoma","微软雅黑","雅黑"; line-height:18px; padding:0px; margin:0px; text-align:center; } /* www.codefans.net */ a { display:block; float:left; } del,div.clear { height:0px; font-size:0px; line-height:0px; padding:0px; margin:0px; display:block; clear:both; overflow:hidden; } div { width:550px; text-align:left; margin:auto auto auto auto; } .menu2 { font-size:14px; line-height:14px; margin-bottom:24px; } .menu2 .left2 { width:5px; height:47px; background:url("image/navigation/bg2_left.jpg") no-repeat left top; float:left; } .menu2 .center2 { width:540px; height:47px; background:url("image/navigation/bg2_center.jpg") repeat-x left top; float:left; } .menu2 .right2 { width:5px; height:47px; background:url("image/navigation/bg2_right.jpg") no-repeat left top; float:left; } .menu2 a:link,.menu2 a:visited { color:#585858; width:77px; height:30px; padding-top:17px; background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; text-align:center; text-decoration:none; } .menu2 a:hover { color:#fff; background-position:left 0px; } .menu2 a:active { color:#fff; background-position:left -47px; } 其实 重头戏是在上面的这句代码下: 复制代码代码如下: .menu2 a:link,.menu2 a:visited { color:#585858; width:77px; height:30px; padding-top:17px; background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; text-align:center; text-decoration:none; } 利用了css sprite技术 将图片通过精确的切割 并且利用background-position来控制 就可以达到js的控制效果。 希望本文章有用。谢谢。

来源:爱蒂网

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢。