利用css做导航栏,利用CSS制作导航栏

导航栏是一个网站不可或缺的一部分,它可以让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。基于初学者对css各种属性的综合运用还不是很熟练，小编今天就教大家怎样利用CSS各种属性制作导航栏。

首先我们来看一些简单的导航栏效果:

一、导航栏的基础代码

导航栏基本上是一个链接列表，因此使用ul和li元素是非常合适的。

我们先看一下基础代码:

运行效果:

注释：我们在代码中把链接写为href="#"。在真实的网站中，应该是真实的URL。

从上面的效果我们可以看出，导航栏以列表的形式展示，但导航栏并不需要列表标记，所以接下来的步骤就要从列表中去掉圆点和外边距。

我们可以这样设置:

运行效果:

至此导航栏的基础代码构建完成。

接下来我们可以利用一些属性把它加工为垂直导航栏和水平导航栏。

二、垂直导航栏

构建垂直导航栏，我们只需在上面代码之外，设置一个a元素的样式。

{

display:block;

width:60px;

}

我们为什么要设置display:block呢？这是因为把链接显示为块元素可使整个链接区域可点击(不仅仅是文本)。

当我们把链接设置为块元素时，块元素默认占用全部可用宽度。所以我们要规定宽度。

注意：请始终规定垂直导航栏中a元素的宽度。如果省略宽度，IE6会产生意想不到的结果。

下面就让我们一起看一看完整样式的垂直导航栏。

具体代码如下:

运行效果:

三、水平导航栏

创建水平导航栏的方法有两种：使用行内列表项和浮动列表。

第一种：行内列表项

除了上面的基础代码，构建水平导航栏的方法之一是将li元素规定为行内元素：

{

display:inline;

}

使用行内列表项创建水平导航栏完整代码如下:

运行效果如下:

注释：如果您只为a元素设置内边距(而不设置ul元素)，那么链接会出现在ul元素之外。所以，我们为ul元素添加了top和bottom内边距。

第二种：对列表项进行浮动

在上面的例子中，链接的宽度是不同的。

为了让所有链接拥有相等的宽度，浮动li元素并规定a元素的宽度：

{

float:left;

}

{

display:block;

width:60px;

}

注释

float:left-使用float来把块元素滑向彼此。

display:block-把链接显示为块元素可使整个链接区域可点击(不仅仅是文本)，同时也允许我们规定宽度。

width:60px-由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要规定60像素的宽度。

最后我们看一看完整样式的代码:

效果:

好了，垂直和水平导航栏都诞生了，是不是非常容易呢？大家赶快试一试！其实小编想说的是，CSS还可以开发出很多很有趣的东西，这个就需要我们不断去摸索。更多有关CSS的教程，大家可以登陆课课家教育平台学习。

利用css做导航栏,利用CSS制作导航栏相关推荐

利用css做三线表格,如何快速制作三线表格式数据
在做论文分析时,多少会用到一些表格辅助,论文中最常见的就是三线表. 但这时大家一定会有这样的苦恼:"软件输出的格式和论文要求格式完全不一样!还得自己整理!好麻烦!" 为科(bi)研 ...
html css做网页总结,学习CSS制作网页总结的一些经验
学习CSS制作网页总结的一些经验互联网发布时间:2008-10-17 19:28:20 作者:佚名我要评论让你使用DIV CSS排版不是让你用换个标签然后再去按照表格的方式去排版 ...
如何利用计算机做主题模型,利用概率主题模型的微博热点话题发现方法-计算机系统应用.PDF...
利用概率主题模型的微博热点话题发现方法-计算机系统应用 2014 年第 23 卷第 8 期计算机系统应用 ① 利用概率主题模型的微博热点话题发现方法 1 2 米文丽 , 孙曰昕 1( ...
css做html5logo,用纯css实现的html5 logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下: css部分代码如下: html, body, div, span, applet, object, iframe, ...
利用mysql做信息管理_利用MySql实现学生信息管理系统的后台数据管理
Vol.28No.4 Apr.2012 赤峰学院学报(自然科学版)Journal of Chifeng University (Natural Science Edition )第28卷第4期(下) ...
css做html5logo,用纯css实现的html5logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下: 源代码下载地址: css部分代码如下: html, body, div, span, applet, object, ...
python利用matplotlib做饼图_python利用matplotlib库绘制饼图的方法示例
介绍 matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中. 它的文档相当 ...
HTML字母导航栏怎么做,如何用css做导航栏？
如何用css做导航栏? 1.新建一个html文件,在head部分,编写css样式 ○ list-style-type: none;是除掉导航前面默认带的点 ○ li a,li a.active ,li ...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
如何在html中加入柱状图,利用DIV+CSS做的柱状图（3）
利用DIV+CSS做的柱状图(3) .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left ...

利用css做导航栏,利用CSS制作导航栏

利用css做导航栏,利用CSS制作导航栏相关推荐

最新文章

热门文章