作為一個資深的淘寶賣家，我們不僅要學(xué)會運營，還要學(xué)會美工（淘寶店鋪裝修）。

我們不僅需要良好的創(chuàng)意構(gòu)思能力，色彩的把握，設(shè)計風格，還要學(xué)會簡單的代碼裝修，這樣才能將視覺營銷做到完美。為我們的店鋪運營起到良好的發(fā)展規(guī)模。很多中小賣家可能對于代碼學(xué)習這一方面都會不太重視。那么為什么我要建議大家學(xué)習些簡單代碼裝修，如今淘寶店鋪裝修更講究的是自定義（代碼）裝修，每個店鋪都可以發(fā)揮出的視覺營銷特色。千萬不要認為我是賣家或者美工，代碼會不會也沒關(guān)系？這是個錯誤的理念。代碼能讓我們店鋪裝修達到一定的高度，從外觀到顧客印象，再到交易都是承擔著非常重要的一個載體。

就如淘寶的特效代碼，現(xiàn)在靜態(tài)的網(wǎng)店裝修已經(jīng)淡出淘寶圈，代碼裝修已經(jīng)是淘寶裝修的主流。

我們直接來看首屏代碼是如何裝修的？如何編輯代碼？（天貓版和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">
你的大圖（內(nèi)容區(qū)域）

</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">你的大圖（內(nèi)容區(qū)域）</div></div></div>
首先提醒一下新手，在書寫代碼的時候，每個代碼都是有開頭和結(jié)尾的，比如我們看到上面的代碼，開頭都是<div>結(jié)尾則是</div>，也就是說，每一段代碼的格式首先都是<div></div>這樣的形式存在的。

<div style="height:圖片高度px">

這里style是作為一個CSS樣式輸出的一個寫法，標準的寫法是style="CSS樣式",height這個代碼代表的是高度，單位px;

另外這里我要和大家說一下，寬度的碼是width，這里沒有寫，是表示寬度隨著你圖片的大小而改變，如果你里面不是一張圖片，而是一個塊的內(nèi)容區(qū)，最好就把寬度也寫上去。

*如果我們發(fā)現(xiàn)整個大屏和下邊有10個左右的像素間隙，我們可以把高度減去這個間隔的高度，可以去除這個間隙

例：

<divstyle="height:460px;">出現(xiàn)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店的大屏代碼，他的樣式是居中對齊。我這樣跟大家說，大家就很好理解吧，其實我們再來看一下天貓版的代碼有什么區(qū)別

<*div class="sn-simple-logo" style="padding:0; top:auto;left:50%"><*div class="sn-simple-logo" style="padding:0; top:auto;left:-960px">
我們發(fā)現(xiàn)，其實居中的代碼都是一樣的，也就是說樣式都是一樣的，不一樣的只是大屏的一個名稱的定義，也就是說，區(qū)別天貓和集市的一個定義方法，講到這里，大家應(yīng)該都能清楚了吧，其實天貓和C店的代碼區(qū)別就在這里。

div class="footer-more-trigger"這是一個固定的淘寶大屏的一個樣式，我是這么理解的，淘寶給你寫了一個固定輸出懸浮的一個樣式（我們都知道C店的內(nèi)容區(qū)是950，那么我們想要超出這個區(qū)域，就應(yīng)該把內(nèi)容懸浮在這個區(qū)域上面，當然這是我自己的一個理解），總之我們記住，這就是一個代表能超出950內(nèi)容區(qū)（天貓是990寬，區(qū)分一下）的一個樣式就可以了。
理解了上面的內(nèi)容，我們就很容易能把天貓店的代碼也理解清楚：

*div class="sn-simple-logo"
這就是代表了天貓店可以超出990內(nèi)容區(qū)的一個代碼。

通過上面的理解，我們可以延伸出很多不同效果的代碼，這個大家回去的時候可以研究一下。

請大家記住上面那兩個輸出全屏的樣式，死記下來吧，反正每次都要用到，不用作任何修改;

style="padding:0; top:auto; left:50%"style="padding:0; top:auto; left:-960px"
這兩個style里面輸出的樣式這里講一下：

padding:0 去除內(nèi)容到最外層的間距，可以理解為去除了內(nèi)容到height之間的一個間隙吧，我是這么理解的;

top:auto 這個是調(diào)整整個內(nèi)容到上邊的距離，有些時候，我們會發(fā)現(xiàn)我們在后臺關(guān)閉了導(dǎo)航下的10個像素還是會有一個間隔，那么這個時候我們可以把這個top改為top:-10px，以去除那10個間隙。

left:50% 這個是調(diào)整到左邊的距離是自適應(yīng)寬度的50%，left:-960px這個是淘寶1920寬度的一半，這個值我們也可以自己定義，如果不居中，我們可以自己定義到居中。

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進貨渠道。超市進貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則

本文來源： 一天教你學(xué)會首屏代碼裝修！