HTML+CSS制作导航条
1、首先在<body>标签中建立一个DIV，为其命名为“nav”，在DIV中建立一个无序列表，根据图中所示列表共分为9个项目，并且每个项目都带有超链接，因为是做演示，以下的每个链接就以空链接来做示范，代码如下：
<html>
<head>
<title>制作网页导航条</title>
<style>
<!-- -->
</style>
</head>
<body>
<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>
<li><a href="#" />联系我们</a></li>
<li><a href="#" />来访路线</a></li>
<li><a href="#" />收藏本站</a></li>
</ul>
</div>
</body>
</html>
打开浏览器预览，看到的效果如下：
2、鼠标右键将导航条的背景图片先存入电脑，如下图：
3、现在来为导航条中的元素逐一设置CSS样式，先为ul规定样式；代码如下：
<style>
<!—
#nav ul {
Width:1000px;
height:40px;
margin:30px auto;
padding:0;
list-style:none;
border-top:solid 5px #DAA520;
border-bottom:solid 5px #DAA520;
background:url(img/navig-bg.jpg);
}
-->
</style>
上列代码的意思依次为
#nav ul {
宽度：1000像素；
高度：40像素；
外边距：上下各30像素，左右相等；
内边距：0；
列表风格显示：无;（这一句代表去掉列表前面的黑点）
上边框线：实体线，5像素，颜色#DAA520；
下边框线：实体线，5像素，颜色#DAA520；
背景：URL（图片地址）；
}
打开浏览器预览，看到的效果如下：
4、再为<ul>中的<li>规定样式，代码如下：
#nav ul li {
float:left;
text-align:center;
font:16px/2.5 "microsoft yahei";
}
上列代码的意思依次为
#nav ul li {
宽度：100像素；
浮动：左对齐；
文本对齐：居中；
文字：大小16像素，行高16×2.5，字体”微软雅黑”；
}
打开浏览器预览，看到的效果如下：
5、接下来就是为<li>里的链接<a>标签规定样式了，代码如下：
#nav ul li a {
text-decoration:none; color:#800080;
}
这句代码的意思是a 元素文字装饰：无（表示去掉下划线）； 默认下文字颜色：#800080（颜色代码）；
#nav ul li a:hover {
display:block; color:#FFFFFF; background:#DC143C;
}
这句代码的意思是当鼠标移上a元素时，显示为：块；文字颜色#FFFFFF（白色）；背景颜色：#DC143C（红色）；
到了这一步，这个导航条就已经完成了，当把鼠标移到“公司简介”这一链接时，链接就会显示为块级元素，文字显示白色，背景显示为红色，如下图所示：
6、所有的样式代码如下：
<style type="text/css">
#nav ul {
Width:1000px;
height:40px;
margin:30px auto;
padding:0;
list-style:none;
border-top:solid 5px #DAA520;
border-bottom:solid 5px #DAA520;
background:url(images/navig-bg.jpg)
}
#nav ul li {
width:100px;
float:left;
text-align:center;
font:16px/2.5 "microsoft yahei";
}
#nav ul li a {
color:#800080; text-decoration:none;
}
#nav ul li a:hover {
display:block; color:#FFFFFF; background:#DC143C;
}
</style>