当前位置:文档之家› 淘宝widget之弹出层(Popup)的巧用

淘宝widget之弹出层(Popup)的巧用

淘宝widget之弹出层(Popup)的巧用
淘宝widget之弹出层(Popup)的巧用

淘宝店铺设计Widget之弹出层的巧用

自从淘宝出推出了旺铺2012之后,我们淘宝卖家在装修店铺的时候更加能随心所以的设计自己的店铺了,愿意就是我们能使用多个自定义内容区了。但是,由于淘宝的限制,CSS权限依旧不对专业版的用户开放,所以我们在设计店铺的时候还是有很大的限制,比如:我们想让鼠标在经过某一块儿的时候让其变颜色(如下图),

鼠标在依次经过以下模块儿的时候会变颜色。这是什么原因呢?这里就是调用了淘宝的widget规范可以使其进行轮播。这种轮播我们也可以用于自己的店铺的大图海报轮播,在这里我就不说这个了,主要是说怎么使鼠标经过的时候变色的原因。

谈到这个鼠标经过能变色也是我在装修店铺利用淘宝Widget规范的时候,突然想到的,其精髓所在就是利用了弹出层(Popup)。好,下面我们进入正题:

首先,我们先看一个弹出层的小例子(点击下载):

我们所需要的DOM结构

本组件作为一个弹出层的效果,通过预先设置一个隐藏的弹出层,并且设置该弹出层的触点,通过鼠标滑入和移出触点来展示和隐藏弹出层效果

代码如下:

该段代码的效果如下图所示:

鼠标未经过该区域的样式鼠标经过该区域后的样式

配置参数列表

使其变色了,其实就是一个弹出层,鼠标在经过的时候使其弹出即可,弹出的那个层跟导航的区域大小相同即可。

代码如下:

  • 我是帅

  • 我是帅

  • 你觉得呢

  • 要是你觉得我不帅

  • 那么请你跳出来

将以上代码在淘宝店铺装修里测试即可得出一下结果了

这样就能使我们的店铺在买家浏览的时候更加的有质感了。

下面我将整理好的素材都分享给大家,感兴趣的朋友可以下载下来试一试。源代码将以上代码复制粘贴将里面的图片地址替换成自己空间里的测试即可。

下载素材

淘宝导航装修css全解 超赞超详细

一、首先我们进入到店铺的装修页面,将鼠标放在导航上面会出现“编辑”字样,单击,如图 选择“显示设置”选项卡 1.修改导航分类下面的背景色,代码如下: .skin-box-bd .link{background:#000000;}

效果如下 -------------------------------- 默认是黑色的,如果你要别的颜色,只要修改#000000就可以了,颜色对照表地址 https://www.doczj.com/doc/3617603057.html,/other/rgb.htm

-------------------------------------------------------------------------- 如果你想要更加个性,而不想只要简单的纯色块的话,可以自己做图片,然后连接上去,代码如下: .skin-box-bd .link{background:url(图片链接);} 效果如下

-------------------------------- 将“图片连接”换成你的图片的连接就可以了,一般都是自己做好然后上传到淘宝图片空间,然后链接就可以了! 在图片空间点击对应图片下方的“链接”按钮可以直接复制图片链接,替换到代码里就可以了! 2.修改整个导航的背景色【其实只修改了有分类之外的部分(前面我们已经修改好了分类背景),还有最右边那部分没改到,后面会有修改那里的代码,一步步跟着来就没错了!】代码如下: .skin-box-bd .menu-list{background:#000000;} 效果如下 -------------------------------- 修改颜色的方法同上 -------------------------------------------------------------------------- 修改成图片的代码如下:

淘宝员工守则

淘宝员工守则 淘宝网是亚太地区较大的网络零售商圈,由阿里巴巴集团在20xx年5月10日投资创立。下面是小编为你整理的淘宝员工守则,希望对你有用! 淘宝员工守则 一. 工作时间 1.1 运营团队员工作时间表 由于运营团队刚投入运营,其工作时间如以下所示: 周一至周六:上午9:00 ——晚上23:00 周日:上午9:30 ——晚上23:00 注:工作制度为作六休一机制,员工休假日由运营团队自行安排规定; (每天吃饭时间由内部轮流错开,以免各职位人员空缺导致运营不畅,前期晚上运营时间19:00至23:00期间办公地点不受限制,可在家或办公地点办公。)

商城参加活动时务必所有人员在职,休假时间作废,以后期做调休处理。 1.2 请假与调休 请假与调休需要提前24小时做出申请,经运营部主管签字同意后可进行工作时间调换与请假申请。如因以下突发原因而影响正常工作时间,需要向运营团队负责人或2个以上相关人员寻求帮助。突发原因包括:无法正常使用网络,身体出现突发性症状或疾病(需提供医院证明) 以上是前期运营团队员工初步工作时间,随着团队规模逐渐扩大,会实行早班、晚班二班制,具体详细情况由运营团队另行通知。 二. 产品管理工作内容 2.1 产品采购流程 前期商城产品采购主要和巴贝领带公司合作,但仍需要规范的产品采购流程与文件。该流程与文件将拓展应用至其他产品的采购。 A. 产品采购流程 2.2 产品管理 A. 产品图片拍摄

由金丰完成产品图片拍摄流程与规范 B.产品文案描述与更新 产品文案的描述应具备以下特性: 流行词汇 功能性 功能性产品应具备产品功能,比如为什么要选用真丝领带?真丝领带和涤丝领带在手感,光泽度等各方面的区别。 产品特性 产品特性描述应包括产品全称,尺寸,颜色,面料,工艺与使用说明/特性。 使用统一字体,字体为___. 字体与描述图片应适度穿插,避免长篇文字。 C. 产品上下架管理 如何使用淘宝提供的工具进行上下架管理 对商品进行上下架管理在淘宝商城里面也有不同的辅助软件,对此具体详细操作步骤等后期陆续补充。 此功能最主要通过抓取最佳宝贝上下架时间,来提高一些流量和成交量。在此有几个小技巧可以参考一下:

CSS实现导航条Tab切换的三种方法

CSS实现导航条Tab切换的三种方法 前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 buju 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成。要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局【语义布局】 从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体