电子商务平台代码是多少，电子商务平台代码是多少位？

针对天猫已购买CSS权限的店铺来举例子，若你们的店铺没有购买这个CSS权限请忽略这篇文章，后期的文章我会介绍没有购买CSS权限的店铺也可以拥有漂亮的代码特效（由于gif图过大，很难上传头条的发表文章这里，故把特效做成单独视频的形式来展示）。首先上传代码，纯代码部分可以忽略不计，此代码是为了给喜欢的人复制粘贴收藏的。纯代码过后会有详细的中文解释。本代码都是经本人搜藏的满满的干货，是由天猫韩都衣舍的设计的，仅供学习之用，不做其他商业用途，先上图再代码如下：

这是首张图片的静止图样，想看效果可以看本账号的视频类目

CSS部分：

.hd_dblb0422{width:1920px;height:800px;overflow:hidden;position:relative;margin-left:-960px;left:50%;}

.hd_dblb0422 .h_con01{width:1920px;height:490px;margin-top:155px;}

.hd_dblb0422 .h_con01 li{width:640px;height:490px;float:left;background:#000;}

.hd_dblb0422 .h_con01 li img{width:640px;height:auto;float:left;opacity:0.8;filter:;}

.hd_dblb0422 .h_nav{width:1920px;height:800px;float:left;}

.hd_dblb0422 .h_nav li{width:70px;height:110px;float:left;margin-top:645px;margin-right:15px;}

.hd_dblb0422 .h_nav li .h_mask{width:1040px;height:800px;position:absolute;box-shadow:0 0 30px #000;z-index:1;left:440px;top:0;transform:scale(0.9);-webkit-transform:scale(0.9);opacity:0;visibility:hidden;transition:0.5s all ease-in-out;-webkit-transition:0.5s all ease-in-out;}

.hd_dblb0422 .h_nav li .h_mask img{width:1040px;height:800px;}

.hd_dblb0422 .h_nav li.h_active .h_mask{transform:scale(1);-webkit-transform:scale(1);opacity:1;visibility:visible;z-index:80;}

.hd_dblb0422 .h_nav li .h_img{width:70px;height:110px;position:relative;z-index:90;left:0px;top:0;border:2px solid #000;}

.hd_dblb0422 .h_nav li.h_active .h_img{border:2px solid #F03;}

.hd_dblb0422 .h_nav li .h_img img{width:70px;height:110px;}

.hd_dblb0422 .h_click{top:0;left:0;z-index:99;width:100%;height:0;}

.hd_dblb0422 .h_click span{position:absolute;z-index:10;top:330px;z-index:99;width:65px;height:128px;display:block;cursor:pointer;}

HTML部分：

</ul>

</div>

</li>

<div class=”h_mask”>img src=”img/Tmall/韩都衣舍/韩都衣舍10周年店铺设计/轮播8/2.jpg” width=”1040″ height=”800″ /> </div>

</li>

</li>

</li>

</li>

</div>

</li>

</li>

</li>

</li>

</li>

</ul>

</span>

</span>

</div>

千万不要被这密密麻麻的代码所吓倒，其实他们是有规律可循的，本人觉得CSS和html是易于找出规律，不象Javascript，逻辑性是真的太强了！对我而言，javascript太难了，好在，我们电商这里美工设计师不用太在意javascript，只需要知道一点HTML就好，CSS能知道些也可以，不用学得太多。

其实，div与div，div与li等的关系就属于包含与被包含，并列与并列的关系，做个比喻，就象在电脑的硬盘里新建个文件夹，然后在新的文件夹再新建个文件夹，然后一个文件夹里新建好多个文件夹，还有另一个比喻就是：父与子的关系，兄弟与兄弟的关系。

首先我们弄清楚个概念class，我们称div li 这些为标签，这些标签都应该有个名字，这个名字就是class，至于叫什么名字，可以随便取，可以有大名，小名等多个名字，比如：<div class=”hd_dblb0422 left465 hrel”> </div>它有很多个名字 hd_dblb0422 left465 hrel，为啥它要取那么多名字呢？因为便于管理，这个Class的名字不是唯一的，是可以多取的，重复的，也就是说，你能取这个名字，别人也可以取，你能叫李三，他也可以叫李三，说到刚才的便于管理，是因为CSS的原因，使他们都有个共同的CSS样式。所以这种名字的格式在写CSS样式的格式时是这样的.hd_dblb0422，前面有个英文的点。

另外div标签的取名还有另一种方式那就是：<div id=”hd_dblb0422″></div>，这种情况就不同了，这种取名方式是唯一的，就相当于我们每个人的身份证号，是唯一的，不能重复的，为啥要这样取名字呢，我个人觉得是为了便于写JavaScript，这个就不多说了。总之看多了，你就会慢慢体会明白。所以这种名字的格式在写CSS样式时是这样的#hd_dblb0422，前面是个井号。

天猫规定，凡是购买CSS权限的，在写CSS样式时，都要在他们前面加个前缀，例如：#page #content.hd_dblb0422 .h_con01{width:1920px;height:490px;margin-top:155px;} 懂的人自然会发现这点。很多购买CSS权限的店铺都是这个规律。

这位韩都衣舍的前端设计师对这个轮播代码很有创意性！

创意性1：我们平常的轮播图都基本是1920px宽的，高的话，并无什么明确的界限，不过我们通常都是取1920×500,1920×600,1920×800等，甚至1920×1080的满屏幕，这次的轮播TA反其道而行，把1920的宽度分成了三等分，也就是每一等分的宽度是640px，刚好最底部的容器div可以容纳3张640宽的图片。

创意性2：<div class=”h_mask” ></div>突破了<li class=”ks-switchable-trigger-internal4225″>父级标签元素的束缚显示出来了，！！！这很大胆！所以都少不了position:absolute这个绝地位置的属性与left:440px;top:0px的相结合啊！

学好position的relative和absolute，也就是位置的相对定位和绝对定位是必不可少的。

总之，若你店铺的轮播代码有这种装修风格，确实是大气啊！想当年韩都衣舍10周年庆典活动，这位应该是网页设计师的前辈，单单把天猫的轮播代码玩了个十几种特效出来，确实挺厉害的！这就是天猫轮播代码所带来的无限魅力！如今韩都衣舍的PC端已经没有当年的特效装修巅峰，很大一部分都是手机“革命”造成的，从那时候起，PC端流量已“死”，只看手机端。如今的PC店铺就如共同鸡肋一般，食之无味，弃之可惜。我也针对这个问题，对要不要发表关于这方面文章的问题思来想去，但最后还是觉得对今后的手机店铺开发有一定的学习作用吧，至少在创意方面，所以就决定先做起来，看看有什么反应。

由于轮播代码特效的视频比较大，不能上传到发表文章这里，本人试过了。若有想看轮播动态特效的，可以找对应的视频观看，视频的标题基本和文章的标题一样。

后续关于更多天猫轮播代码特效的文章还会发表，中间会也会发表一些京东商场代码装修方面的东西，期望更多喜欢这方面的粉丝能够关注加入一起探讨。

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 sumchina520@foxmail.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.maihuoo.com/22401.html