前端技巧DIV+CSS必备技能 怎样制作网站的导航栏

DIV+CSS必备技能 怎样制作网站的导航栏

导航栏是一个网页的重要组成部分,制作导航栏是DIV+CSS网页设计中最基本的技能,本文我们详细介绍一下制作网页导航栏的各个细节和技巧。先来说说最简单的横排导航栏,比如一个网站有5个栏目,分别是:新闻、图片、音乐、视频和软件,可以做一个下面这样的导航栏:

导航制作1.png

看起来并不难实现这个导航,一个蓝色的背景,放6个文字链接就行了,但是新手朋友们需要注意的一点是,在网页设计的过程中,我们应当让每部分网页代码都含有语义,导航栏我们一般将它视为一个无序列表,其结构应该是:

<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
</ul>

这样的一个列表,我们现在要将几个列表项横向排列,很简单的实现方法是给li元素设置向左浮动(float:left),这样几个列表项就到同一行了,当然我们还应当去掉列表项前面的小圆点,差不多这个导航栏的代码应该这样书写:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
#top{height:40px;}
#nav {background:#518EFD;height:60px;line-height:60px;}
#nav li {list-style-type:none;float:left;font-size:20px;}
#nav li a {text-decoration:none;padding:0px 15px;color:#fff;}
</style>
</head>
<body>
<div id="top">
</div>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
</ul>
</div>
</body>
</html>

为了便于浏览,我们在导航标签上方加了一个高40px的空标签,然后设置了导航栏的背景颜色和高度,将行距和高度设置为相等,是为了让文字链接在垂直方向居中。接下来去掉了li元素的小圆点,设置向左浮动。然后去掉了导航上文字链接的下划线,设置左右内边距和文字颜色,基本上就达到我们预想的效果了。

为了方便点击,一般我们将导航上的文字链接转化成行内块(display:inline-block),这样可以增大点击面积,用户体验更好。我们还应当给导航文字链接设置鼠标指向的效果,比如换个背景颜色,所以增加CSS定义后的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
#top{height:40px;}
#nav {background:#518EFD;height:60px;line-height:60px;}
#nav li {list-style-type:none;float:left;font-size:20px;}
#nav li a {
 text-decoration:none;
 padding:0px 15px;
 color:#fff;
 display:inline-block;
}
#nav li a:hover {background:#23A2A0;}
</style>
</head>
<body>
<div id="top">
</div>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
</ul>
</div>
</body>
</html>

这样以来,这个简单的导航栏就做好了,一般的企业网站导航栏大致就是这样的样式和布局。如果是较复杂的网站,通常在一级栏目下还有二级子栏目,我们怎样制作带子栏目的导航呢,例如:

<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a>
  <ul>
    <li><a href="#">美女</a></li>
    <li><a href="#">风景</a></li>
    <li><a href="#">创意</a></li>
  </ul>
</li>
<li><a href="#">新闻</a>
  <ul>
    <li><a href="#">国内</a></li>
    <li><a href="#">国际</a></li>
  </ul>
</li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
</ul>

这里我们看到,图片栏目下又分为美女,风景和创意三个子栏目,新闻又分为国内和国际,那么我们定义CSS的时候,应该先将二级子栏目隐藏,等鼠标指向对应的一级栏目时将子栏目以下拉列表显示出来,如下图:

导航制作3.png

带子栏目的导航整体网页代码为:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {background:#eee;}
ul,li {margin:0;padding:0;}
#top{height:40px;}
#nav {background:#518EFD;height:60px;line-height:60px;}
#nav li {list-style-type:none;float:left;font-size:20px;}
#nav li a {
 text-decoration:none;
 padding:0px 15px;
 color:#fff;
 display:inline-block;
}
#nav li a:hover {background:#23A2A0;}
#nav li ul {display:none;background:#23A2A0;position:absolute;}
#nav li ul li {float:none;}
#nav li:hover ul {display:block;}
#nav li:hover ul li a:hover {background:#1E9BE3;}
</style>
</head>
<body>
<div id="top">
</div>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a>
  <ul>
    <li><a href="#">美女</a></li>
    <li><a href="#">风景</a></li>
    <li><a href="#">创意</a></li>
  </ul>
</li>
<li><a href="#">新闻</a>
  <ul>
    <li><a href="#">国内</a></li>
    <li><a href="#">国际</a></li>
  </ul>
</li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
</ul>
</div>
</body>
</html>

鼠标指向一级菜单后出现下拉菜单的实现重点在下面这一句:

#nav li:hover ul {display:block;}

它的含义是,当鼠标指向列表项li的时候,将li的子元素ul显示出来。

另外我们把下拉列表定义了position:absolute绝对定位属性,这样的话,它脱离文档流,不占据空间,就不会将导航下方的内容给挤跑了。

以上介绍了简单的横排导航栏和带有子栏目的导航栏的做法,不过如果是手机版的网站,我们一般采用百分比来将每个链接的宽度平均显示,例如下面的效果:

导航手机版1.png

这里导航呈现两排显示,则高度应该设置为120px,行距可设置为高度的一半,也就是:

#nav {height:120px;line-height:60px;}

每个栏目链接的宽度是1/3,所以我们把li的宽度设置为33.3%,并设置文本居中显示,也就是:

#nav li {width:33.3%;text-align:center;}

综合起来,这个简单的手机版导航栏的代码为:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
li,ul {margin:0;padding:0;}
#top{height:40px;}
#nav {background:#518EFD;height:120px;line-height:60px;}
#nav li {
 list-style-type:none;
 float:left;
 font-size:20px;
 width:33.3%;
 text-align:center;
}
#nav li a {
 text-decoration:none;
 color:#fff;
 display:inline-block;
 width:100%;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
</ul>
</div>
</body>
</html>

这是最基本的手机网站导航栏的做法,如果要实现一些点击的特效,一般要配合js完成,本文就不做介绍了,本站资源下载栏目会分享一些类似的案例供大家参考。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/52.html