<*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"这是一个固定的淘宝大屏的一个样式，总之要记住，这就是一个代表能超出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宽度的一半，这个值我们也可以自己定义，如果不居中，我们可以自己定义到居中。