header_v0.7.0

岛识电商《DIV+CSS公开课》CSS鼠标经过图片替换效果

117天前发布

原创文章 / 网页 / 教程
岛识 原创,如需商业用途或转载请与岛识联系,谢谢配合。

CSS 图片替换效果,适用于淘宝天猫京东企业网站各大平台



今天主要和大伙们来分享一个小小的关于技术内容的帖子,就是我们经常在很多电商平台上面看到的一些网页效果,比例鼠标经过,图片替换。


1d5358d87b02a801219c77a7394b.jpg



其实原理很简单 实现只需要准备两张图片;之后,只需要用CSS中的hover属性,既可以解决。


那么今天让我们来说说他的一个原理吧,首先得需要dreamweaver软件,如果之前没有接触过的,可以在我们的公众号里面,选择之前dreamweaver的公开课程,系统化学习。


第一步新建HTML 文档:


e0cf58d87b16a801219c77743b1d.jpg



之后注意事项:


CSS 样式里面的内容:一般写在 <head> </head>之间。

css样式的命名规范 一般用 点  .{.......}  其中 .代表类名,除此之外,也可以用#{......}, 其中#代表id,两种之间的区别是,类名class,可以重复使用,然而 id(#)一个页面只能出现一次。


类名命名规范:

首字母英文+数字组合,切忌使用html标签命名。如图所示:


dbb858d87b34a801219c77520de6.jpg



第二步:所有正文部分的内容,需要写在body里面如图所示


正文里面的内容,可以是图片,文字,视频,脚步,等等。


第三步:接下来:我们来说说,鼠标经过的时候,图像链接替换的原理:


我们可以现在正文部分 body里面输入这么一段内容:


  <div>

            <a href="#" target="_blank"></a>

    </div>


其中:box1 为 class类名 可以自定义;

           a为链接标签;之前我们在dw公开课程中,也提起过,

           href=设置链接,

           target='_blank',代表设置新窗口弹出,


好了,正文部分完成之后,接下来,我们可以来设置 样式部分的内容,就是在head里面的内容


<style>

.box1 a{ width:300px; height:300px; background:#096; display:block;}

.box1 a:hover{ background:#6FF;}

</style>


其中: width:宽度;height:高度 background:背景颜色,display:block 显示固定

:hover代表鼠标经过的时候,替换背景颜色,效果如图所示;




好了,原理说完,接下来呢,我们可以做一个小小的实例,先看一下效果,后期可以跟着我们的视频当中来操作一下,




练习视频内容:




如果觉得喜欢,就给个赞,哈哈哈,希望能帮到大伙,成为大家一生的好朋友~~


3

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功