第5章 导航栏.ppt

总结 导航菜单可以使用户快速链接到相关页面 导航菜单分为垂直导航、水平导航以及下拉式导航 导航菜单的制作主要采用div、span和ul定义 使用float:left可以保证菜单项在同一水平线显示 * * 第5章　导航栏 内容回顾 Background属性的常用参数包括backgorund-image、background-repeat、background-position等 css Sprites是一种图片整合技术，通过背景定位方式设置合适的背景 滑动门技术是指采用两张背景图片重叠的方式并根据文本内容多少来改变重叠部分的大小，以达到自适应效果 本章内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 本章目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 为什么需要导航菜单 页面导航使用户在网站浏览中有明确的方向 可以快速链接到相关内容页面 页面导航的分类 水平导航菜单 垂直导航菜单 下拉式菜单 1.水平导航菜单 1.1　横向文本导航 横向文本导航可应用于网站页面内容多、风格多样的门户网站 实现思路 主要分成站标和内容两大部分 内容部分使用ul和li搭建，ul中采用两个li将内容块分隔两行显示 使用若干超链接定义菜单 内容部分 logo 横向文本导航 实现步骤： 第一步：定义导航框架 div class=globalMenu 　　div class=title网站logo/div 　　div class=content 　　　div class=menu s1 stroke 　　　　ul 　　　　　li第一栏第一行/li 　　　　　li class=lineH第二栏第二行/li 　　　　/ul 　　　/div 　　/div /div 第一行 第二行 横向文本导航 第二步：添加菜单内容 li a href=# class=tip新闻/a　 a href=#军事/a a href=#图片/a a href=#评论/a /li li class=lineH a href=# class=tip体育/a　 a href=#NBA/a　 a href=#CBA/a　 a href=#中超/a /li 横向文本导航 第三步：添加样式规则 .globalMenu{margin:0 auto; width:550px; height:45px; background:#fff; border:1px solid #CBCBCB;} .globalMenu .title{float:left; width:140px; padding:6px 0 0;} 导航栏容器 .globalMenu .content{ float:left; width:400px; margin:5px 0 0;} /*定义显示内容的li样式*/ .globalMenu .content .menu{ float:left;overflow:hidden; height:36px;} .globalMenu .content .menu li{clear:both; text-align:left; padding:2px 0 0 13px;} .globalMenu .content .s1{width:150px;} /*定义li的右边框样式*/ .globalMenu .content .stroke{border-right:1px solid #ccc;} /*定义第二行的li行高*/ .globalMenu .content .lineH{line-height:22px;} .globalMenu .content .tip{font-weight:bold;} 导航栏内容部分 效果演示 1.2　tab导航 tab导航适用于导航菜单文本较少的页面，可以强化页面视觉效果 Tab标签导航 tab导航 实现思路 菜单的结构采用无序列表ul和li标签实现 菜单内容使用a标签定义，使用display属性结合width、height定义菜单的大小 使用样式属性float将li标签定义成浮动元素，保证在同一水平线显示所有菜单 导航菜单结构 div id=navlist ul lia href=#首页/a/li lia href=#文章/a/li lia href=#参考/a/li lia href=#Blog/a/li lia href=#论坛/a/li lia href=#联系/a/li /ul /div tab导航 定义无序列表样式规则 超链接在链接状态下的样式规则 超链接在鼠标