用户登录

产品页的内饰区域跟外观区域的显示差不多,内容结构是一样的,同样使用旋转木马的形式去展示这块内容,不太一样的地方是,内饰这块我只打算每次显示一张图片 ..

回到 product.html ... 整体地复制一下之前我们添加的外观内容这块代码,然后去修改里面的具体的内容就行了,内容的组织结构是完成一样的 ..

先修改一下这个包装上的 id ... 把 exterior-design 换成 interior-design

先修改一下里面的文字项目 ... 子标题换成 内饰 ...

在这个内容文件里,你可以找到内饰的区域上的具体的文字内容 ... 浏览到内饰区域 .. 复制一下其中的一个项目的标题 ..

把它粘贴到这里 ... 再复制一下描述内容 ... 替换一下这里的描述 ...

然后用同样的方法,再处理一下另外这两个文字项目 ..

完成以后再修改一下图像项目 ... 替换一下每个图像项目的图像的地址,这些地址在这个内容文字里你也可以找到 ...

下面我们再去配置一下这块区域的旋转木马功能 ... 在 main.js 里面 ..

内饰的旋转木马配置,跟外观区域的旋转木马的配置基本上是一样的,所以我们可以直接复制之前添加的这些配置 ..

修改一下元素的名字 ... 把 exterior-design 换成 interior-design ..

内饰的图像旋转木马每次只显示一个项目,把 slidesToShow 的值设置成 1 ..

完成以后,再到浏览器上预览一下 ...

产品页:内饰《 网页设计案例:产品页故事区 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点