作为一个资深的淘宝卖家,我们不仅要学会运营,还要学会美工(淘宝店铺装修)。
我们不仅需要良好的创意构思能力,色彩的把握,设计风格,还要学会简单的代码装修,这样才能将视觉营销做到完美。为我们的店铺运营起到良好的发展规模。很多中小卖家可能对于代码学习这一方面都会不太重视。那么为什么我要建议大家学习些简单代码装修,如今淘宝店铺装修更讲究的是自定义(代码)装修,每个店铺都可以发挥出的视觉营销特色。千万不要认为我是卖家或者美工,代码会不会也没关系?这是个错误的理念。代码能让我们店铺装修达到一定的高度,从外观到顾客印象,再到交易都是承担着非常重要的一个载体。
就如淘宝的特效代码,现在静态的网店装修已经淡出淘宝圈,代码装修已经是淘宝装修的主流。
我们直接来看首屏代码是如何装修的?如何编辑代码?(天猫版和C店代码装修的方式不一样)
<*div style="height:图片高度">
<*div class="footer-more-trigger" style="padding:0; top:auto;left:50%">
<*div class="footer-more-trigger" style="padding:0;top:auto; left:-960px">
你的大图(内容区域)
</div>
</div></div>
天猫版
<*div style="height:图片高度"><*div class="sn-simple-logo" style="padding:0; top:auto;left:50%"><*div class="sn-simple-logo" style="padding:0; top:auto;left:-960px">你的大图(内容区域)</div></div></div>
首先提醒一下新手,在书写代码的时候,每个代码都是有开头和结尾的,比如我们看到上面的代码,开头都是<div>结尾则是</div>,也就是说,每一段代码的格式首先都是<div></div>这样的形式存在的。
<div style="height:图片高度px">
这里style是作为一个CSS样式输出的一个写法,标准的写法是style="CSS样式",height这个代码代表的是高度,单位px;
另外这里我要和大家说一下,宽度的码是width,这里没有写,是表示宽度随着你图片的大小而改变,如果你里面不是一张图片,而是一个块的内容区,最好就把宽度也写上去。
*如果我们发现整个大屏和下边有10个左右的像素间隙,我们可以把高度减去这个间隔的高度,可以去除这个间隙
例:
<divstyle="height:460px;">出现10个下边像素的间隙的话,我们就把高度定义为:<divstyle="height:450px">
<*div class="footer-more-trigger" style="padding:0;top:auto; left:50%"><*div class="footer-more-trigger" style="padding:0;top:auto; left:-960px">
这段代码的意思是,这是一个淘宝C店的大屏代码,他的样式是居中对齐。我这样跟大家说,大家就很好理解吧,其实我们再来看一下天猫版的代码有什么区别
<*div class="sn-simple-logo" style="padding:0; top:auto;left:50%"><*div class="sn-simple-logo" style="padding:0; top:auto;left:-960px">
我们发现,其实居中的代码都是一样的,也就是说样式都是一样的,不一样的只是大屏的一个名称的定义,也就是说,区别天猫和集市的一个定义方法,讲到这里,大家应该都能清楚了吧,其实天猫和C店的代码区别就在这里。
div class="footer-more-trigger"这是一个固定的淘宝大屏的一个样式,我是这么理解的,淘宝给你写了一个固定输出悬浮的一个样式(我们都知道C店的内容区是950,那么我们想要超出这个区域,就应该把内容悬浮在这个区域上面,当然这是我自己的一个理解),总之我们记住,这就是一个代表能超出950内容区(天猫是990宽,区分一下)的一个样式就可以了。
理解了上面的内容,我们就很容易能把天猫店的代码也理解清楚:
*div class="sn-simple-logo"
这就是代表了天猫店可以超出990内容区的一个代码。
通过上面的理解,我们可以延伸出很多不同效果的代码,这个大家回去的时候可以研究一下。
请大家记住上面那两个输出全屏的样式,死记下来吧,反正每次都要用到,不用作任何修改;
style="padding:0; top:auto; left:50%"style="padding:0; top:auto; left:-960px"
这两个style里面输出的样式这里讲一下:
padding:0 去除内容到最外层的间距,可以理解为去除了内容到height之间的一个间隙吧,我是这么理解的;
top:auto 这个是调整整个内容到上边的距离,有些时候,我们会发现我们在后台关闭了导航下的10个像素还是会有一个间隔,那么这个时候我们可以把这个top改为top:-10px,以去除那10个间隙。
left:50% 这个是调整到左边的距离是自适应宽度的50%,left:-960px这个是淘宝1920宽度的一半,这个值我们也可以自己定义,如果不居中,我们可以自己定义到居中。