仿淘宝移动端案例布局,学习资源下载-数智学院

仿淘宝移动端案例布局,学习资源下载

image.png

课程名称

仿淘宝移动端案例布局,学习资源下载

课程目录

1. 图片轮播

Bootstrap提供了图片轮播组件 carousel,carousel可以预置几张图片,也支持使用add方法动态增加图片。仿淘宝提供动态更新图片的能力,具体做法是预置一张图片,用于快速显示,再从服务端获取新的图片,动态增加到carousel中。

2. 二级门户图标

从“天猫”、“聚划算”到“宝箱”、“分类”的这十个图标,称为二级门户图标,以两行,五列的形式展现,单击其中的图标打开相应的二级门户页面。

使用Bootstrap 的table组件实现。在table中增加两行tr,每行增加五列td,每个td里面用image组件显示二级门户图标,用span组件显示二级门户名称。在td的单击事件中写代码打开二级门户页面。

3. 广告栏

由“淘抢购”、“有好货”、“爱逛街”和“每日首发”形成了一个广告栏。在电商首页中,这种形式的广告栏比比皆是。通过学习制作这种广告栏的方法,掌握Bootstrap 的row组件的原理,举一反三可以制作出其他形式的广告栏。界面设计如图1-40.

观察广告栏,一个广告栏就是一行,把这一行分为左右两列,左列中放“淘抢购”,右列中分为上下两行,上面的行里面放“有好货”,下面的行里面再分成两列,分别放“爱逛街”和“每日首发”。这样就形成了这种广告栏的格局。

接下来需要设置列的宽度,图片的宽度在设置为100%后,会根据所在列的宽度进行自适应,即列的高度由自适应后的图片的高度决定。Bootstrap在实现响应式布局时,使用行组件row(bootstrap),将row的宽度分为十二等份,通过样式设置每列占其中的几等份。占一等份的样式是col-xs-1,占两等份的样式是col-xs-2,以此类推占满一行的样式是col-xs-12,一行中不管有几列,他们的宽度样式加起来等于十二,就说明这几列会显示在一行中。

在这个广告栏中的四列都需要设置宽度样式,从效果上看,“淘抢购”所在的列应该设置样式为col-xs-5,表示占五等份,与之对应的右列占七等份,样式设置为col-xs-7。右列中又分为两行,上面一行“有好货”占满一行,设置列的样式为col-xs-12,下面一行中“爱逛街”和“每日首发”的宽度相同,各占六等份,样式都设置为col-xs-6。这些样式设置在列col的class属性上。

4. 双列列表

在“1.5.1 开发账目列表”一节中,使用list组件显示账目列表,一行显示一个账目信息,这种列表称为单列列表。即在一行中显示一个商品信息,就是单列列表,把一行分为左右两列,分别显示两个商品信息,就是双列列表。

相关说明
1、链接失效或无解压密码,请联系QQ:980264305
2、资源来源于网络公开发表文件,所有资料仅供学习交流
3、所收取费用来维持服务器运行,性质为用户友情赞助,并非售卖文件费用
4、如侵犯您的权益,请联系邮箱:980264305@qq.com
数智学院 » 仿淘宝移动端案例布局,学习资源下载

发表评论

提供最优质的资源集合

立即查看 了解详情