第8章利用CSS制作导航菜单

8.1 水平顶部导航栏

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><center><h3>简单水平菜单导航栏</h3></center><hr /><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></ul></nav></body>
</html>

8.1.1 简单水平导航栏的设计与实现

8.1.1.1导航栏的创建

ul{list-style-type: none;}

8.1.1.2 列表样式的设计

li{float: left;}

8.1.1.3 超链接样式的设计

a{display: block;width: 80px;text-align: center;text-decoration: none;}

8.1.1.4 鼠标事件

a:link, a:visited{background-color: #ff0000;color: #ffffff;}a:hover, a:active{background-color: #ffffff;color: #ff0000;}

8.1.2 下拉子菜单导航栏的设计与实现

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css"></style></head><body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav></body>
</html>

8.1.2.1导航栏的创建

8.1.2.2 列表样式的设计

ul, ol{list-style-type: none;margin: 0;padding: 0;}ul li{float: left;}ul li ol li{float: none;}

8.1.2.3 二级菜单的隐藏和显示设计

ul li ol{display: none;}ul li:hover ol{display: block;}

8.1.2.4 DIV样式的设计

a{display: block;width: 80px;padding:10px;text-align: center;text-decoration: none;}

8.1.2.5 超链接样式的设计

ul li a{background-color: #ff0000;color: #ffffff;}ul li ol li a{background-color: #ffffff;color: #000000;}

8.1.2.6 鼠标事件

ul li a:hover, ul li a:active{border-bottom: #22aaff solid 4px;}ul li ol li a:hover, ul li ol li a:active{border-bottom: none;background-color: bisque;color: brown;}

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

8.2.1.1导航栏的创建

8.2.1.2 DIV样式的设计

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#nav{width: 150px;background-color: #aaccff;padding: 10px;}h3{text-align: center;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><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></ul></div></nav></body>
</html>

8.2.1.3 列表样式的设计

ul{margin: 0;padding: 0;list-style-type: none;}ul li{border: #000000 solid 2px;text-align: center;line-height: 30px;

8.2.1.4 超链接样式的设计

a{display: block;border: #000000 solid 2px;text-align: center;line-height: 30px;background-color: #ddccdd;color: aliceblue;text-decoration: none;}a:hover, a:active{background-color: blueviolet;color: aliceblue;}

a{display: block;/* border: #000000 solid 2px; */box-sizing: border-box;text-align: center;line-height: 30px;background-color: #ddaaee;color: aliceblue;text-decoration: none;}a:hover, a:active{background-image: url("img/bg.JPG");}

8.2.2 出式子菜单导航栏的设计与实现

8.2.2.1 导航栏的创建

8.2.2.2 DIV样式的设计

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>出式子导航栏的制作</title><style type="text/css">#nav{width: 150px;background-color: #00cc33;padding: 10px;}h3{text-align: center;color: #dddddd;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><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></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><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></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav></body>
</html>

8.2.2.3 二级菜单的隐藏和显示设计

ul li{height: 30px;line-height: 30px;text-align: center;position: relative;}ul li ol{display: none;position: absolute;left: 120px;}ul li ol a{display: block;width: 120px;background-color: #eeeeee;color: #00cc33;}ul li:hover ol{display: block;}

8.2.2.4 列表样式的设计

8.2.2.5 超链接样式的设计

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>出式子导航栏的制作</title><style type="text/css">#nav{width: 150px;background-color: #00cc33;padding: 10px;}h3{text-align: center;color: #dddddd;}ul li{height: 30px;line-height: 30px;text-align: center;position: relative;/* list-style-type: none; */}ul,ol{list-style-type: none;margin: 0;padding: 0;}ul li a{/* text-decoration: none; */display: block;width: 150px;background-color: yellow;color: black;}ul li a:hover, ul li a:active{background-image: url("img/bg2.JPG");}ul li ol{display: none;position: absolute;top: -1px;left: 150px;}ul li:hover ol{display: block;}ul li ol a{display: block;width: 110px;background-color: #eeeeee;color: #00cc33;text-decoration: none;}ul li ol a:hover, ul li ol a:active{background-color: #eeeeff;color: #0000cc;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><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></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><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></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav></body>
</html>

8.3 底部固定导航栏

8.3.1 导航栏的创建

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav></body>
</html>

8.3.2 列表样式的设计

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul{list-style-type: none;margin: 0;padding: 0;}li{float: left;}a{display: block;width: 80px;padding: 10px;text-decoration: none;text-align: center;}a:link, a:visited{background-color: #000000;color: #ffffff;}a:hover, a:active{background-color: #ffffff;color: #000000;}</style></head><body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav></body>
</html>

8.3.3 菜单固定底部的设计

.fix-footer{position: fixed;bottom: 0%;left: 37%;}

8.3.4 超链接样式的设计

a{display: block;width: 80px;padding: 10px;text-decoration: none;text-align: center;}

8.3.5 鼠标事件

a:link, a:visited{background-color: #000000;color: #ffffff;}a:hover, a:active{background-color: #ffffff;color: #000000;}

结果：

8.4 综合案例——优名养生馆

8.4.1 封面页的设计与实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>优名养生馆</title><style type="text/css">body{background-image: url("img/bg.jpg");background-repeat: no-repeat;background-size: 100%;}ul{margin: 0;padding: 0;list-style-type: none;}li{width: 25%;float: left;line-height: 50px;}img{margin-top: 70px;margin-right: 40px;}.footer{height: 50px;width: 100%;background-image: url("img/footer-bg0.jpg");border-top: 3px solid gray;text-align: center;z-index: 9998;position: fixed;bottom: 0;left: 0;}.footer-top{height: 90px;width: 90px;text-align: center;line-height: 90px;z-index: 9999;position: fixed;bottom: 0;left: 45%;}.footer-top a{border-radius: 90px;}.footer-top a:link, a:visited{display: block;font-size: 20px;color: brown;text-decoration: none;font-weight: bold;border-top: 3px solid gray;background-image: url("img/footer-top-bg1.jpg");}.footer-top a:hover{background-image: url("img/footer-top-bg2.jpg");color: white;}.footer a:link, a:visited{display: block;font-size: 20px;color: brown;text-decoration: none;font-weight: bold;}.footer a:hover{background-color: darkgray;border-left: 2px solid white;border-right: 2px solid white;font-size: 16px;color: red;}</style></head><body><div><marquee direction="right" scrollamount="20"><img src="img/marquee1.jpg"/><img src="img/marquee2.jpg"/><img src="img/marquee3.jpg"/></marquee></div><div class="footer-top"><a href="综合案例01.html">进入官网</a></div><div class="footer"><ul><li><a href="#">奇幻世界</a></li><li><a href="#">主题风采</a></li><li><a href="#">加盟相关</a></li><li><a href="#">友情推荐</a></li></ul></div></body>
</html>

8.4.2 主页的设计与实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>优名养生馆</title><style>body{background-image: url("img/bg.jpg");background-repeat: no-repeat;background-size: 100%;}.all{margin: 0px auto;width: 1300px;/* height: 1000px; */}.top{width: 1300px;height: 300px;background-image: url("img/top-bg01.jpg");background-repeat: no-repeat;background-size: 100%;}.cent{width: 300px;margin-left: auto;margin-right: auto;font-size: 58px;font-family: "楷体";color: lemonchiffon;font-style: italic;}.nav{width: 400px;float: left;margin-top: 30px;font-size: 40px;font-weight: bold;color: saddlebrown;}.main{width: 800px;height: 300px;float: left;margin-top: 10px;/* font-size: 50px; */}.footer{font-size: 16px;font-weight: bold;color: brown;text-align: center;clear: both;background-image: url("img/footer-bg0.jpg");}p{color: brown;font-size: 20px;}img{margin: 15px;}ul{list-style-type: none;}li{height: 40px;font-size: 20px;}a:link{font-size: 30px;text-decoration: none;color: brown;}a:hover{background-color: burlywood;color: white;}</style></head><body><div class="all"><div class="top"><br /><div class="cent">优名养生馆</div></div><nav><div class="nav"><table><tr>养生之道</tr><tr><ul><li><a href="#">运动养生</a></li><li><a href="#">四季养生</a></li><li><a href="#">健康检测</a></li></ul></tr><tr>中医养生</tr><tr><ul><li><a href="#">经络养生</a></li><li><a href="#">体质养生</a></li><li><a href="#">特色疗法</a></li></ul></tr></table></div></nav><div class="main"><img src="img/main01.jpg" align="left" width="350px"/><p>&emsp;&emsp;古人云:善养生者,上养神智、中养形态、下养筋骨。</p><p>&emsp;&emsp;养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以期达到保养、调养、颐养生命,实现人类健康、长寿的目的。</p><p>&emsp;&emsp;养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生,注重身体机能的维护和康复:也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老:心理层面的养生包括养心、养性、养神。</p></div><hr /><div class="footer">版权所有&copy;优名养生馆</div></div></body>
</html>