致富经 - 科技苑 - 生财有道 - 每日农经 - 农广天地 - 聚焦三农 - 绿色时空 - 乡土 - 手机版
您的当前位置: 致富创业网 > 致富视频 > 绿色时空 > 淘宝卡首屏代码 [一天教你学会首屏代码装修!]

淘宝卡首屏代码 [一天教你学会首屏代码装修!]

来源:绿色时空 时间:2018-08-16 点击: 推荐访问: 致富经野猪养 池塘养鱼亩产 地暖铺设流程

作为一个资深的淘宝卖家,我们不仅要学会运营,还要学会美工(淘宝店铺装修)。

我们不仅需要良好的创意构思能力,色彩的把握,设计风格,还要学会简单的代码装修,这样才能将视觉营销做到完美。为我们的店铺运营起到良好的发展规模。很多中小卖家可能对于代码学习这一方面都会不太重视。那么为什么我要建议大家学习些简单代码装修,如今淘宝店铺装修更讲究的是自定义(代码)装修,每个店铺都可以发挥出的视觉营销特色。千万不要认为我是卖家或者美工,代码会不会也没关系?这是个错误的理念。代码能让我们店铺装修达到一定的高度,从外观到顾客印象,再到交易都是承担着非常重要的一个载体。

就如淘宝的特效代码,现在静态的网店装修已经淡出淘宝圈,代码装修已经是淘宝装修的主流。

我们直接来看首屏代码是如何装修的?如何编辑代码?(天猫版和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 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">你的大图(内容区域)


首先提醒一下新手,在书写代码的时候,每个代码都是有开头和结尾的,比如我们看到上面的代码,开头都是
结尾则是
,也就是说,每一段代码的格式首先都是
这样的形式存在的。

这里style是作为一个CSS样式输出的一个写法,标准的写法是style="CSS样式",height这个代码代表的是高度,单位px;

另外这里我要和大家说一下,宽度的码是width,这里没有写,是表示宽度随着你图片的大小而改变,如果你里面不是一张图片,而是一个块的内容区,最好就把宽度也写上去。

*如果我们发现整个大屏和下边有10个左右的像素间隙,我们可以把高度减去这个间隔的高度,可以去除这个间隙

例:

出现10个下边像素的间隙的话,我们就把高度定义为:

<*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宽度的一半,这个值我们也可以自己定义,如果不居中,我们可以自己定义到居中。

上一篇:虚拟内存有什么用 [Win7如何设置或者更改电脑虚拟内存]
下一篇:[野猪养殖场所怎么选择] 一万在农村能搞养殖吗

扩展阅读文章

推荐阅读文章

推荐内容

栏目分类
绿色时空热门文章

致富创业网 www.csyzzm.com

Copyright ? 2002-2018 . 致富创业网 版权所有 湘ICP备12008529号-1

Top