CSS实例教程:简单的的滑动导航栏效果
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-02-02
| ht:50px; text-indent:-9999px; background:url(01.jpg) no-repeat;}/*通过text-indent把a元素中的文字隐藏起来；为所有链接定义统一的背景图片。*/ /*以下分别定义了4个链接的宽度和背景图片位置。（本例中两种状态下文字在水平方向位置相同，在这里每个链接两种状态的背景图片就只有垂直位置不同了，这样控制起来就更方便。）*/ .navbar li a.urlA {width:78px; background-position:-6px 0;} .navbar li a.urlA:hover,.navbar li.select a.urlA {background-position:-6px -50px;} .navbar li a.urlB {width:75px; background-position:-84px 0;} .navbar li a.urlB:hover,.navbar li.select a.urlB {background-position:-84px -50px;} .navbar li a.urlC {width:211px; background-position:-159px 0;} .navbar li a.urlC:hover,.navbar li.select a.urlC {background-position:-159px -50px;} .navbar li a.urlD {width:126px; background-position:-370px 0;} .navbar li a.urlD:hover,.navbar li.select a.urlD {background-position:-370px -50px;} /*background-position两个参数的顺序：先水平，后垂直。“先左右，后上下”容易记错。*/ 至此，滑动导航栏制作完成。如需参考代码请查看“演示页面”的源代码。 在本例中： 也许你有更好的方法，或发现本例中有错误，还请不吝赐教。 54173BLOG原创文章，转载请保留本文链接：http://www.54173.cn/blog/?p=255 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: CSS网页设计实例:设计制作大背景网页下一篇: webkit博客:CSS3线性渐变样式语法
关于CSS实例教程:简单的的滑动导航栏效果的所有评论
