电商有关淘宝天猫突破限制的解决办法

 首先先展示一下我们的淘宝页面和天猫页面

天猫:http://xiaomanyoupin.tmall.com/index.htm

淘宝:http://shop145360663.taobao.com/index.htm

第一、先来说说天猫的吧!

因为天猫的默认的宽度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的值可以改变,这里是控制你要写的模块的位置。加上这行代码天猫就可以突破限制了。

第二、是淘宝突破限制的办法!淘宝的默认的宽度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的动画效果,看到了没,这是一个趋势。

这次写的比较简单,希望可以给从事电商行业的小伙伴能提供点帮助。

明天还是介绍:天猫淘宝一些效果的写法!希望大家能关注!

最近一周要做一个微信场景!因为之前没做过,昨天研究的就是为这个微信场景打基础,希望有做过的同志,能在评论里面留下联系方式,能交流一下!谢谢

 

posted @ 2016-03-11 16:10  我の天空  阅读(2410)  评论(0编辑  收藏  举报