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

本文目录
[隐藏]

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

下面要设计修改的地方是店招,起到的效果是当鼠标移动到导航分类上的时候,分类文字前面会显示一个心形图标,具体的效果可以去这个店铺查看: http://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导航效果展示

 

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

效果

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

最后编辑于:2015/7/2作者:芃

芃

分享自己的经验,展示自己的风采,多交流沟通,一起进步成长。