四时宝库

程序员的知识宝库

「前端架构师详解Css10」案例“类天猫商品栏选中效果”及css伪类

友情提示:以下代码是我们邀请的前端架构师基于天猫门户编写的css相关代码,现在免费分享给大家,获取的方式为:

关注此头条号“互联网IT信息”——>私信发送 “天猫css” ,(注意:css全是小写)即可得到源代码的获取方式。

1. 此篇文章讲解目录:

  • 案例和由此案例重点讲解的知识点介绍

  • 案例代码实现

  • css伪类知识点详解

2. 案例和相关知识点介绍

此案例是页面,效果如下:

此页面的技术实现解析:

默认显示图片的div,通过a标签的伪类hover来控制第二个div样式的显示。

此案例中主要用到了,基于此,我们会系统的将如下知识点全部讲解:

css伪类

3. 此案例的代码实现

第一步:书写html,其中包含图片所在的div,以及a标签包裹的鼠标滑过显示的文字和链接

第二步:编写图片div的css样式

第三步:编写文字链接的css样式,这里opacity(透明属性)先设置为0

第四步:通过a标签伪类hover属性来控制上面文字链接的opacity属性值为1

4. 此案例的知识点详解

伪类简介:

是基于动作的样式,是对普通样式的补充。具体介绍如下:

:link -- 伪类,适用于未被用户访问过的链接

:visited -- 伪类,适用于已被用户访问过的链接

:hover -- 伪类,光标指向一个元素,但此元素未被激活时的样式

:active -- 伪类,适用于一个元素被激活时的样式

伪类选择符的顺序:L-V-H-A

css伪类代码实例:

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>css选择器3</title>

<style>

/*hover*/

input[type="text"]:hover{

background-color: #9E1CD5;

}

/*focus*/

input[type="text"]:focus{

background-color: #E12121;

}

/*active*/

input[type="text"]:active{

background-color: #4FAB58;

}

</style>

</head>

<body>

<inputtype="text"name="name">

</body>

</html>

大家好接下来我们会邀请前端架构师以连载的方式,并且结合阿里天猫商城的门户,系统讲解Css的专业知识,欢迎大家关注头条号“互联网IT信息”。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接