作為一個(gè)資深的淘寶賣家，我們不僅要學(xué)會(huì)運(yùn)營(yíng)，還要學(xué)會(huì)美工（淘寶店鋪裝修）。

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

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

我們直接來(lái)看首屏代碼是如何裝修的？如何編輯代碼？（天貓版和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>
首先提醒一下新手，在書(shū)寫(xiě)代碼的時(shí)候，每個(gè)代碼都是有開(kāi)頭和結(jié)尾的，比如我們看到上面的代碼，開(kāi)頭都是<div>結(jié)尾則是</div>，也就是說(shuō)，每一段代碼的格式首先都是<div></div>這樣的形式存在的。

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

這里style是作為一個(gè)CSS樣式輸出的一個(gè)寫(xiě)法，標(biāo)準(zhǔn)的寫(xiě)法是style="CSS樣式",height這個(gè)代碼代表的是高度，單位px;

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

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

例：

<divstyle="height:460px;">出現(xiàn)10個(gè)下邊像素的間隙的話，我們就把高度定義為:<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">
這段代碼的意思是，這是一個(gè)淘寶C店的大屏代碼，他的樣式是居中對(duì)齊。我這樣跟大家說(shuō)，大家就很好理解吧，其實(shí)我們?cè)賮?lái)看一下天貓版的代碼有什么區(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)，其實(shí)居中的代碼都是一樣的，也就是說(shuō)樣式都是一樣的，不一樣的只是大屏的一個(gè)名稱的定義，也就是說(shuō)，區(qū)別天貓和集市的一個(gè)定義方法，講到這里，大家應(yīng)該都能清楚了吧，其實(shí)天貓和C店的代碼區(qū)別就在這里。

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

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

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

請(qǐng)大家記住上面那兩個(gè)輸出全屏的樣式，死記下來(lái)吧，反正每次都要用到，不用作任何修改;

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

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

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

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

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

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

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