大家好，欢迎来到IT知识分享网。
导航栏是一个网站不可或缺的一部分,它可以让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。基于初学者对css各种属性的综合运用还不是很熟练，小编今天就教大家怎样利用CSS各种属性制作导航栏。
首先我们来看一些简单的导航栏效果:
一、导航栏的基础代码
导航栏基本上是一个链接列表，因此使用ul和li元素是非常合适的。
我们先看一下基础代码:
运行效果:
注释：我们在代码中把链接写为href=”#”。在真实的网站中，应该是真实的URL。
从上面的效果我们可以看出，导航栏以列表的形式展示，但导航栏并不需要列表标记，所以接下来的步骤就要从列表中去掉圆点和外边距。
我们可以这样设置:
运行效果:
至此导航栏的基础代码构建完成。
接下来我们可以利用一些属性把它加工为垂直导航栏和水平导航栏。
二、垂直导航栏
构建垂直导航栏，我们只需在上面代码之外，设置一个a元素的样式。
a
{
display:block;
width:60px;
}
我们为什么要设置display:block呢？这是因为把链接显示为块元素可使整个链接区域可点击(不仅仅是文本)。
当我们把链接设置为块元素时，块元素默认占用全部可用宽度。所以我们要规定宽度。
注意：请始终规定垂直导航栏中a元素的宽度。如果省略宽度，IE6会产生意想不到的结果。
下面就让我们一起看一看完整样式的垂直导航栏。
具体代码如下:
运行效果:
三、水平导航栏
创建水平导航栏的方法有两种：使用行内列表项和浮动列表。
第一种：行内列表项
除了上面的基础代码，构建水平导航栏的方法之一是将li元素规定为行内元素：
li
{
display:inline;
}
使用行内列表项创建水平导航栏完整代码如下:
运行效果如下:
注释：如果您只为a元素设置内边距(而不设置ul元素)，那么链接会出现在ul元素之外。所以，我们为ul元素添加了top和bottom内边距。
第二种：对列表项进行浮动
在上面的例子中，链接的宽度是不同的。
为了让所有链接拥有相等的宽度，浮动li元素并规定a元素的宽度：
li
{
float:left;
}
a
{
display:block;
width:60px;
}
注释
float:left-使用float来把块元素滑向彼此。
display:block-把链接显示为块元素可使整个链接区域可点击(不仅仅是文本)，同时也允许我们规定宽度。
width:60px-由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要规定60像素的宽度。
最后我们看一看完整样式的代码:
效果:
好了，垂直和水平导航栏都诞生了，是不是非常容易呢？大家赶快试一试！其实小编想说的是，CSS还可以开发出很多很有趣的东西，这个就需要我们不断去摸索。更多有关CSS的教程，大家可以登陆课课家教育平台学习。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/11982.html
