【布局】慕课网实战宣传页面的banner及nav
继续学习布局咯：
先看一篇讲述命名规范的文章吧，也摘录一些经典命名放在下面👇：
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner
先看一下banner的效果图啦：
在这个banner上，不看背景图片，其上的文字部分共有三个，如图所标识。
banner效果图
而代码的截图如下：一个class 为header的div就包括了昨天的工作量咯。余下的粉红色的框框就是整个的banner，而绿色部分，则是上面所说的1、2、3个小模块，分别是三个div。其中，path是左上角的小路径，extra是右上角的分享按钮，而info-wrap就是中间的课程信息了。
banner代码示意图
1和2都比较简单，也在其中进行了说明，下面说一下3吧，它有四个div呢，分别是隐藏的h1页面标题，课程信息，价格，购买按钮，具体如下所示：
3的代码示意图
但看完这些并没有看到背景图片呢，哈哈，接下来就有啦：
背景图片代码示意图
先看一下nav的效果图啦：
这个是普通版的Nav效果图呢：
课程Nav普通版效果图
但当鼠标滑动，比如视频恰好到浏览器那里时，又会出现一个固定在上方的Nav。这个特殊版出现，那个普通版就隐藏了呢。
课程Nav特殊版效果图
于是，这个Nav部分的代码分析如下：
在这个部分，是课程宣传啦，包括介绍、章节、咨询、评价等所组成的Nav，因为有两个不会同时出现的Nav，一个普通版，一个固定版，而且还有一个宣传视频，于是，这个部分大的模块来说是三个div呢。
Nav代码示意图
普通版的Nav，它里面我们学习了clearfix:after到底在讲什么~ 还有就是锚点的命名要规范。
课程Nav普通版代码示意图
特殊版的Nav，它里面我们学习position为fixed，以及与header相似的布局模式。
课程Nav特殊版代码示意图
宣传视频，它里面我们学习隐藏真正的播放器，而是自己控制样式。但播放器的逻辑还是有点点复杂，我现在还不太懂。
宣传视频代码示意图
码到这里来个小小总结啦：
banner部分，使用了两个div，一个div控制内容，一个div控制图片。其中，内容模块width是1200，整个图片的width是1742px，但对其设置为width为100%，height也为100%，就有了大气的banner了。
Nav部分，使用了三个div，两个Nav不会同时出现，但这个很巧妙啦，而且，还有视频的显示那里，只是自己还没有看得太懂。继续加油💪吧。
