CSS实例:超酷的网站导航按钮
| 常致命的弱点：它不能设置宽度和高度值，不信你可以试试。它只表现为文字的默认高度和宽度，超出这个宽高值后就自动隐藏了。这样一来，我在这里面是有背景图片的，要表现出这个图片效果，我们需要给定一个宽度和高度。这就不能做出我们的效果了，郁闷！还好，还有一个属性：display:inline-block;它的表现就是我们需要的。
但是…这个属性也有致命弱点，它只能被FF3等高级浏览器识别。其它的浏览器只能绕道而行了。啊哦！所以，统一浏览器是多么的重要啊！看来，HACK也是我们逼不得已的一种解脱方式了。 原理我们都了解了，我们可以根据上面两篇文章提供的技巧来做一个自适应的菜单了。 我们先写右侧图片的样式，它是应用在li元素的子节点A标签中的。 li a{display:inline-block; padding-right:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; *padding-bottom:0; height:36px; background:url(images/button.gif) no-repeat right -36px; text-decoration:none; font-size:12px; color:#fff;} 我们先设置display:inline-block,然后我们再用padding来撑开它的边距，让它有一定的空间来装填图片。注意，这里的图片路径换成你自己的路径。然后设置其它的样式，如去掉下划线，字体颜色，字体大小等等。设置图片靠右对齐。 li a span{display:inline-block; padding-left:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; padding-bottom:0; height:36px; line-height:36px; background:url(images/button.gif) no-repeat left top; font-weight:bold;} 按钮左侧的图片是放在SPAN元素中的，将它的图片向左对齐，也设置padding来撑开它的宽度和高度。 li a,li a span{display:inline;cursor:pointer;} 然后将它们的又设置回inline内联模式，触发IE的haslayout特性。 在上面的代码，我们还看到有一个HACK的应用，*padding-bottom：0;和*padding-top：0;这用来解决IE与FF等浏览器不同效果的。不信你删除后看看会有什么效果，在IE下高度伸展有问题。 好了下面该写鼠标移上时的效果了。 li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;} li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;} 再接下来是鼠标点击后的效果。 li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
