当我们在打开一个网站首页的时候，页面上一般都有一排导航，点击导航可以帮助我们跳转到想要去的页面。以百度搜索为例，我们在打开“百度一下，你就知道”的页面时，在页面的右上角有一排导航，分别可以跳转到百度其他的产品，如下图所示。下面小编就带领大家来简单实现这个导航。
工具/原料
Sublime Text3
方法/步骤
1
编辑导航时我们第一个想到的便是用超链接标签，但是直接使用a标签来制作导航是有问题的，导航与导航之间应该是列表的关系，所以如果想要将这些个关系通过html语义化表示出来必须要使用ul标签，如果这些a标签不用其他的标签包裹起来，那么将来浏览器会将这些a标签中的文字当作全部一起显示，因此必须要用ul的
2标签想象成一个盒子，那么此时这些盒子以标准流的形式摆放，而这些并不是我们想要的。
我们在浏览器中查看页面的效果，由于页面上的每个标签都是一个盒子，我们把
3
接下来我们要做的是去掉无序列表前面的黑点，在标签选择器li中设置list-style: none，并设置li标签向左浮动。接着使用text-decoration: none给标签去掉下划线，给标签设置背景颜色，最后将标签设置为行内块（display: inline-block;），同时设置外边距padding的值。
注意事项
若浮动的效果和预想的不一致，试着在标签选择器设置的地方定位问题。