淘宝默认免费模板装修实例

1、以popoyi淘宝旗舰店为例，我们采用的是官方免费基础模板。

2、1.导航

首先登录你的淘宝，进入卖家中心

3、左侧菜单中找到店铺装修

1、这样我们就进到旺铺装修页面，系统默认给我们使用的是淘宝官方免费模板，点击模板管理进去，这里我们可以看到有3套官方免费使用的模板，都是很低级很基础的，要好看的就得去市场买别人设计好的。点击立即使用就可以切换这3款模板。

2、在左边菜单上自己选个合适的配色，页头简单设置一下。然后在编辑区把店招（导航菜单上面的店铺招牌）删掉，为了营造高级的品牌感这里我们不用店招，然后点菜单块的“编辑”

3、在显示设置里就是我们可以自定义的样式了，虽说可自定义，但还是很少，淘宝限制太多了。   

4、这里我把代码贴出来分析一下：

.skin-box-bd { height:150px; background:none; } .all-cats { height:118px; width:150px; max-width:150px; background:url(//gdp.alicdn.com/imgextra/i1/169629772/TB20IIseFXXXXXTXXXXXXXXXXXX_!!169629772.png) no-repeat center center; } .all-cats .all-cats-trigger { width:150px; display:none; } .all-cats .all-cats-trigger a.link { width:150px; } .menu-list { height:109px; width:800px;background:url(//gdp.alicdn.com/imgextra/i2/169629772/TB2KFAfeFXXXXXkXpXXXXXXXXXX_!!169629772.png) no-repeat center 0; } .menu-list .link { height:103px; padding:0 40px; background:none; } .menu-list .menu { height:auto; background:none; border:none; margin-left:26px; } .menu-list .menu .title { color:rgba(255, 255, 255, 0.5); line-height:185px; font-size:14px; font-family:\5fae\8f6f\96c5\9ed1; } .menu-list .menu-hover { background:none; } .menu-list .menu-hover .link { background:none; border-bottom:0px solid #F39; } .menu-list .menu-selected .link { background:none; border-bottom:0px solid #F39; } .menu-list .menu-hover .title { color:rgba(255, 255, 255, 1); } .menu-list .menu-selected .title { color:rgba(255, 255, 255, 1); } .menu-list .menu-selected .link .title { background:none; }

5、蓝色为图片尺寸，红色为图片地址（图片地址的获取：先将裁剪好的图上传到“图片空间”里--刚才点店铺装修的地方），上传好后图片下方会有个链接图标，点击它就把地址复制好了，替换上方代码中的链接即可

6、这里附上我们的原图，方便你使用，根据我们原图的尺寸制作就可以了。因为是深色背景，所以我们的图是白色透明的。

7、至此，导航部分就结束了。

2.焦点图

未完待续。。。