网页导航栏制作：如何为网页添加导航栏

01

制作一个放导航栏的容器

制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜

色为灰色，相关代码如下：

#nav

{

width:1000px

height:30px

background:#CCC

margin:0 auto

margin-top:50px

}

<div id="nav"></div>

02

显示结果

在浏览器中显示的结果为下图所示：

03

在容器中放入一些导航栏

导航栏代码如下:

<ul>

<li>模块一</li>

<li>模块二</li>

<li>模块三</li>

<li>模块四</li>

<li>模块五</li>

<li>模块六</li>

</ul>

04

为导航栏添加一些属性

<style type="text/css">

#nav

{

width:1000px

height:30px

background:#CCC

margin:0 auto

margin-top:50px

}

#nav ul

{

width:960px

height:35px

}

#nav ul li

{

float:left

width:100px

float:left

list-style:none

background:yellow

line-height:35px

}

</style>

05

导航栏在浏览器页面的显示结果如下图所示：

1、使用HTML语言创建导航栏的基本结构，导航栏容器、导航链接、下拉菜单等元素。

2、使用CSS语言设置导航栏的样式，字体、背景、边框、排列方式等属性。

3、使用JavaScript语言实现导航栏的交互功能，鼠标悬停、下拉菜单展开与收起等效果。

咳咳，答应过年增加新功能的，没想到拖到现在，延迟了一个来月，尴尬，尴尬

那个，我们先忽略这尴尬的事情吧，进入正题才是最重要滴

老规矩，先上效果图：

跟原来的图有个很明显的区别，你们也一定都发现了，对不对。那么显眼的小红点，一定都看到了吧。

当然除了这个，还增加了一项功能，虽然不是很明显，但相信也有小伙伴发现了吧，截图的这俩手机屏幕明显大小不同，但是底部导航栏的大小还是相差不大滴。

是的，你们没有看多，这次不仅增加了小红点功能，还增加了底部导航栏的适配，你没有听错，以后底部导航栏也不用那些dp、sp了，都按照UI妹子们标注的px来就可以了，再也不用为了底部导航栏去跟UI妹子解释啥叫dp了。

好了，效果图展示完了，现在该进入枯燥的使用介绍了。

由于这次改动有点大，所以，先介绍下上个稳定版本的用法，到底是用最新的，还是用原来的，就看各位小伙伴的意愿了

上个稳定版本是1.1.3的，引用方式如下

compile 'com.hjm:BottomTabBar:1.1.3'

具体用法如下（备注都加好了，我也就不多废话了）：

最新版本是1.2.2的，引用方式如下

compile 'com.hjm:BottomTabBar:1.2.2'

其实1.2.0与1.1.3区别并不大，只有4点改动：

现在默认的，分割线高度都是设置的1个像素。这里以后也固定都用这个默认的高度了，不再对外提供修改的方法。

这就是新增加的适配了，多的也不说了，你们都懂的

标准尺寸，就是UI妹子给你提供的效果图的屏幕尺寸，只要在init()方法里添加上标准尺寸，你就可以放肆的使用px了

这个方法就是控制小红点显示的方法了，index就是需要显示或者隐藏小红点的TabItem，isShow是一个boolean类型的参数，他是控制小红点是否显示的，如果为true，就会显示小红点；如果为false，就会隐藏小红点

1.2.2版本新增了两个方法

介绍到这里，超简单的底部导航栏，第二阶段就可以告一段落了。以后还会持续优化，完善的。

第三阶段我打算封装一下有中间凸起的底部导航栏，这个功能我本地已经做了，但是封装进去的时候，封装的不理想，这次就没有上线，留作下次了。

最后，再上个 GitHub 地址

---