01了解淘宝特效组件 很多网店里是怎么实现那些动态的效果，各种各样的功能，我们先了解一下怎么样能实现这些效果，淘宝里的 div和css跟普通网页有什么不同，什么是淘宝weidgt，这些组件都有什么特点，如何去用，整个先了解一下这些内容 
02突破淘宝对CSS样式的屏蔽 CSS配合DIV可以很好的来布局我我们的网页，可以淘宝为了维持自己的生态圈，以及为了规范网店页面，屏蔽了CSS样式，我们可以通过 STYLE标签来嵌入CSS样式，但是有部分CSS样式依然被淘宝屏蔽，所以我们要想办法突破些限制来实现装修网页的布局。 
03实现全屏装修 利用淘宝自己的CSS样式属性absolute，突破淘宝950区域限制，以及天猫990限制，详细学习下突破限制的原理，流程方法，CLASS的多重写法 以及调试代码的方法。 
04实现全屏轮播 详细了解淘宝Carousel 旋转木马组件的调用方式，以及使用方法，以及其参数的详细使用方式，了解学习之后分别调试其参数，来实现店铺的全屏轮播，感受不同参数带来的不同的轮播方式。 
05全屏轮播按钮&Popup弹出层组件 本节课程我们给我们上一节课程的全屏轮播组件 加上去左右控制按钮，要进行这一步就要利用Popup弹出层组件，详细学习Popup组件的调用方法，分别了解其各个参数含义，将弹出层组件嵌入在旋转木马Carousel里，实现精致的全屏轮播按钮。 
06全屏轮播缩略图导航 继续完善全屏轮播，利用全屏轮播navCls参数，制作出用来控制全盘轮播的缩略图图片导航，并利用activeTriggerCls制作出轮播时缩略图图片导航相应动态样式。 
07天猫全屏轮播&生成DW代码片断方便调用 基于淘宝全屏轮播代码，修改其class值为天猫自带class，让其能在天猫店铺正常运行，并对这些代码进行优化，存成DW的代码片段，方便以后工作调用。 
08Popup图片切换特效 使用淘宝特效组件Popup 实现鼠标移上去图片进行切换的效果，深入学习Popup组件的使用方法，以及参数的含义。 
09放大镜效果&元素切换 基于上节课程对代码进行修改，实现鼠标移上去会放大图片的效果，以及在图片上切换出其他图形元素的效果。 
10固定背景 详细学习了解实现固定背景所用到的淘宝CSS代码的写法，其各个参数的意义，理解固定背景的层次结构，以及在网店中的应用场景。 
11透明全屏背景 学习div style样式中 background-image参数的用法，配合全屏轮播实现空间感更强烈透明全屏轮播的实现方法，并且在全屏轮播图层之上再添加其他元素让透明质感更强烈。 
12固定背景视差滚动 利用 div style样式中 background-attachment:fixed;属性来固定div的背景，并设计出背景和前景分开的图片，配合实现有趣的滚动视差效果。 
13宫格轮播 利用之前学习的Carousel 旋转木马组件进行修改，把轮播内容区域 和缩略图片控制区域分开，按照自己的设计进行布局实现宫格滚动效果。 
14店招搜索框 做一个带搜索框的店招，充分了解，搜索框的基本结构，form input button 其参数以及属性的用法，用给其加上背景店招图片，然后使用div style样式里的 left top对搜索框进行定位布局。 
15全屏视频海报 学习使用embed 来插入视频，了解其参数，配合全屏海报实现视频嵌入到海报里的效果。 
16倒计时全屏海报 深入学习 Countdown 倒计时组件的用法，了解其中各个参数的意义以及写法，然后配合 div style样式进行布局，利用背景海报把倒计时和海报融为一体，形式大气的倒计时海报。 
17消除模块间的缝隙 在对网店进行装修时，常常会用到多个自定义模块，但每个模块之间淘宝默认存在缝隙，非常影响我们设计的美观，在这样情况下我们使用代码来消除这些缝隙，主要利用top 属性 来对div 进行偏移,从而消除缝隙。 
18导航css属性 想要自定义淘宝导航的样式就要用到导航css样式来进行定义，边框 背景 文字，响应鼠标变化等等都可以通过css样式来进行定义，但正因为参数太多，属性太多，所以很难对其进行控制，只能用一些工具来实现快速设置。 
19.结束语 
|
你可能喜欢
全部评论7