CSS实例:超酷的网站导航按钮

       <li><a href="#none" title="订阅">订阅</a></li>

       <li><a href="#none" title="冰极峰">冰极峰</a></li>

 </ul>

</div>

菜单的最原始的结构有了，可以看到这里面是没有任何无意义的标签，每个标签都有各自的语义。我们在浏览器中看下，啊哦，确实很简陋，就是原始的文字，像什么，嗯，就像我们在菜馆里点菜用的菜单，可能比那个还简单，并且每个菜单前面还有一个小圆点！哦，天啦，离我们的漂亮菜单还差好大一截呢！

样式篇

好吧，它现在还只是一个骨架，我们稍微给它美化一下，加点简单的样式，至少应该去掉小圆点吧，并且让它水平排列吧！

好，加点样式：

*{margin:0;padding:0;}/*将它统一成一个模样吧，不然在各个浏览器下，会死得很难看*/

ul{list-style:none}/*去掉小圆点吧*/

li{float:left;margin-left:10px;}/*水平排列并来点间距吧，不要把我挤得太紧了。*/

嗯，现在看看，达到小目标了。

骨架有了，接下来就是给每个菜单项穿上漂亮的衣裳。

要满足第一项要求，首先要有一个漂亮的按钮，自已画一个，哦，我不是美术人员，难！不过，别恢心，网络之大，无奇不有，说不定人家已经有做好的，google一下，还真发现了一个，感谢啊！

有了设计好的按钮源码，省去设计的一环，真好。但要做成三态按钮，还需要我们改造一下这个按钮。看到第七条目标了吗，我们是要做自适应的按钮，所以要对这个按钮做一些加工处理。

我们将这三个按钮分别表现为鼠标移开、点击后、鼠标移上时的三种状态，要做滑动门菜单，需要将一个按钮从中间剖开，左边图处放在左侧，右边图片放在右侧。要适应文字加长的情况，还要将这个图层宽度拉长一点，但这个图片有很复杂的阴影特效，不能随便拉伸，否则效果就不像了。我们就从中间给它剖开，将右边图片的左侧向前平辅拉伸。如图二所示

图一

所以我们先将它如图哪样切成六片，然后将这六张图片合并在一起。为什么要这样呢？看看css sprites原理吧！

图二

上图中第一和第二个图片组成普通菜单样式（默认样式），第三、第四个图片组成翻滚样式，第五和第六个图片组成点击后的菜单项样式。

我们将阴影图片专门提取出来，作成一张很小的背景图片。

图三

该要的图形都准备好了，接下来，我

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!