如何使用CSS浮动实现页面导航功能

1、编辑导航时我们第一个想到的便是用超链接<a>标签，但是直接使用a标签来制作导航是有问题的，导航与导航之间应该是列表的关系，所以如果想要将这些个关系墩伛荨矧通过html语义化表示出来必须要使用ul标签，如果这些a标签不用其他的标签包裹起来，那么将来浏览器会将这些a标签中的文字当作全部一起显示，因此必须要用ul的<li>标签将<a>标签包裹起来，编写代码前首先要做的便是清除页面所有标签margin和padding的值，如下图所示。

3、接下来我们要做的是去掉无序列表前面的黑点，在标签选择器li中设置list-style: none，并设置li标签向左浮动。接着使用text-decoration: none给&造婷用痃lt;a>标签去掉下划线，给<a>标签设置背景颜色，最后将<a>标签设置为行内块（display: inline-block;），同时设置外边距padding的值。