電商有關淘寶天貓突破限制的解決辦法

 首先先展現一下咱們的淘寶頁面和天貓頁面

天貓：http://xiaomanyoupin.tmall.com/index.htm

淘寶：http://shop145360663.taobao.com/index.htm

第1、先來講說天貓的吧！

由於天貓的默認的寬度990px，若是咱們按天貓的要求，在設計和頁面的美觀方面就有很大的限制。因此就須要咱們突破限制，通常淘寶的頁面有兩種樣式：一種是全屏的樣式：1920px，另外一種是本身的內容區：咱們作的是1190px；

固然也能夠買天貓服務市場的模板來突破限制：

全屏突破寬度限制的代碼：

<div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;">
　　<div class="sn-simple-logo" style="padding:0px;left:-1325px;top:auto;z-index:90;">
　　內容區
　　</div>
</div>

而後咱們內容區的代碼是：

<div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;">
　　<div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;z-index:90;">
　　　　內容區
　　</div>
</div>

重點注意一下帶紅色的字：這裏的left的值能夠改變，這裏是控制你要寫的模塊的位置。加上這行代碼天貓就能夠突破限制了。

第2、是淘寶突破限制的辦法！淘寶的默認的寬度950px

仍是全屏：

<div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
　　<div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">

　　　　內容區
　　</div>
</div>

內容區：

<div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
　　<div class="footer-more-trigger" style="left:-600px;top:auto;border:none;padding:0;">

　　　　內容區
　　</div>
</div>

可是要注意了：在淘寶加上這行代碼並無什麼吊用，當時我研究了一天，而且結合網上的辦法試了又試最後仍是沒試出來，由於網上好多人沒有關於這方面具體的分享，

後來問人家還得加上一行全局的樣式：

* div {
width: auto;
}

.xiaomantb,
div {
width: 100%;
}

.layout {
width: 950px;
}

.col-main {
width: 100%;
}

加上這行代碼就能夠了，嘿嘿！

注意了啊這裏改的是全局的樣式，由於淘寶天貓後臺把這些樣式封裝起來，按照常理來講是不能動的，若是動了頁面可能會爆炸！果真，回頭看了一下咱們本身作得搜索框嘣，爆炸了，當時個人領導調了半天才改過來！也是夠了

若是作過天貓淘寶的小夥伴們，你們應該知道淘寶天貓是禁止寫js的，更可惡的是css還得花錢開通，我就想那麼多店家，阿里得賺多少錢啊！怪不得馬雲如此有錢，這眼光！真是佩服，

你用個人淘寶天貓平臺嗎？用你要不就買個人模板，要不就買css，否則讓你的頁面難看死,哈哈！

可是淘寶仍是有點人性的，他開放了一些接口供我們使用，例如：widget規範裏面有一些效果供我們是使用，可是頗有限。要想本身的頁面變得漂亮大氣仍是買js模板吧！

最近發現淘寶天貓支持一些html5的動畫效果，看到了沒，這是一個趨勢。

此次寫的比較簡單，但願能夠給從事電商行業的小夥伴能提供點幫助。

明天仍是介紹：天貓淘寶一些效果的寫法！但願你們能關注！

最近一週要作一個微信場景！由於以前沒作過，昨天研究的就是爲這個微信場景打基礎，但願有作過的同志，能在評論裏面留下聯繫方式，能交流一下！謝謝