一个漂亮的导航，可以给站点起到关键的作用。导航在引导用户搜索内容的同时也可以改变用户浏览网站的心情。浏览网站也像是一次旅行。创新的导航栏将让用户享受更多的乐趣，并增加对网站的兴趣。

我不擅长艺术制作，但是我可以从一些漂亮的网站中提取好的部分供自己使用，也可以供大家分享。今天我们准备了一个天蓝色的导航，供大家一起学习。

让我们先看看最终效果：


第一步：放置一个div作为导航的主要部分

xml代码将内容复制到剪贴板。







为它写风格：

CSS代码将内容复制到剪贴板。


userplacemain。
{
清楚：两者；
宽度：1200px
身高：50px；
行高：50px；
背景：# 0090ce；
填充物：0 20px；
颜色：白色；
-moz盒阴影：5px 5px 10px # b7b7b7；
盒子的影子：5px 5px 10px # b7b7b7；
}




注意：这里-moz盒阴影：5px 5px 10px # b7b7b7；盒的影子：5px 5px 10px # b7b7b7；导航的阴影部分

此时，导航效果如下：

第二步：放置导航链接内容

这里使用UL Li无序列表。

xml代码将内容复制到剪贴板。



|主页
图像显示|
产品展示





现在需要将UL Li浮动到左边，使用：浮动：向左

CSS代码将内容复制到剪贴板。


userplacemain UL Li {。
浮点数：左；
右边距：10px；





此时，导航效果如下：


它离我们的最终效果不远，链接文本的宽度、背景和间隔没有设置。

第二步：设置链接宽度、背景、间隔

因为标记是内联标记，如果需要设置宽度以使用其他处理，则可以使用显示设置宽度：内联块。

CSS代码将内容复制到剪贴板。


userplacemain UL Li。
{
文字阴影：0 1px 0 RGBA（0,0,0,0.3）；
颜色：白色；
显示：内联块；
宽度：100px；
身高：100%；
字体大小：15px；
文本对齐：中心；
右边距：10px；
}




注：文字阴影：0 1px 0 RGBA（0,0,0,0.3）；添加阴影的文本，不设置此项

此时，导航效果如下：


现在效果更好了，最后要处理的是鼠标的滑动样式。

第三步：设置导航鼠标滑动样式

有两种方法。第一，直接使用CSS伪类选择器：悬停；2。Javaｓｃｒｉｐｔ或juqery控制链接文本的CSS样式。这是第一条路，比较方便。

CSS代码将内容复制到剪贴板。


UL Li：悬停。userplacemain {背景：# 0074a6；颜色：白色；}




最终结果如下：

以上是本文的全部内容，希望能对大家有所帮助。