由于导航栏是几乎任何网页都必须具有的功能，所以学习他是我们必备的课程。下面，教程是通过代码实现由浅入深介绍导航栏，子菜单，以及样式，风格变化。首选需要认识<ul>和<ol>标签，<ul>是无序列表，<ol>是有序列表。<ol>有序列表在前端设计中基本上用的很少，制作网页导航栏，是通过无序列表<ul>来实现。
1.那么先看看有序列表是什么样的，ol标签。
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title></head><body><ol><li>苹果</li><li>梨子</li><li>橘子</li></ol><ol start="40"><li>咖啡</li><li>牛奶</li><li>茶</li></ol></body></html>
他的属性有一下几个；
运行下面的代码就可以看出有序列表的具体用法区别；
<!DOCTYPE html><html><body><ol><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ol start="50"><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ol reversed><li>咖啡</li><li>牛奶</li><li>茶</li></ol><p><strong>注释：</strong>目前只有 Chrome 和 Safari 6 支持 ol 元素的 reversed 属性。</p><ol type=A><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ol type=I><li>咖啡</li><li>牛奶</li><li>茶</li></ol></body></html>
2.其次的重点是通过无序列表ul标签来一步一步来设计网页菜单：
（1）.通过<ul>标签做一个如下的简单版菜单样式；
<ul><li>产品</li><li>关于我们</li><li>联系我们</li><li>首页</li></ul><ul><li>产品</li><li>关于我们</li><li>联系我们</li><li>首页</li></ul>
（2）.做一个如下的子菜单：
<ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul><ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul>
（3）.菜单横向排列：
<style>ul li{float:left;width:250px;height:20px}</style><ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul><style>ul li{float:left;width:200px;height:20px}</style><ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul>
（4）.去掉菜单字前面的圆圈原点:
<style>ul li{float:left;width:200px;height:20px}ul {margin:0px;padding:0px;list-style:none;></style><ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul><style>ul li{float:left;width:200px;height:20px}ul {margin:0px;padding:0px;list-style:none;></style><ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul>
（5）.更改菜单样式风格：
<style>ul li{float:left;width:200px;height:30px;background-color:green;opacity:0.8;}ul {margin:0px;padding:0px;list-style:none;></style><ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul><style>ul li{float:left;width:200px;height:30px;background-color:green;opacity:0.8;}ul {margin:0px;padding:0px;list-style:none;></style><ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul>
（6）.菜单间距调整：
间距：调整宽高像素就好，不透明度：调节opacity值，字体颜色：调节background-color
<style>ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}ul {margin:0px;padding:0px;list-style:none;></style><ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul><style>ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}ul {margin:0px;padding:0px;list-style:none;></style><ul><li>产品<ul><li>女装</li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul>
（7）.当然这个菜单是不能点击进入页面的，所以我们需要给其添加超链接a标签:
给女装添加一个超链接标签
<style>ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}ul {margin:0px;padding:0px;list-style:none;></style><ul><li>产品<ul><li><a href="" target="_blank" rel="noopener">女装</a></li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul><style>ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}ul {margin:0px;padding:0px;list-style:none;></style><ul><li>产品<ul><li><a href="" target="_blank" rel="noopener">女装</a></li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul>
（8）.给鼠标滑动的地方加颜色
<style>ul li{float:left;width:100px;height:40px;background-color:green ;opacity:0.8;} ul {margin:0px;padding:0px;list-style:none;} ul li a:hover {background-color:red} </style><ul><li>产品<ul><li><a href="" target="_blank" rel="noopener">女装</a></li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul><style>ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}ul {margin:0px;padding:0px;list-style:none;}ul li a:hover {background-color:red}</style><ul><li>产品<ul><li><a href="" target="_blank" rel="noopener">女装</a></li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul>
（9）.鼠标滑动显下拉菜单
<style>ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;} ul {margin:0px;padding:0px;list-style:none;}ul li ul li{display:none;} ul li:hover ul li{display:block;} ul li a:hover {background-color:red} </style><ul><li>产品<ul><li><a href="" target="_blank" rel="noopener">女装</a></li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul><style>ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}ul {margin:0px;padding:0px;list-style:none;}ul li ul li{display:none;}ul li:hover ul li{display:block;}ul li a:hover {background-color:red}</style><ul><li>产品<ul><li><a href="" target="_blank" rel="noopener">女装</a></li><li>男装</li><li>男鞋</li><li>女鞋</li></ul></li><li>关于我们</li><li>联系我们</li><li>首页</li></ul>
本文转载自qaozen博客。由qaozen分享到csdn社区。
