8.1 水平顶部导航栏
水平菜单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。
8.1.1 简单水平导航栏的设计与实现
8.1.1.1导航栏的创建
<nav>标签是HTML5新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内容整合，所以常用<nav>标签在页面上创建导航栏菜单区域。
例如，在<nav>的首尾标签之间使用无序列表<ul>标签配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接，用户可根据实际情况改成具体的URL地址。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/* 8.1 水平顶部导航栏 *//* 8.1.1 简单水平导航栏的设计与实现 *//* 8.1.1.1导航栏的创建 *//* 8.1.1.2 列表样式的设计 *//* 8.1.1.3 超链接样式的设计 *//* 8.1.1.4 鼠标事件 *//* 8.1.2 下拉子菜单导航栏的设计与实现 *//* 8.1.2.1导航栏的创建 *//* 8.1.2.2 列表样式的设计 *//* 8.1.2.3 二级菜单的隐藏和显示设计 *//* 8.1.2.4 DIV样式的设计 *//* 8.1.2.5 超链接样式的设计 *//* 8.1.2.6 鼠标事件 *//* 8.2 纵向侧边导航栏 */</style></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.2 列表样式的设计
此时会带有<ul>元素的默认样式，即每一列表选项前面有实心点标记，可以利用CSS在<head>标签中进行声明，对列表样式进行改变。
使用 list-style-type 属性去掉默认标记，为了预防不同的浏览器会出现预设值，设置 margin 和 padding 属性为0，避免最终布局效果可能产生的误差，为了使列表效果在同一行显示，为<li>列表选项定义浮动效果。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/* 8.1 水平顶部导航栏 *//* 8.1.1 简单水平导航栏的设计与实现 *//* 8.1.1.1导航栏的创建 *//* 8.1.1.2 列表样式的设计 */ul{list-style-type: none;}li{float: left;}/* 8.1.1.3 超链接样式的设计 *//* 8.1.1.4 鼠标事件 *//* 8.1.2 下拉子菜单导航栏的设计与实现 *//* 8.1.2.1导航栏的创建 *//* 8.1.2.2 列表样式的设计 *//* 8.1.2.3 二级菜单的隐藏和显示设计 *//* 8.1.2.4 DIV样式的设计 *//* 8.1.2.5 超链接样式的设计 *//* 8.1.2.6 鼠标事件 */</style></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.3 超链接样式的设计
利用CSS为超链接重新设置样式，例如，对超链接的 a：link 和 a：visited 进行设置，表示超链接未被访问和已访问状态。然后将其 display 属性设置为 block ，使得超链接成为块级元素，这样才可以为超链接设置像素的宽度。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/* 8.1 水平顶部导航栏 *//* 8.1.1 简单水平导航栏的设计与实现 *//* 8.1.1.1导航栏的创建 *//* 8.1.1.2 列表样式的设计 */ul{list-style-type: none;}li{float: left;}/* 8.1.1.3 超链接样式的设计 */a{text-decoration: none;display: block;width: 100px;text-align: center;}/* 8.1.1.4 鼠标事件 *//* 8.1.2 下拉子菜单导航栏的设计与实现 *//* 8.1.2.1导航栏的创建 *//* 8.1.2.2 列表样式的设计 *//* 8.1.2.3 二级菜单的隐藏和显示设计 *//* 8.1.2.4 DIV样式的设计 *//* 8.1.2.5 超链接样式的设计 *//* 8.1.2.6 鼠标事件 */</style></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.4 鼠标事件
利用CSS为 a:hover 和 a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/* 8.1 水平顶部导航栏 *//* 8.1.1 简单水平导航栏的设计与实现 *//* 8.1.1.1导航栏的创建 *//* 8.1.1.2 列表样式的设计 */ul{list-style-type: none;}li{float: left;}/* 8.1.1.3 超链接样式的设计 */a{text-decoration: none;display: block;width: 100px;text-align: center;}a:link,a:visited{background-color: #ff0000;color: #ffffff;}a:hover,a:active{background-color: #ffffff;color: #ff0000;}/* 8.1.1.4 鼠标事件 *//* 8.1.2 下拉子菜单导航栏的设计与实现 *//* 8.1.2.1导航栏的创建 *//* 8.1.2.2 列表样式的设计 *//* 8.1.2.3 二级菜单的隐藏和显示设计 *//* 8.1.2.4 DIV样式的设计 *//* 8.1.2.5 超链接样式的设计 *//* 8.1.2.6 鼠标事件 */</style></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.2 下拉子菜单导航栏的设计与实现
8.1.2.1导航栏的创建
仍然是在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有列表<al>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接就址当前设置为空链接。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">/* 8.1.2.1导航栏的创建 *//* 8.1.2.2 列表样式的设计 *//* 8.1.2.3 二级菜单的隐藏和显示设计 *//* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 *//* 8.1.2.6 鼠标事件 */</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.2 列表样式的设计
此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CS5在deab签中进行声明，对列表样式进行改变。
同样，使用 list-style-type属性去掉默认标记，设置margin和padding 属性为0，为<li>选项定义浮动效果，设置 text-decoration属性 none。这里使用通配符“*”整体设置。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 8.3.1 导航栏的创建 *//* 8.3.2 列表样式的设计 */ul{list-style-type: none;margin: 0;padding: 0;}li{float: left;}/* 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: #0000ff;color: #ffff00;}a:hover,a:active{background-color: #ffff00;color: #0000ff;}/* 8.3.3 菜单固定底部的设计 */.fix-footer{position: fixed;//底部菜单栏固定bottom: 0;}</style></head><body><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><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.4 超链接样式的设计
利用CSS 为超链接重新设置样式，对超链接的a:link 和a:visited进行设置，表示超链接未被访问和已访问状态。然后将其display属性设置为block，使得超链接成为块级元素。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 8.3.1 导航栏的创建 *//* 8.3.2 列表样式的设计 */ul{list-style-type: none;margin: 0;padding: 0;}li{float: left;}/* 8.3.4 超链接样式的设计 */a{display: block;width: 80px;padding: 10px;text-decoration: none;text-align: center;}/* 8.3.5 鼠标事件 *//* 8.3.3 菜单固定底部的设计 */</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.5 鼠标事件
利用CSS为a:hover 和a:active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 8.3.1 导航栏的创建 *//* 8.3.2 列表样式的设计 */ul{list-style-type: none;margin: 0;padding: 0;}li{float: left;}/* 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: #0000ff;color: #ffff00;}a:hover,a:active{background-color: #ffff00;color: #0000ff;}/* 8.3.3 菜单固定底部的设计 */</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.4 综合案例——优名养生馆
利用链接，列表，DIV，和CSS设计制作网页。
8.4.1 封面页的设计与实现
（1）封面页页面布局较简单，要求有正文和底部两块区域，用于放图片信息和底部导航信息，而底部导航又根据优先级分上层的圆球菜单和下层的水平菜单。
（2）利用超链接为底部区域先添加圆球导航，并设置相应的CSS样式。
（3）利用列表为底部区域后添加水平导航，并设置相应的CSS样式。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>优名养生馆</title><style type="text/css">body{background-image: url(img/bg.JPG)}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-bg.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><nav><div class="footer-top"><a href="index.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></nav></body>
</html>
8.4.2 主页的设计与实现
主页页面布局要求有页头、正文和页脚三块区域。页头完成背景图片的添加和店名的输人;正文分左右两部分，分别完成侧边纵向导航和图文信息的添加;页脚完成版权信息。页头、正文和页脚三块区域均包含在div-all区域内。
（1）为页头区域添加背景图片，并加人嵌套的div，添加店名信息，最后设置相应的 CSS 样式。
（2）为正文区域左边添加纵向导航信息，并设置相应的CSS样式。
（3）为正文区域右边添加·图文信息，并设置相应的CSS样式。
（4）为页脚区域添加版权信息，并设置相应的CSS样式。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>优名养生馆</title><style>body{background-image: url(img/bg.JPG);}.all{margin: 0px auto;width: 900px;}.top{width: 900px;height: 225px;background-image: url(img/top-bg.jpg);}.cent{width: 320px;margin-left: auto;margin-right: auto;font-size: 58px;font-family: "楷体";color: lemonchiffon;font-style: italic;}.nav{width: 200px;float: left;margin-top: 30px;font-size: 20px;font-weight: bold;color: saddlebrown;}.main{width: 700px;height: 300px;float: left;margin-top: 10px;}.footer{font-size: 14px;font-weight: bold;color: brown;text-align: center;clear: both;background-image: url(img/footer-bg.jpg);}p{color: brown;font-size: 16px;}img{margin: 15px;}ul{list-style-type: none;}li{height: 22px;}a:link{font-size: 16px;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/main.jpg" align="left"/><p>  古人云：善养生者，上养神智、中养形态、下养筋骨。</p><p>  养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则，运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法，以期达到保养、调养、颐养生命，实现人类健康、长寿的目的。</p><p>  养生，是养护保养生命，已达长寿。养生是指有目的的通过各种手段护养人体生命的行为，即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生，注重身体机能的维护和康复；也包括心理层面的养生，腔调内在精神的平衡和祥和。按照层次划分，生理层面的养生也包括养颜、养体、养老；心理层面的养生包括养心、养性、养神。</p></div><hr/><div class="footer">版权所有©优名养生馆</div></div></body>
</html>
