淘宝的每个店铺是谁写的代码(淘宝店铺网页代码)

天猫商城的建立,开启了互联网的竞相发展,之后京东,苏宁,唯品会等等也群雄并起,给我们这个时代注入了更多的新名词,如:电子商务,网购,网店,快递,物流等等。

随着电子商务的蓬勃发展催生了各种各样的工作岗位:运营,推广,活动策划,设计,美工,摄影,客服 ,物流等。然而,这个时代,他们都要以销售为目的而开展工作。

很有幸,遇上了自己喜欢的事情,也从当初的小白变成了小油条了,有幸遇上了天猫店铺的强大轮播功能!曾经很疯狂为之迷醉。

一个轮播代码尽然能创造出如此多的特效和功能,在此,我写这些文章的初衷是给予那些想要在这方面有所进步的爱好者看的,也许我的看法存在一定的水平,如果 有大神,还望请多指教更正。

好了,开头的话就不多说,现在正式进入正题。

天猫店铺的轮播代码究竟是怎样的代码呢?代码有很多种,比如:C++,PHP,JAVA,CSS等等,我具体要讲的就是CSS和html,另外可能会附带些Javascript,由于本人是自学的,所以只学了点CSS和html的皮毛,虽然是皮毛,但希望多少能给你们想学的,正在学的后来人一点帮助,让你们少走点弯路,如果想学这些,就要尽早下定决心,如果想放弃,可以尽早,说句题外话,从事代码工作的,确实跟学医一样,要学的东西很多,不过道路也是很艰辛的,尤其不是科班出身的。

好了,话题扯远了,言归正传。

如今,天猫和淘宝店铺的代码已经很成熟了,曾经的PC端是那么如火如荼,如今手机端的兴起,更是衬托了PC端已经不那么重要,虽然如此,PC端仍然有借鉴和参考的用途。从事过美工设计的同行们也许都知道,要装修网店,必须多多少少知道点HTML,甚至CSS,在最初的时候,美工设计们切图的方式还是以tr,td表格的形式出现,如今更多是以DIV和li标签的出现,学过一点HTML的都知道,他们是网页语言的标签,是成对出现的。即<div></div><li></li>等。

天猫和淘宝轮播代码由设计师支配自由书写的地方有两大组成部分,就是CSS和HTML(前提是店铺购买了CSS权限,在天猫和淘宝是需要花钱购买的,这一点不同于京东和苏宁,后两者是免费的),一般大的店铺都有购买,比如:韩都衣舍,天之眼等等。天猫的轮播图片代码一般都是由焦点大图,箭头,轮播序号或者小焦点组成。例如:

3张1920PX宽的大海报,左右箭头,三个小焦点

<div class=”kv1920″>

<div class=”J_TWidget mycarousel” data-widget-type=”Carousel” data-widget-config=”{‘viewSize’:[1920],’disableBtnCls’:’disable’,’nextBtnCls’:’next’,’delay’:0.2,’navCls’:’myshb-nav’,’contentCls’:’myksc-content’,’effect’:’fade’,’prevBtnCls’:’prev’,’circular’:true,’easing’:’easeOutStrong’,’steps’:1,’autoplay’:true}” style=”width:1920px;height:650px;position:relative;” data-widget-init=”1″>

<div class=”prev disable” style=”z-index:10;” data-spm-anchor-id=”a1z10.1-b-s.5003-18639719939.i1.325f3f44NTA5mF”> </div>

<div class=”next” style=”z-index:10;”> </div>

<div class=”scroller” style=”text-align:center;”>

<div class=”sc-ementer”>

<ul class=”myksc-content”>

<li class=”ks-switchable-panel-internal211″ style=”display: block; opacity: 0; position: absolute; z-index: 1;”>

<a href=”//huaweistore.tmall.com/p/rd970851.htm?spm=a1z10.1-b-s.w5003-18639719939.1.325f3f44NTA5mF&scene=taobao_shop” target=”_blank” data-spm-wangpu-module-id=”5003-18639719939″ data-spm-anchor-id=”a1z10.1-b-s.w5003-18639719939.1″>

<img src=”//gdp.alicdn.com/imgextra/i3/2838892713/O1CN011VuayqIjZ5bzdsH_!!2838892713.jpg” border=”0″ data-spm-anchor-id=”a1z10.1-b-s.5003-18639719939.i0.325f3f44NTA5mF”></a>

</li>

