有哪些信誉好的足球投注网站- 1、本文档共4页，可阅读全部内容。
- 2、有哪些信誉好的足球投注网站（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
任务3-导航栏模块
该页面在iPad上的页面效果如图所示。
任务描述
“黑马财富”的第3个任务是导航栏，该项目的导航栏模块在PC端的页面效果如图所示。
任务3-导航栏模块
单击上图中的“ ’”汉堡按钮，汉堡菜单会展开，页面效果如右图所示。
任务描述
在iphone6 plus上会折叠导航菜单，同时出现一个“汉堡按钮”，页面效果如图所示。
了解了该任务要实现的效果后，接下来分析一下页面结构，如图所示。
任务3-导航栏模块
任务分析
图中的导航栏使用Bootstrap提供的响应式导航栏来完成，所有内容包含在一个nav标签中，并且在nav中嵌套div.container布局容器。整个导航栏被划分为2大部分：div.navbar-header和div.collapse。
页面的实现细节，具体分析如下：
（1）div.navbar-header中包含汉堡按钮button.navbar-toggle和a.nav-brand。
（2）div.collapse中主要包含普通导航菜单ul.navbar-nav和个人中心导航ul.navbar-right。
（3）a.nav-brand中包含企业log图片。
（4）ul.navbar-nav中包含普通菜单，Boostrap会在手机端自动实现汉堡菜单。
（5）ul.navbar-right中包含个人中心菜单。
任务3-导航栏模块
任务分析
案例代码（详见教材 任务3-代码实现）
文档评论（0）