前两天接到一个装修淘宝店首页的工作，虽然没什么技术含量，但毕竟第一次做这个，有些经验在这里分享一下(如果使用，请更换图片，随着淘宝升级，不保证一定可用，但现在一定可用)：
首先旺铺基础班只能使用 190 | 750 和 750 | 190 两种左右布局，不能使用950通栏，所以如果要装全屏效果，就要考虑升级到专业版了。
- 页头：可单独设置背景图片
- 店招
- 导航
- 全屏轮播图，也可在寻访百店：制作
<div style="height:500px;" class="QdotCode">
<div class="footer-more-trigger most-footer Qdotpstb5IF3X" style="border:none 0;padding:0;background-color:transparent;width:1920px;height:500px;border:none;padding:0;top:auto;left:auto;">
<div class="footer-more-trigger most-footer Qdotpstb5IF3X" style="border:none 0;padding:0;background-color:transparent;width:1920px;height:500px;left:-485px;top:0px;border:none;padding:0;overflow:hidden;">
<div class="Qdotlayerb5IF3X" style="height:500px;width:1920px;overflow:hidden;">
<div class="Qdotwrapb5IF3X J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect': 'scrollx','easing': 'none','circular':true,'interval':'5','duration':0.5,'autoplay':true,'contentCls': 'Qdotcontentb5IF3X','prevBtnCls':'Qdotprevb5IF3X','nextBtnCls':'Qdotnextb5IF3X'}" style="height:500px; width:1920px; overflow: hidden; position: relative;">
<div class="most-footer footer-more-trigger" style="width:1920px;height:60px;border:none 0;padding:0;background-color:transparent;z-index:80;left:auto;top:430px;"> </div>
<ul class="Qdotcontentb5IF3X clearfix" style="top: 0px; position: absolute;z-index:9;width:999999px;">
<li style="list-style-type:none;margin:0px;padding:0px;width:1920px;height:500px;float:left;">
<a target="_blank" href="https://www.baidu.com" style="padding:0px;margin:0px;">
<img border="0" src="https://img.alicdn.com/imgextra/i1/80221105/TB2mcwGgXXXXXckXpXXXXXXXXXX_!!80221105.jpg" height="500" width="1920" />
</a>
</li>
<li style="list-style-type:none;margin:0px;padding:0px;width:1920px;height:500px;float:left;">
<a target="_blank" href="https://www.baidu.com" style="padding:0px;margin:0px;">
<img border="0" src="https://img.alicdn.com/imgextra/i1/80221105/TB2EUUKgXXXXXa2XpXXXXXXXXXX_!!80221105.jpg" height="500" width="1920" />
</a>
</li>
<li style="list-style-type:none;margin:0px;padding:0px;width:1920px;height:500px;float:left;">
<a target="_blank" href="https://www.baidu.com" style="padding:0px;margin:0px;">
<img border="0" src="https://img.alicdn.com/imgextra/i4/80221105/TB2.PwKgXXXXXbaXpXXXXXXXXXX_!!80221105.jpg" height="500" width="1920" />
</a>
</li>
</ul>
<div class="most-footer footer-more-trigger" style="width:950px;height:60px;z-index:90;top:220px;overflow:hidden;clear:both;border:none 0;background:none;left:485px;">
<span class="Qdotprevb5IF3X Qdotpstb5IF3X" style="width:auto;border:none 0;padding:0;background-color:transparent;float:left;cursor:pointer;">
<img data-ks-lazyload="https://img.alicdn.com/imgextra/i1/80221105/TB20YdggpXXXXXwXXXXXXXXXXXX_!!80221105.png" src="https://img.alicdn.com/imgextra/i1/80221105/TB20YdggpXXXXXwXXXXXXXXXXXX_!!80221105.png" width="60" height="60" />
</span>
<span class="Qdotnextb5IF3X Qdotpstb5IF3X" style="width:auto;border:none 0;padding:0;background-color:transparent;float:right;cursor:pointer;">
<img data-ks-lazyload="https://img.alicdn.com/imgextra/i4/80221105/TB27XMNgXXXXXcfXpXXXXXXXXXX_!!80221105.png" src="https://img.alicdn.com/imgextra/i4/80221105/TB27XMNgXXXXXcfXpXXXXXXXXXX_!!80221105.png" width="60" height="60" />
</span>
</div>
</div>
</div>
</div>
</div>
</div>
- 图片热点链接：
<div style="height:3064px;">
<div class="footer-more-trigger" style="left:50%;width:1920px;height:3064px;right:auto;top:auto;padding:0;border:none;left:auto;z-index:1;">
<div class="footer-more-trigger" style="left:-485px;top:auto;border:none;padding:0;">
<img src="https://img.alicdn.com/imgextra/i4/80221105/TB2VyUSgXXXXXXWXpXXXXXXXXXX_!!80221105.jpg" usemap="#planemap" />
<map name="planetmap">
<area shape="rectangle" coords="996,1205,1118,1233" href="http://www.taobao.com" alt="补水" title="补水" target="_blank"/>
<area shape="rectangle" coords="1203,2341,1315,2371" href="http://www.taobao.com" alt="修复" title="修复" target="_blank"/>
<area shape="rectangle" coords="635,1820,746,1850" href="http://www.taobao.com" alt="美白" title="美白" target="_blank"/>
</map>
</div>
</div>
</div>
- 收藏店铺：
可以在随便一个店铺点击收藏本店铺图标，右键“审查元素”，找到对应代码，更改一下即可；也可修改一下代码
<a class="collect-shop"
data-goldlog-id="/tbwmdd.1.062"
data-init="//store.taobao.com/shop/favorite/collectFavorite.htm?shopId=35275735"
href="//favorite.taobao.com/popup/add_collection.htm?spm=a1z10.1-c.0.0.NBPeXG&id=35275735&itemid=35275735&itemtype=0&sellerid=80221105&scjjc=2&scene=taobao_shop"
rel="nofollow"
data-spm-anchor-id="a1z10.1-c.0.0">
<img src="//gdp.alicdn.com/imgextra/i1/80221105/TB22SXwgpXXXXXCXpXXXXXXXXXX_!!80221105.jpg" />
</a>
- 链接旺旺：
可以在旺旺在线图标生成这个网页生成；也可修改下面代码
<a target="_blank"
href="http://www.taobao.com/webww/ww.php?ver=3&touid=hnszwind&siteid=cntaobao&status=1&charset=utf-8&scene=taobao_shop">
<img border="0" src="//amos.alicdn.com/realonline.aw?v=2&uid=hnszwind&site=cntaobao&s=1&charset=utf-8" alt="点击这里给我发消息" />
</a>
