HTML5富界面设计产品模块.pptx

“黑马财富”的第6个任务是产品模块，产品模块在PC端每行显示三个产品，页面效果如图所示。 任务6-产品模块 任务描述 点击“黑马投资”标签可以切换标签页，产品模块在iPad上每行显示两种产品，页面效果如左图所示。 任务6-产品模块 任务描述 在iphone6 Plus上每行显示一种商品，页面效果如右图所示。 任务分析 了解了该任务要实现的效果后，接下来分析一下页面结构，如图所示。 任务6-产品模块 产品模块是基于Bootstrap的标签页实现的，所有内容包含在一个div.heima_product标签中，并且在div.heima_product中嵌套div.container布局容器。标签也分为两大部分：div.nav-tabs-product-parent(标签页的页签)和div.tab-content（每个页签对应的内容）。 页面的实现细节，具体分析如下： （1）div.nav-tabs-product-parent中嵌套ul标签，每个li就是一个标签。 （2）覆盖Bootstrap标签页原有的样式，另外，为了让所有标签显示在一行，ul的宽度需要等于所有li的宽度的和，这个操作需要借助JavaScript代码来完成，使用 innerWidth()方法来获取每个li内边距的宽度。 （3）div.tab-content中嵌套多个div.tab-pane，div.tab-pane就是页签对应的标签页，一个li标签对应一个div.tab-pane。 （4）所有产品都在第一页中显示，也就是说产品div都放在第一个div.tab-content中，每个产品的放在div. col-xs-12 col-sm-6 col-md-4中。 （5）引入Swipe.js插件来实现页面滑动的效果。 （6）在index.js中添加代码，实现产品标签页页签的横向滑动。 任务6-产品模块 任务分析 案例代码（详见教材 任务6-代码实现）