本篇教程是通过淘宝系统类做交互效果,这种效果在很多的店铺中都可以用到,学完本课内容后,同学们可以在下方评论区进行留言,作业也可以在评论区进行提交,老师会一一解答。
那我们开始今天的课程。
1. 打开一个店铺,当鼠标移动上去的时候有一个开关灯的效果,在选中的时候有一个选择项,如图所示。
2. 首先新建一个文件保存一下,还是在本地进行测试,将【title】标题改为“定位特效”,如图所示。
3.拿之前的例子来做,首先将地址复制,然后再创建一个【div】盒子,将地址粘贴到【div】盒子里,如图所示。
4.首先把样式写出来,宽度为230px,高度为310px,再创建一个子级div作为遮挡元素,宽度为230px,高度为310px,如图所示。
5.给子级【div】加一个背景颜色色值为【#099】,父级【div】设置一个3像素的红色边框和【margin】的间距为100px,如图所示。