CSS实例:超酷的网站导航按钮
| 们将这个图片加在菜单项上吧。一个按钮要用到两张图片才能表现出来。地球人都知道，一个标签只能装一张图片（如果你发现一个标签能装上两张图片，请及时告诉我，我请你吃饭！）。哦！我的菜单结构中每一项刚好有两个标签，一个是li，它里面有一个A标签，刚好可以用来装左右两张图片。Li用来装左侧的图片，A用来装右侧的图片。我真佩服我自己，这么好的点子都能想得出来，正在沾沾自喜的自我陶醉中…
别忙，哦，天啦，如果这样来装图片，我的三种鼠标翻滚状态如何实现？我们都应该知道，目前除了该死的IE6，其它的浏览器都支持li:hover伪类。然而要兼容各主流浏览器（这是我们的第8项目标哟，别忘了！），这种方法是行不通的。IE6只能在A标签上应用伪类，其它的标签它可是一概不理！ 既然IE6只能在A标签上应用hover伪类，那么我们要制作自适应的滑动门菜单，就需要在结构上动手脚了，看来只能在A标签中再加入一个标签，那么菜单的结构就会变成下面这个样子了。（注意：这儿就开始改变结构了，虽然我一直想极力避免这种情况的发生，但好像要达到要求，这个标签是非加不可了。） <li><a href="#none" title="冰极峰"><span>冰极峰</span></a></li> 我们在A标签中加入了一个span容器，它将文字内容包括起来了。现在有两个标签，可以装两张图片了。我们将右侧图片放在A标签的背景中并向右靠齐，将左侧图片放在SPAN标签中并向左靠齐。这样就能表现出一个完整的按钮形状。 还好，虽说多加了一个标签，但它还不是完全无语义。 好了，我们的准备工作都差不多了，该给菜单穿上新衣服了。 我们要做成自适应宽度的菜单，那么，我们就不能设置菜单的宽度值，所以我们不能像平时制作一个水平的有固定宽度的菜单的做法那样，设置宽度，然后向左浮动。如果这样的话，每个菜单项的宽度不同时，要分别定义每一项的宽度，那就必须给每个菜单项定义一个ID或CLASS,并且这种方式也不利后台程序的动态循环输出。 我们需要的是像内联元素一样从左到右自动在一行内排列每个菜单项，那么我们就需要菜单以内联的方式表现出来，OK,我们就用display:inline吧，这是一个非常有用的属性：它解析后的排列方式能达到我们的基本要求：在一行内从左到右自动排列标签元素，每一项宽度可以不同。 如果用上面这种属性真的能满足我们需要了，就没有下面这一段文字内容。 虽说这个属性能满足我们项目基本需要，可是它有一个非 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
