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;hei爿讥旌护ght: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>