你们好，最近小活发现有诸多的小伙伴们对于导航条的制作，导航条这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、首先在<body>标签中建立一个DIV，为其命名为“nav”，在DIV中建立一个无序列表，根据图中所示列表共分为9个项目，并且每个项目都带有超链接，因为是做演示，以下的每个链接就以空链接来做示范，代码如下：
2、<html>
3、<head>
4、<title>制作网页导航条</title>
5、<style>
6、<!-- -->
7、</style>
8、</head>
9、<body>
10、<div id="nav">
11、 <ul>
12、 <li><a href="#" />网站首页</a></li>
13、 <li><a href="#" />公司简介</a></li>
14、 <li><a href="#" />产品展示</a></li>
15、 <li><a href="#" />新闻动态</a></li>
16、 <li><a href="#" />企业文化</a></li>
17、 <li><a href="#" />招贤纳士</a></li>
18、 <li><a href="#" />联系我们</a></li>
19、 <li><a href="#" />来访路线</a></li>
20、 <li><a href="#" />收藏本站</a></li>
21、</ul>
22、</div>
23、</body>
24、</html>
25、打开浏览器预览，看到的效果如下：
26、鼠标右键将导航条的背景图片先存入电脑，如下图：
27、现在来为导航条中的元素逐一设置CSS样式，先为ul规定样式；代码如下：
28、<style>
29、<!—
30、#nav ul {
31、Width:1000px;
32、height:40px;
33、margin:30px auto;
34、padding:0;
35、list-style:none;
36、border-top:solid 5px #DAA520;
37、border-bottom:solid 5px #DAA520;
38、background:url(img/navig-bg.jpg);
39、}
40、-->
41、</style>
42、上列代码的意思依次为
43、#nav ul {
44、宽度：1000像素；
45、高度：40像素；
46、外边距：上下各30像素，左右相等；
47、内边距：0；
48、列表风格显示：无;（这一句代表去掉列表前面的黑点）
49、上边框线：实体线，5像素，颜色#DAA520；
50、下边框线：实体线，5像素，颜色#DAA520；
51、背景：URL（图片地址）；
52、}
53、打开浏览器预览，看到的效果如下：
54、再为<ul>中的<li>规定样式，代码如下：
55、#nav ul li {
56、float:left;
57、text-align:center;
58、font:16px/2.5 "microsoft yahei";
59、}
60、上列代码的意思依次为
61、#nav ul li {
62、宽度：100像素；
63、浮动：左对齐；
64、文本对齐：居中；
65、文字：大小16像素，行高16×2.5，字体”微软雅黑”；
66、}
67、打开浏览器预览，看到的效果如下：
68、接下来就是为<li>里的链接<a>标签规定样式了，代码如下：
69、#nav ul li a {
70、text-decoration:none; color:#800080;
71、}
72、这句代码的意思是a 元素文字装饰：无（表示去掉下划线）； 默认下文字颜色：#800080（颜色代码）；
73、#nav ul li a:hover {
74、display:block; color:#FFFFFF; background:#DC143C;
75、 }
76、这句代码的意思是当鼠标移上a元素时，显示为：块；文字颜色#FFFFFF（白色）；背景颜色：#DC143C（红色）；
77、到了这一步，这个导航条就已经完成了，当把鼠标移到“公司简介”这一链接时，链接就会显示为块级元素，文字显示白色，背景显示为红色，如下图所示：
78、所有的样式代码如下：
79、<style type="text/css">
80、#nav ul {
81、Width:1000px;
82、height:40px;
83、margin:30px auto;
84、padding:0;
85、list-style:none;
86、border-top:solid 5px #DAA520;
87、border-bottom:solid 5px #DAA520;
88、background:url(images/navig-bg.jpg)
89、}
90、#nav ul li {
91、width:100px;
92、float:left;
93、text-align:center;
94、font:16px/2.5 "microsoft yahei";
95、}
96、#nav ul li a {
97、color:#800080; text-decoration:none;
98、}
99、#nav ul li a:hover {
100、display:block; color:#FFFFFF; background:#DC143C;
101、}
102、</style>
以上就是导航条这篇文章的一些介绍，希望对大家有所帮助。
标签：
免责声明：本文由用户上传，如有侵权请联系删除！