小白，你最近看CSS的时候碰到position属性了么？"

“碰到了，通过position可以改变容器的定位，我记得官方描述是这样的：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。”

“恩，不错，今天咱说一下position里面的fixed类型吧，这个属性值是让容器基于浏览器窗口的绝对定位，在我们平时的制作中经常会碰到。”

老朱接着说：“给一个容器设定position为fixed以后，可以通过left、right、bottom、top进行四个方向的距离定位。现在我们在页面中写一个fixed容器，看一下代码片段。”

“你看，这里我在body里面加了一个标识为foot的div，然后他的css里面把position设置成了fixed，并且bottom（距离底部）为0，这里的bottom是基于浏览器窗口的距离进行计算的，foot的宽和高也进行了设定。现在我们看一下效果！”

“你可以看到，拖动滚动条往下滚动网页的时候，foot的位置并不会随着滚动条的滚动发生改变，它就像是漂浮在那里一样。这里的foot是一个div容器，所以它的内部我们还可以放任何你希望布局的内容，比如放一个图片，或者其他的容器。”

“这里插入的图片要想跟foot容器宽度一致，根据我们之前说过的对图片css的操作，把图片的宽度（width）设定为100%，图片就会自动与父容器宽度一致了。”

小白突然想到了很多手机HTML5页面下方都有导航条，问道：“很多手机的HTML5页面里面下方的导航条不会随着页面的滚动而滚动，这种导航条是不是也通过fixed来设定的。”

“是的，跟这里的foot一样，我们只需要把导航条的父容器设定为fixed就可以了。有个需要注意的地方是导航条会根据手机屏幕的分辨率自动占用屏幕宽度，所以我们在给foot设定css样式的时候就不能设定宽度了。”

小白问道：“那应该怎么设定呢？”

老朱说：“你忘了我们刚说了fiex可以通过top、right、bottom、left设定四个方向的距离么？如果要让一个fixed容器左右靠边，我们只需要left为0，right为0，它就会自动匹配窗口的宽度。现在我们把之前的foot容器改一下。”

“通过设定bottom、left、right可以让foot靠近底部并且保持与窗口宽度一致。然后我们在foot里面放了一个ul-li容器，让li容器向左浮动并且宽度为父容器的25%，布局就会变成这样。”

“网页上的底部导航通常都会放入透明的png图片，现在我们插入png图，再进行一下css的调整。”

“网页底部导航条，上面还会牵扯到鼠标事件，焦点样式变化，这些知识我们随后也会一一展开讨论，今天先这样吧！你先练习练习今天说的这些内容，然后试着做一个居中漂浮的层，看看能不能做出来！”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！

篇文章，小海老师带领大家一同做一个利用CSS技术实现的导航栏。通过这个导航栏的制作，希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识，并能够达到灵活运用的程度。

承接文章：灵活控制块级元素在一行内显示，CSS浮动属性，知道原理就很简单

技术等级：初级 | 适合前端开发的初学者阅读学习。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

如果你是初学前端开发，强烈建议跟着文章中讲的步骤自己做一做。步骤不多，思路简单，占用不了大家太多的时间，自己做一遍，一定会收获不少。

一、导航栏效果图展示：

今天我们要做的导航栏效果如下图所示。

导航栏效果图展示

这个效果主要使用的是<ul></ul>标记对和<a></a>标记对共同实现的。

整个实例涉及到的CSS属性如下所示：

• width

• height

• background-color

• list-style-type

• display

• float

• margin

• line-height

二、实现页面效果：

首先为导航栏设置一个<div>容器，并设置其id属性的取值设置为nav。该容器用来控制导航栏的通栏位置。通栏的容器宽度应该设置为100%，这里高度设置为40px，颜色为#a72f2e。实现代码如下所示：

<div id=”nav”></div>

#nav{

width:100%; height:40px;

background-color:#a72f2e;

}

