H5实战(四)：导航栏

1.导航栏效果

导航栏主要分为两种：水平导航栏和垂直导航栏，其中水平导航栏又有普通导航栏与简约导航栏等样式设置。

2.实现思路：

导航栏的实现主要使用ul标签结合a标签，设置a标签为块元素，可为其设置宽高，将其向左浮动就可形成水平导航栏，取消其默认的原点与下划线样式，并为鼠标移入时增加样式，颜色较深的背景色的导航栏，鼠标移入时，多会修改移入部分背景色，背景为白色的导航栏在鼠标移入时，可为其添加下滑线等样式，以追求其美观性。

3.小知识点

在制作简约导航栏时，可为每个选项前面添加一张图片，对于这种小的图片，多选择以背景图片方式导入，并且一般会选择.png的格式，一般的网站制作中，会将这些小图标放入一张图片中，在使用每个小图标时，可使用background-position进行偏移，找到小图标在图片中的位置，并将其导入，这样做的好处是，可以一次性加载完左右小图标，减少调用次数，提高了加载速度。

一般情况下，小图标与背景图以.png格式导入，相对较大又颜色鲜艳的图片，以.jpg格式导入, 而动图则以gif格式导入，jpg的图片相对于png要小一些，而又能达到用户的视觉要求，这里要注意的是，我们需要对导入图片的大小有一定的限制，既要防止图片过小引起的不清晰，又要防止图片过大引起的加载缓慢问题。