1、水平导航条
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>旅游路线</title><style type="text/css">body,ul,li{list-style: none;margin: 0;padding: 0;}body{background: url(img/img4.jpg);font-family: "微软雅黑";font-size: 14px;}a{text-decoration: none;}div{width: 100%;height: 40px;background: #F7F7B9;margin: 50px auto;}.topmenu{/*对无序列表的设置*/margin: 0 auto;width: 1200px;height: 40px;}.topmenu li{float: left;width: 120px;}.topmenu li a{display: block;width: 120px;height: 42px;line-height: 40px;color: red;text-align: center;}.topmenu li a:hover{color: white;background: #00FFFF;}</style></head><body><div class="topmenu"><ul><li><a href="#">雪域西藏</a></li><li><a href="#">天府四川</a></li><li><a href="#">稻城亚丁</a></li><li><a href="#">神奇九寨</a></li><li><a href="#">永恒三峡</a></li><li><a href="#">雄秀峨眉</a></li><li><a href="#">川藏万里</a></li><li><a href="#">城市驿站</a></li><li><a href="#">出国咨询</a></li></ul></div></body>
</html>
2.水平导航
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body,ul,li{margin: 0;padding: 0;list-style: none; }body{background: url(img/img2.jpg);font-family: "微软雅黑";font-size: 14px;}a{text-decoration: none;}nav{/*导航条的设置*/background: rgb(17,35,169);width: 100%;height: 42px;margin: 0px auto;}.navcon{/*对无序列表的设置*/margin: 0px auto;height: 42px;width: 1200px;}.navcon li{width: 120px;float: left;}.navcon li a{display: block;width: 120px;height: 42px;line-height: 42px;text-align: center;color: white;}.navcon li a:hover{color: #fff;background: red;}</style></head><body><nav><ul class="navcon"><li><a href="#">网站首页</a></li><li><a href="#">学院概况</a></li><li><a href="#">新闻中心</a></li><li><a href="#">机构设置</a></li><li><a href="#">教学科研</a></li><li><a href="#">团学在线</a></li><li><a href="#">招生就业</a></li><li><a href="#">公共服务</a></li><li><a href="#">信息公开</a></li><li><a href="#">统一信息门户</a></li></ul></nav></body>
</html>
3.水平导航
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>旅游路线</title><style type="text/css">body,ul,li{margin: 0;padding: 0;list-style: none;}body{background: url(img/img4.jpg);font-size: 14px;font-family: "微软雅黑";}a{text-decoration: none;}div{/*对导航条的设置*/background: #FF0000;margin: 50px auto;width: 100%;height: 42px;}.nav{/*对导航条无序列表的设置*/margin: 0px auto;width: 1200px;height: 42px;}.nav li{/*对导航列表中列表的每一项进行设置*/width: 11.1%;float: left;}.nav li a{display: block;width: 120px;height: 42px;line-height: 42px;text-align: center;color: #3C3C3C;}.nav li a:hover{color: #FFFFFF;background: aquamarine;}</style></head><body><div class="nav"><ul><li><a href="#">雪域西藏</a></li><li><a href="#">天府四川</a></li><li><a href="#">稻城亚丁</a></li><li><a href="#">神奇九寨</a></li><li><a href="#">永恒三峡</a></li><li><a href="#">雄秀峨眉</a></li><li><a href="#">川藏万里</a></li><li><a href="#">城市驿站</a></li><li><a href="#">出国咨询</a></li></ul></div></body>
</html>
4.水平导航菜单
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>纯css菜单</title><style type="text/css">*{margin: 0;padding: 0;}li{list-style: none;text-align: center;line-height: 24px;}a{text-decoration: none;color: #333333;font-size: 12px;line-height: 24px;display: block;}.b ul li{width: 120px;float:left;border:1px #333 dashed;background: #FFD2D2;}.b ul li ul{display: none;}.b ul li a:hover{color: #fff;background-color: #BB0916;}.b ul li:hover ul,.b ul li a:hover ul{display: block;width: 120px;height: 24px;}.b ul li ul li{background-color: #FEE;width: 120px;}.b ul ul li a:hover{background:#F7F7B9;color: #666666;}</style></head><body><div class="b"><ul><li><a href="#">首页</a><ul><li><a href="#">动态</a></li><li><a href="#">状态</a></li></ul></li><li><a href="#">企业新闻</a><ul><li><a href="#">企业介绍</a></li><li><a href="#">最新动态</a></li></ul></li><li><a href="#">产品信息</a><ul><li><a href="#">最新产品</a></li><li><a href="#">产品列表</a></li></ul></li><li><a href="#">特价促销</a><ul><li><a href="#">促销</a></li><li><a href="#">最新推存</a></li><li><a href="#">产品列表</a></li></ul></li><li><a href="#">联系我们</a><ul><li><a href="#">公司信息</a></li><li><a href="#">公司介绍</a></li></ul></li><li><a href="#">新手论坛</a></li></ul></div></body>
</html>
5.学院水平导航条
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>学院导航条的设置</title><style type="text/css">body,ul,li{margin: 0;padding: 0;list-style: none;}body{background: url(img/img4.jpg);font-size: 14px;font-family: "微软雅黑";}a{text-decoration: none;}nav{background: aquamarine;margin: 50px auto;width: 100%;height: 42px;}.navcon{/*对导航条中无序列表的设置*/width: 1200px;height: 42px;margin: 0px auto;position: relative;/*相对位置*/z-index: 111;/*导航条显示在最上面，不备其他内容覆盖*/}.navcon li{/*主菜单样式*/float: left;width: 120px;height: 42px;text-align: center;}.navcon li a{display: block;/*转化为块元素*/width: 120px;height: 42px;line-height: 42px;color: #000;}.navcon li ul{display: none;/*设置子菜单不可见*/width: 150px;}.navcon li:hover ul{display: block;/*鼠标悬停到主菜单项时，子菜单项可见*/}.navcon li ul li{/*子菜单样式*/background: #fff;width: 150px;height: 42px;line-height: 42px;border-top: 1px rgb(0,52,162) solid;}.navcon li ul li a{/*子菜单超链接样式*/display: block;width: 150px;height: 42px;line-height: 42px;text-align: center;color: rgb(55,25,25);}</style></head><body><nav class="navcon"><ul><li><a href="#">网站首页</a></li><li><a href="#">学院概况</a><ul><li><a href="#">学院简介</a></li><li><a href="#">学院荣誉</a></li><li><a href="#">国家级示范性软件学院</a></li><li><a href="#">高技能人才培训基地</a></li><li><a href="#">办公电话</a></li><li><a href="#">联系电话</a></li><li><a href="#">宣传视频</a></li></ul></li><li><a href="#">新闻中心</a><ul><li><a href="#">学校要闻</a></li><li><a href="#">系部动态</a></li><li><a href="#">通知公告</a></li></ul></li><li><a href="#">机构设置</a></li><li><a href="#">教学科研</a><ul><li><a href="#">教务管理系统</a></li><li><a href="#">精品课程</a></li><li><a href="#">教学辅助平台</a></li><li><a href="#">网络教学平台</a></li></ul></li><li><a href="#">团学在线</a></li><li><a href="#">招生就业</a><ul><li><a href="#">招生就业网</a></li><li><a href="#">就业信息网</a></li><li><a href="#">空中乘务</a></li></ul></li><li><a href="#">公众服务</a><ul><li><a href="#">图书馆</a></li><li><a href="#">信息公开</a></li><li><a href="#">健行缴费</a></li></ul></li><li><a href="#">信息公开</a></li><li><a href="#">统一信息门户</a></li></ul></nav></body>
</html>
6.超链接样式设置
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>超链接样式设置</title><style type="text/css">body{margin: 0;/*外边距*/padding: 0;/*内边距*/font-family: "微软雅黑";/*字体*/font-size: 14px;/*字号*/color: #3c3c3c;/*颜色*/}a{color: #4c4c4c;/*设置超链接颜色*/text-decoration: none;/*设置超链接下无下划线*/}a:hover{color: #FF8400;text-decoration: underline;/*设置鼠标悬停时超链接文字有下划线*/}</style></head><body><a href="#">学院简介</a><a href="#">学院新闻</a><a href="#">专业介绍</a><a href="#">招生就业</a></body>
</html>
7.无序列表样式的设置
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>无序列表样式的设置</title><style type="text/css">li{list-style: none;/*清除列表的默认样式*/height: 28px;line-height: 28px;background: url(img/book.png) no-repeat left center;/*设置列表项号*/padding-left: 25px;/*文字往右移动，使图像与文字不重叠*/}</style></head><body><h2>教学系部</h2><ul><li>电子与通信系</li><li>软件与大数据系</li><li>数字媒体系</li><li>智能制造系</li><li>现代服务系</li><li>经济与管理系</li><li>基础教学部</li><li>士官学院</li></ul></body>
</html>
8.垂直导航窗格
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>垂直导航窗格</title><style type="text/css">ul,li{list-style: none;width: 120px;height: 30px;line-height: 30px;margin-bottom: 1px;text-align: center;}ul li a{display: block;text-decoration: none;color: greenyellow;background: #4C4C4C;border-left: 10px solid red;}</style></head><body><ul><li><a href="#">心情日记</a></li><li><a href="#">学习心得</a></li><li><a href="#">工作笔记</a></li><li><a href="#">生活琐事</a></li><li><a href="#">联系我们</a></li></ul></body>
</html>
9.纵向导航条
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>纵向导航条</title><style type="text/css">ul li{list-style: none;width: 100px;height: 30px;line-height: 30px;text-align: center;margin-bottom: 1px;}ul li a{display: block;font-size: 14px;text-decoration: none;color: black;background: #00FFFF;border-left: 10px solid red;}ul li a:hover{color: green;background: #ADFF2F;}</style></head><body><ul><li><a href="#">首页</a></li><li><a href="#">美食</a></li><li><a href="#">养生</a></li><li><a href="#">保健</a></li><li><a href="#">健身</a></li><li><a href="#">饮料</a></li><li><a href="#">心理</a></li><li><a href="#">论坛</a></li></ul></body>
</html>
