一天教你学会首屏代码装修！

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

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

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

我们直接来看首屏代码是如何装修的？如何编辑代码？（天猫版和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宽度的一半，这个值我们也可以自己定义，如果不居中，我们可以自己定义到居中。