<li class=”ks-switchable-panel-internal211″ style=”display: block; opacity: 0; position: absolute; z-index: 1;”>

<a href=”//huaweistore.tmall.com/p/rd970851.htm?spm=a1z10.1-b-s.w5003-18639719939.2.325f3f44NTA5mF&scene=taobao_shop” target=”_blank” data-spm-wangpu-module-id=”5003-18639719939″ data-spm-anchor-id=”a1z10.1-b-s.w5003-18639719939.2″>

<img src=”//gdp.alicdn.com/imgextra/i4/2838892713/O1CN011VuaysHkKKdiajq_!!2838892713.jpg” border=”0″></a>

</li>

<li class=”ks-switchable-panel-internal211″ style=”display: block; opacity: 1; position: absolute; z-index: 9;”>

<a href=”//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-18639719939.3.325f3f44NTA5mF&pvid=fec9f402-3a90-4abd-9cb5-b483f471bc7c&pos=2&acm=03054.1003.1.2768562&id=573358934465&scm=1007.16862.95220.23864_0&sku_properties=10004:827902415;5919063:6536025;12304035:1905146457&scene=taobao_shop” target=”_blank” data-spm-wangpu-module-id=”5003-18639719939″ data-spm-anchor-id=”a1z10.1-b-s.w5003-18639719939.3″>

<img src=”//gdp.alicdn.com/imgextra/i4/2838892713/O1CN011VuayquhuFtvPmS_!!2838892713.jpg” border=”0″></a>

</li>

<li class=”ks-switchable-panel-internal211″ style=”display: block; opacity: 0; position: absolute; z-index: 1;”>

<a href=”//huaweistore.tmall.com/p/rd711451.htm?spm=a1z10.1-b-s.w5003-18639719939.4.325f3f44NTA5mF&scene=taobao_shop” target=”_blank” data-spm-wangpu-module-id=”5003-18639719939″ data-spm-anchor-id=”a1z10.1-b-s.w5003-18639719939.4″>

<img src=”//gdp.alicdn.com/imgextra/i1/2838892713/O1CN011VuaypDxnTyhfzz_!!2838892713.jpg” border=”0″></a>

</li>

</ul>

</div>

<ul class=”myshb-nav” style=”display:inline-block;left:888px;z-index:11;”>

<li class=”ks-switchable-trigger-internal210″> </li>

<li class=”ks-switchable-trigger-internal210″> </li>

<li class=”ks-switchable-trigger-internal210 ks-active”> </li>

<li class=”ks-switchable-trigger-internal210″> </li>

</ul> //控制图片最下方的四个小点

</div>

</div>

</div>

一般轮播代码的基本组成部分都是由关键的四部分组成:1.data-widget-type参数部分,这里的参数部分基本都是这几个,’viewSize’:[1920]指的是轮播的大小,disableBtnCls’:’disable’,表示按钮不可用时的class值。还拿旋转木马来说吧,轮播两侧有2个翻页的按钮:prev和next,你一直按next,轮播到最后一张,已经没有了,不能轮播了,这个时候的Class值,也就是disable的样式,是按钮变成灰色呢,还是按钮变成其他的样式呢?,这个disable是可以自由命名的。’effect’:’fade’指的是轮播的方式是渐隐的方式,后面还会有以X轴和Y轴移动的方式,这个参数不多说,以后还会遇到。2.<ul class=”myksc-content”> 控制banner图,也就是海报的轮播内容的,3.class=”myshb-nav”控制数量的小焦点或者小焦点图,4.class=”prev disable” 和class=”next”是控制上一张和下一张的箭头。无论各式各样的轮播图组合,最基本的四点是必不可少的(另外其他不在设计师控制的<head>部分的除外,包括控制大小,位置的CSS和JavaScript)。

这就是最初天猫淘宝给商家最初的轮播样式,后来越来越多的网页设计师,前端设计师,店铺模板设计师涌入这个行业,就衍生出了好多风格各异的轮播图和多个轮播组合,我将会在下一期中再来慢慢介绍,介绍天猫利用Widget库能够变化出多少轮播特效代码出来。

版权声明:本文内容由网友提供,该文观点仅代表作者本人。本站(http://www.zengtui.com/)仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 3933150@qq.com 举报,一经查实,本站将立刻删除。

版权声明:本文内容由作者小航提供,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至907991599@qq.com 举报,一经查实,本站将立刻删除。如若转载,请注明出处:http://www.hangzai.com/377944.html

(0)
小航的头像小航

相关推荐