Web|如何实现导航栏的默认，预览以及选中时的样式

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

在我们日常生活中，用手机电脑上网查找资料可谓是家常便饭。对于当今社会的我们来说浏览网页更是一件普通到不能再普通的事情。那么大家有没有发现，我们经常浏览有什么相似之处。其实我们常常浏览的网页基本上都会有一个导航栏。导航栏的作用就是为了更好的服务用户，为了更好的聚焦，集中资源、合理利用资源缩短排名周期，满足用户特定的需求。

网站导航的基本作用是为了让用户在浏览网站过程中不至迷失，并且可以方便地回到网站首页以及其他相关内容的页面。绝大多数网站，他所有的栏目、内容，都是围绕核心关键词(核心词）拓展而来，网站的导航也大多是要依据用户需求来拓展布局的。要做好一个导航栏，我们就应该明白导航栏存在多种样式，即默认样式，鼠标滑过时的样式，选中时的样式。

（1）  首先我们还是应该做出导航栏的默认模式。此时当我们把鼠标放在导航栏上是不会有任何效果的。（在图片上的/*与*/之间的内容表示注释，即前一句代码的解释内容）

（2）  要实现浏览效果，只需要我们添加一句代码即：

完整代码为：

（3）  要实现选中效果，同样也只需添加一个简单代码。

不论是在我们学习还是生活中，我们都应该仔细观察，细心思考。要善于发现细小的问题。就此次的导航栏来说，在我刚开始学习制作简单的网页的时候其实是接触过导航的。但当时只知道默认及预览样式。选中样式还是我在网上查找其他问题是发现的。所以我认为在学习过程中，多查资料是很有必要的。

更多精彩文章：

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！