生活中，很多人都不知道导航条的制作ppt_导航条，其实非常简单，下面就是小编搜索到的导航条的制作ppt_导航条相关的一些知识，我们一起来学习下吧！
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、/风格
本文到此结束，希望对大家有所帮助。