由于要在通栏的容器中显示固定宽度为1000px的导航栏主体，因此在该容器内部再制作一个<div>容器，用来盛放真正的导航栏代码。我们将它的class属性取值为navContent。这个容器的宽度设置为1000px，高度与#nav的高度等高，并且在#nav容器内部水平居中。实现代码如下所示：

<div class=”navContent”></div>

#nav .navContent{

width:1000px; height:40px;

margin:0 auto;

}

接下来在.navContent容器内部书写导航栏的各个条目。导航栏是使用<ul></ul>标记对实现的，而它的导航栏条目是利用<li></li>标记对书写的。因为导航栏需要单击后跳转页面，所以在<li></li>内部使用了<a></a>标记对。

这里要说明一点，因为<li></li>标记对是块级元素，<a></a>标记对是内联元素，因此要让<li></li>标记对包裹<a></a>标记对，不要用<a></a>标记对包裹<li></li>标记对。

这里以导航栏条目“首页”和“网站介绍”为例，下列HTML代码展示了导航栏的条目内容。

<ul>

<li><a href="index.html">首页</a></li>

<li><a href="#">网站简介</a></li>

…

</ul>

需要更多的导航栏条目，可以在<ul>标记对内部重复书写<li></li>和<a></a>的代码格式。

三、编写整个导航栏的CSS样式：

整个导航栏是使用<ul></ul>标记对实现的，所以需要对<ul></ul>标记对编写CSS样式。

由于无序列表的列表项左侧带有小圆点的项目符号，因此需要将该项目符号去掉。所以<ul></ul>标记对的CSS代码如下所示：

#nav .navContent ul{

list-style-type:none;

}

四、编写导航栏条目的CSS样式：

导航栏条目是使用<li></li>标记对实现的，所以需要对<li></li>标记对编写CSS样式。

由于<li></li>标记对是块级元素，因此即使去掉了左侧的项目符号，所有的条目依然都各自独占一行显示，所以需要让它们在一行内显示，这就需要让所有的<li></li>标记对左浮动。CSS代码如下所示：

#nav .navContent ul li{

float:left;

}

五、编写导航栏条目中链接的CSS样式：

导航栏条目中的链接是使用<a></a>标记对实现的，所以需要对<a></a>标记对编写CSS样式。

由于<a></a>标记对是内联元素，因此无法设置宽度和高度，也就无法为每一个导航栏条目设置尺寸。因此需要将<a></a>标记对转换为块级元素（display属性），然后设置宽度和高度（width属性和height属性）。

有了宽度和高度，就需要让链接的文本在容器中水平居中（text-align属性）和垂直居中（line-height属性）了。

最后去掉链接的下划线（text-decoration属性），并设置链接的文本颜色（color属性）。

导航栏条目中链接的CSS代码如下所示：

#nav .navContent ul li a{

display:block;

width:100px; height:40px;

text-align:center;

line-height:40px;

text-decoration:none;

color:#dddddd;

}

六、编写鼠标经过导航栏条目时的CSS样式：

鼠标经过导航栏目时，即使没有触碰到链接的文本部分，也应该能够进行跳转。因此需要对<a></a>标记对编写鼠标经过时的CSS样式。

鼠标经过时，希望背景颜色（background-color属性）和文本颜色（color属性）发生变化。

鼠标经过链接时的CSS代码如下所示：

#nav .navContent ul li a:hover{

background-color:#ff5857;

color:#ffffff;

}

七、整体代码：

至此，这个简单的导航栏效果就完全实现了，CSS整体使用了约30行代码。实现这个导航栏效果的HTML代码如下图所示。

HTML整体代码

实现这个导航栏效果的CSS代码如下图所示。

CSS整体代码

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

下一次，小海老师开始为大家讲解CSS的盒属性。盒属性是div布局的基础，在实际的布局过程中有许多应用技巧。下一篇文章我会为大家将盒属性一个一个进行详细的分析。