导航栏
时间：2023-07-24 19:21:01 | 来源：网站运营
时间：2023-07-24 19:21:01 来源：网站运营
导航栏：在网页中，导航栏是一个必不可少的元素。直接进入主题。导航栏的制作。
首先，导航栏是通过无序列表<ul></ul>加上<li></li>标签制作完成。
1.初步结果
制作结果是这样的 首先，先去除黑点。设置<ul></ul>的样式。同时为了更好的设置导航栏样式，需要设置<ul></ul>的内外边距为0；
ul{ list-style-type:none; margin: 0; padding: 0; }这是垂直导航栏，如果需要改为水平导航栏。则需要设置<li></li>标签的样式为float:left;
这样初步的导航栏就完成了，比较简单。接下来就是为导航栏化妆的过程了。滑稽.gif。
在为导航栏化妆前我们先来了解下导航栏的结构。
首先是<ul></ul> 之后为<li></li>元素，为块级元素
在<ul></ul>中分布。这就是导航栏的结构，理解这个就可以很清晰的完成对导航栏的化妆了。
想要设计比较美观的页面时，导航栏肯定不能这样的紧凑在一起，所以需要设计导航栏中元素的距离。
这个就是li标签的具体结构，li标签是个块元素，通过设置快元素的内边距距离来实现导航栏之间目录的距离。
接下来就是设置ul li 的具体样式了。首先给ul添加个背景。在修正一下li标签内文字的位置，小强迫的居中。
差不多就是这样了，可以说是给它上了粉底整个容什么的。
为了更加明显的显示鼠标移动效果。
这样，一个比较简单的垂直导航栏就完成了
emmmmm，当设置为水平导航栏时，出现了ul背景颜色无法显示的情况，就像这样
就像这样，ul标签未设置宽高度，所以没有显示出来。
经过询问度娘后，发现需要加上overflow:hidden的样式。这样背景就会显示出来了。
在线咨询
