首先先展示一下我们的淘宝页面和天猫页面
天猫: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的动画效果,看到了没,这是一个趋势。
这次写的比较简单,希望可以给从事电商行业的小伙伴能提供点帮助。
明天还是介绍:天猫淘宝一些效果的写法!希望大家能关注!
最近一周要做一个微信场景!因为之前没做过,昨天研究的就是为这个微信场景打基础,希望有做过的同志,能在评论里面留下联系方式,能交流一下!谢谢