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