css3背景渐变以及阴影与导航栏的几种实现方式，2024年最新高级前端vue面试题

那么接下来就是对于导航栏实现我所知道的三种方式，首先需要知道的是我们在导航栏中的页面结构是怎样的，在大多数的情况下都是如下所示：

那么就来介绍第一种实现导航栏的方法，采用flaot来实现，先给ul一个具体的宽度以及高度然后再给每一个li设置flaot，然后其宽度采用百分比的形式，用100%除以具体的li的个数然后将li设置称这个百分比。接着再在li中使用text-align,以及line-height等于ul的高度就能够实现里面的文字居中。具体的代码如下：

第二种使用display: inline-block来实现，然后使用padding与margin来控制文本之间的间隔，具体的实际代码实例参照下面的代码：

3.采用flex布局来实现，首先给父级设置具体的高度与宽度，然后再