CSS导航条制作是网页设计中的一个重要组成部分，它可以帮助用户快速找到所需的内容。在本文中，我们将介绍如何使用CSS来制作一个导航条。
首先，我们需要准备一些HTML代码，用于构建导航条。在这里，我们使用ul标签和li标签来构建导航条：
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="active">Contact Us </li>
</ul>;
接下来，我们可以使用CSS代码来设计导航条的外观。首先，我们可以使用“background-color”属性将背景色设为浅蓝色：
.nav {
background-color: #0099FF ;
}
然后，我们可以使用“text-align”属性将文本水平居中显示：
.nav {
text-align: center ;
}
此外，还可以使用“padding”属性将文本上下间隔10px ：
.nav {
padding: 10px 0 ;
}
最后，我们可以使用“border-radius”属性将对应的元素圆角化显示 ：
.nav li {
border-radius: 5px ;
}
通过上述步骤，就可以实现一个完整的CSS导航条了。当然，你也可以根据你的需要添加更多的CSS代码去定制你想要的效果。
导航条是一个网站的基础，美观易用的导航条对于任何网站都是非常重要的。按照传统的方法，导航条是由放在一行表格单元里的图形图像构成。由于人们不再推荐用表格来定位任何非表格的页面内容，所以很多人都用结构化的 XHTML 标记和 CSS 格式来创建导航条。下面先来看一下最简单的 CSS 导航条是怎么实现的：
首先,我们来给这个下拉菜单写一个 HTML 的代码.先创建一个 div 来做为容器,然后把这个导航菜单放到这个容器里.正如下面的代码,我们用无序列表来创建这个导航菜单.在这个导航菜单中 Portfolio 项下有一个子菜单,用粗体表示出来,别忘了关闭</li>。
<div id="nav">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Photos</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
首先,我们来给#nav div设置一个样式,给它一个宽度,高度,字体大小.并把默认的无序列表样式给去掉.。
*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left
position: relative;
}
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}
#nav ul li:hover ul {
display: block;
position: absolute; }
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none; }
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff; }
纯CSS实现的彩色导航菜单
左侧导航布局CSS网页模板
点此下载
CSS中英文双语导航菜单
点此下载
CSS水平下拉菜单
点此下载
div css下拉导航菜单分类代码
点此下载
五款漂亮的CSS横向下拉菜单导航条
点此下载
nav 标签表示一个页面中的某个部分，目的是提供导航链接，常见的导航栏的示例是菜单、目录和索引，请参考下面的示例：实例一个导...
HTML track 标签kind 属性值用来放置 track 标签给媒体元素添加的数据的类型，属性值可以是subtitles、captions、descriptions、...
HTML5 Web Workers web worker 是运行在后台的 JavaScript，不会影响页面的性能，更好的解释是，你可以使用web worker提供的一种...
定义和用法HTML标签basefont用来设置文档的默认字体大小。使用font可以相对于默认字体大小进行变化。使用说明:不要再使用这个标...
所有 HTML 5 标签均支持下面列出的属性，仅有少数例外。HTML 5 标准属性NEW：HTML 5 中新的标准属性。注释：HTML 4.01 不再支持 ...
实例HTML5 rt标签用于表示为ruby标签中的注释内容。一个 ruby 注释：ruby漢 rt ㄏㄢˋ /rt/ruby浏览器支持IE 9+、Firefox、Opera...
实例HTML5 footer标签用于定义文档的页脚部分。文档的页脚：footerpPosted by: Hege Refsnes/pptime pubdate datetime="2012-03-...
如今，HTML5发展飞速，被看做是web开发者创建流行web应用的利器。用HTML5开发的优势主要是这个技术可以进行跨平台进行使用。例如...
实例HTML5 caption标签用来为表格定义一个标题，使用示例如下：带有标题的表格：table border="1" captionMonthly savings/capti...
实例HTML5 fieldset标签用于对表单中的相关元素进行分组：form fieldset legendPersonalia:/legend Name: input type="text"br E...
