一个前端搞淘宝模板那些事

作为一个前端，公司居然让我去给弄淘宝模板，还不肯花钱买css权限，顿时有一种巧妇难无米之炊的感觉。心里默默的哭5秒钟委屈。好了调整心态，搞起来。

进入店铺装修后台，先一顿乱看，平时都是买家，现在成了卖家，看看平时这些卖家是如何让我们剁手的。看了一天的各种模板源码，找到了一些规律，说做就做，从店招开始，

要打破淘宝店招单调，设置类似hover的效果，淘宝还是提供了一些内部可用的类名和模板方法，这对于不懂代码的美工看起来很难，问了问万能的度娘，发现找淘宝漏洞的人不在少数。有种找到组织的感觉。总之最后经过几天的努力和美工配合终于完成了工作。说了半天废话，说说具体问题吧。

1.店招部分，因为没有css权限，淘宝对行内的定位进行屏蔽，我只能借助已有的类进行样式覆盖。

footer-more-trigger中有position：absolute样式 但是在宝贝详情页会被屏蔽掉，所以为了保持首页和详情页的店招样式一致，

添加了footer-more （解决背景问题）和zoom-icon（解决定位问题）

2.顶部海报要设置为宽度1980px，因为有智能版，直接设置全屏海报就可以了，但要注意图片大小，不同的设备显示会有所区别。

3.宽度为1440px的轮播图设置，淘宝默认首页宽度为950px，为了实现自定义的轮播，要用到J-TWIDGET .在度娘那找到一个模板改了改成自己想要的，代码如下：

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:545px;overflow:hidden;">
  <div class="taobaoux" style="height:550px;">
        <div class="footer-more-trigger" style="width:1440px;height:550px;top:auto;padding:0px;border:none;left:50%;">
            <div class="footer-more-trigger" style="width:1440px;height:550px;padding:0px;border:none;left:-720px;">
              <div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev1440','nextBtnCls':'next1440','autoplay': true,'viewSize':[1440],'circular': true,'duration':0.5}" data-widget-type="Carousel" class="J_TWidget"> 
                    <div class="J_TWidget prev1440" data-widget-config="{'trigger':'.ux1440','align':{'node':'.ux1440','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                        <div class="prev1440" style="font-size:100px;cursor:pointer;opacity:0.5;color:#a7a7a7;background:#fff;"><</div>
                    </div>
         			<div class="J_TWidget next1440" data-widget-config="{'trigger':'.ux1440','align':{'node':'.ux1440','offset':[500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                        <div class="next1440" style="font-size:100px;cursor:pointer;opacity:0.5;color:#a7a7a7;background:#fff;">></div>
                    </div>
                    <div style="height:550px;width:1440px;overflow:hidden;padding:0px;margin:0px;" class="ux1440">
                        <ul class="taobaoux-com" style="height:550px;width:1440px;padding:0px;margin:0px;">
                          <li style="width:1440px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="https://gongchangdianduopai.taobao.com/search.htm?spm=a1z10.5-c-s.0.0.S8WS7I&search=y" style="padding:0px;margin:0px;">
                                <img src="https://img.alicdn.com/imgextra/i3/3276982158/TB2BQUvurtlpuFjSspfXXXLUpXa_!!3276982158.jpg" width="1440px" height="550px" border="0px"></a></li>
                          <li style="width:1440px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="https://gongchangdianduopai.taobao.com/search.htm?spm=a1z10.5-c-s.0.0.S8WS7I&search=y" style="padding:0px;margin:0px;">
                                <img src="https://img.alicdn.com/imgextra/i3/3276982158/TB2kvwjuxXlpuFjSsphXXbJOXXa_!!3276982158.jpg" width="1440px" height="550px" border="0px"></a></li>
                          <li style="width:1440px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="https://gongchangdianduopai.taobao.com/search.htm?spm=a1z10.5-c-s.0.0.S8WS7I&search=y" style="padding:0px;margin:0px;">
                                <img src="https://img.alicdn.com/imgextra/i1/3276982158/TB2CZMFuwxlpuFjSszgXXcJdpXa_!!3276982158.jpg" width="1440px" height="550px" border="0px"></a></li>
                        </ul>
                    </div>
                    <div class="footer-more-trigger" style="width:1920px;height:30px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:525px;">
                            <ul class="bbs-taobaoux-com" style="width:1532px;height:30px;margin:0 auto;text-align: right;margin-top:30px;line-height:45px;">
                                <li style="display:inline;margin:0 5px;cursor:pointer;opacity:0.5;height:15px;border-radius:11px;border:2px solid #A09591;padding:0px 5px;"></li>
                                <li style="display:inline;margin:0 5px;cursor:pointer;opacity:0.5;height:15px;border-radius:11px;border:2px solid #A09591;padding:0px 5px;"></li>
                                <li style="display:inline;margin:0 5px;cursor:pointer;opacity:0.5;height:15px;border-radius:11px;border:2px solid #A09591;padding:0px 5px;"></li>
                            </ul>   
                    </div>
            </div>
        </div>
    </div>
  <ul class="ks-switchable-nav" style="display:none;"></ul>
</div>

5.具体使用了<map ><area>标签。只要实践就会有收获。