SimoneHTML+CSS制作导航条
的有关信息介绍如下：
今天无意中看到一个网站的导航条，觉得效果还不错，而且制作也很简单，就自己试着用HTML+CSS做了个一模一样的，下面就把导航条的制作方法及步骤分享给大家！
工具/原料
网页编辑工具或记事本
HTML+CSS代码
方法/步骤
1
首先在标签中建立一个DIV，为其命名为“nav”，在DIV中建立一个无序列表，根据图中所示列表共分为9个项目，并且每个项目都带有超链接，因为是做演示，以下的每个链接就以空链接来做示范，代码如下：
制作网页导航条网站首页
公司简介
产品展示
新闻动态
企业文化
招贤纳士
联系我们
来访路线
收藏本站
打开浏览器预览，看到的效果如下：
2
鼠标右键将导航条的背景图片先存入电脑，如下图：
3
现在来为导航条中的元素逐一设置CSS样式，先为ul规定样式；代码如下：
#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);
}
-->
上列代码的意思依次为
#nav ul {
宽度：1000像素；
高度：40像素；
外边距：上下各30像素，左右相等；
内边距：0；
列表风格显示：无;（这一句代表去掉列表前面的黑点）
上边框线：实体线，5像素，颜色#DAA520；
下边框线：实体线，5像素，颜色#DAA520；
背景：URL（图片地址）；
}
打开浏览器预览，看到的效果如下：
4
再为
中的规定样式，代码如下： #nav ul li {
float:left;
text-align:center;
font:16px/2.5 "microsoft yahei";
}
上列代码的意思依次为
#nav ul li {
宽度：100像素；
浮动：左对齐；
文本对齐：居中；
文字：大小16像素，行高16×2.5，字体”微软雅黑”；
}
打开浏览器预览，看到的效果如下：
5
接下来就是为
里的链接标签规定样式了，代码如下： #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
所有的样式代码如下：
#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;
}
END
