<*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寬度的一半，這個值我們也可以自己定義，如果不居中，我們可以自己定義到居中。