大家好，小信来为大家解答以上问题。导航条是什么，导航条很多人还不知道，现在让我们一起来看看吧！
1、 首先，在body标记中创建一个DIV，将其命名为“nav ”,并在DIV中创建一个无序列表。根据图中所示的列表，共有9项，每项都有一个超链接。因为是为了演示，所以以下每个链接都将被演示为空链接，代码如下：
2、 超文本标记语言
3、 头
4、 制作网页标题导航条/title
5、 风格
6、 ！- -
7、 /风格
8、 /头
9、 身体
10、 div id='nav '
11、 保险商实验所
12、 Lia=' #'/homepage /a/li
13、 lia=' # '/公司简介/a/li
14、 lia=' # '/产品介绍/a/li
15、 Lia=' #'/news /a/li
16、 lia=' # '/企业文化/a/li
17、 lia=' # '/招聘人才/a/li
18、 lia=' # '/联系我们/a/li
19、 lia=' # '/参观路线/a/li
20、 lia=' # '/最喜爱的网站/a/li
21、 /ul
22、 /div
23、 /body
24、 /html
25、 打开浏览器预览，您将看到以下结果：
26、 点击鼠标右键，将导航条的背景图片保存在电脑中，如下图所示：
27、 现在，让我们为导航条中的元素逐个设置CSS样式，首先为ul指定样式；代码如下：
28、 风格
29、 ！—
30、 #导航ul {
31、 宽度：1000px
32、 高度：40px
33、 边距：30px自动；
34、 填充：0；
35、 列表样式：无；
36、 边框-顶部：实心5px # DAA520
37、 边框-底部：实心5px # DAA520
38、 后台：URL(img/navig-BG . jpg)；
39、 }
40、 -
41、 /风格
42、 上述代码的含义是
43、 #导航ul {
44、 宽度：1000像素；
45、 高度：40像素；
46、 外部距离：上下30像素，左右相等；
47、 内部边距：0；
48、 样式显示：无；(这句话的意思是去掉列表前面的黑点)
49、 上边框线：实线，5像素，颜色# daa520
50、 下边框线：实线，5像素，颜色# daa520
51、 背景：URL(图片地址)；
52、 }
53、 打开浏览器预览，您将看到以下结果：
54、 然后用ul指定李的风格，代码如下：
55、 #导航ul li {
56、 浮动：左；
57、 文本对齐：居中；
58、 字体：16px/2.5 '微软雅黑'；
59、 }
60、 上述代码的含义是
61、 #导航ul li {
62、 宽度：100像素；
63、 浮动：向左对齐；
64、 文本对齐：居中；
65、 文字：大小16像素，行高162.5，字体“微软雅黑”；
66、 }
67、 打开浏览器预览，您将看到以下结果：
68、 下一步是为li中的link A标签指定样式。代码如下：
69、 #阿利导航{
70、 文字-装饰：无；颜色：# 800080；
71、 }
72、 这个代码表示一个元素文本修饰：none(表示去掉下划线)；默认文字颜色：#800080(色码)；
73、 #阿利导航：盘旋{
74、 显示：块；颜色：# FFFFFF背景：# DC143C
75、 }
76、 这段代码的意思是，当鼠标移动A元素时，显示为：block颜色#FFFFFF(白色)；背景：#DC143C(红色)；
77、 至此，这个导航条已经完成。当鼠标移动到“公司简介”的链接上时，该链接将显示为一个白底红字的块级元素，如下图所示：
78、 的所有样式代码如下：
79、 style type='text/css '
80、 #导航ul {
81、 宽度：1000px
82、 高度：40px
83、 边距：30px自动；
84、 填充：0；
85、 列表样式：无；
86、 边框-顶部：实心5px # DAA520
87、 边框-底部：实心5px # DAA520
88、 背景：url(images/navig-bg.jpg)
89、 }
90、 #导航ul li {
91、 宽度：100px
92、 浮动：左；
93、 文本对齐：居中；
94、 字体：16px/2.5 '微软雅黑'；
95、 }
96、 #阿利导航{
97、 颜色：# 800080；文字-装饰：无；
98、 }
99、 #阿利导航：盘旋{
100、 显示：块；颜色：# FFFFFF背景：# DC143C
101、 }
102、 /风格
本文到此结束，希望对大家有所帮助。
标签：
免责声明：本文由用户上传，如有侵权请联系删除！