350模板导航如何设置的更动感

漂亮的装修总会让人心情愉悦，如果能够在一些细节上加上一些精美的动态效果，可能会倍增好感，买家驻足页面，相应的停留时间加长，也会给店铺带来一定的加分，当然也更容易精力集中的去看您的产品。

下面要设计修改的地方是店招，起到的效果是当鼠标移动到导航分类上的时候，分类文字前面会显示一个心形图标，具体的效果可以去这个店铺查看： https://www.350diy.com/go/lvsier

下图这样的效果，如何通过350模板来设置？其实方法并不难，您可以找一些其他的图标，或者自己设计也行，如果找不到合适的，那么就用用下面这个店铺的图片吧。

下载图标

用360浏览器，或者谷歌、淘宝浏览器都可以，只要不用ie基本上都有审查元素这个功能，鼠标移动到心形图标上，右键单击【审查元素】，

然后鼠标移动到下图指示区域，右键单击【Open link in new tab】

在浏览器打开之后，因为图片比较小并且是白色的，肉眼是看不到的，所有鼠标移动到页面左上角，右键单击【图片另存为】，保存到本地，如果不会上面的操作。

直接下载：http://img.taobaocdn.com/imgextra/i4/91049940/TB22itndFXXXXcJXXXXXXXXXXXX_!!91049940.png

下载的图片，上传到自己的图片空间，点击【复制链接】如下图所示：

设置图标

 

模板编辑页面，点击导航模块上的【编辑】，进入设置页面。

切换选项卡为【样式设置】，然后点击右下角【样式编辑器】

在弹出的页面中，【主导航】页面，其实就是默认界面不用动，点击【划过背景图】一栏【设置背景】

在弹出的界面中，把刚才上传到图片空间的链接，粘贴到【图片地址】一栏，因为淘宝更改链接了，所以350可能会报错，把alicdn改成taobaocdn就可以了。

背景对其，第一个框是距离左侧多少px，第二个框是距离上端多少px，就是做图片的定位。那么下图数字的意思是，距离左侧8px，距离上端12px。可以通过审查元素，进行校正达到理想效果。

350导航效果展示

 

下面就是我设置的效果，鼠标移动到分类上，文字前面会出现心形图标。是不是很动感。

其实方法很简单，只是写的比较具体一些，基本上会遇到的问题，都截图出来了，应该可能看懂吧，当然不会的地方，可以在文章下方留言，我会及时回复的。