HTML5富界面设计顶部通栏模块.pptx

任务2-顶部通栏模块 任务描述 “黑马财富”的第2个任务是完成顶部通栏模块，该项目的顶部通栏模块在PC端的页面 效果如图所示。 当鼠标悬停到“手机黑马财富”上时，会显示一个二维码，鼠标移开时二维码消失，这里假设该二维码用于下载“黑马财富”对应的手机APP，页面效果如图所示。 在移动端访问该页面时，隐藏整个顶部通栏。 了解了该任务要实现的效果后，接下来分析一下页面结构，如图所示。 在上图中顶部通栏的所有内容包含在一个header标签中，并且在header中嵌套div.container布局容器，通过栅格系统进行布局，将整个顶部通栏被划分为4个部分：div.col-md-2、div.col-md-5、 div.col-md-2、div.col-md-3。 任务2-顶部通栏模块 任务分析 页面的实现细节，具体分析如下： （1）第1个栅格（div.col-md-2）中，主要内容为a链接和二维码图片，文字的前后图标使用字体图标来实现。 （2）第2个栅格（div.col-md-5）中，包含字体图标和文字信息。 （3）第3个栅格（div.col-md-2）中，包含内容为两个a链接。 （4）第4个栅格（div.col-md-3）中，包含内容为两个a链接，不同的是两个链接使用了Bootstrap的按钮样式。 案例代码（详见教材 任务2-代码实现） 任务2-顶部通栏模块 任务分析