来看看：CSS3实例教程:hover、active和:focus伪挑选器

显示全部楼层 · 发表于 2015-1-15 22:53:23

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
破洛洛文章简介：CSS3实例教程:hover、active和:focus伪选择器。
CSS3的伪类选择器就是多，明天我们来进修新的伪类选择器——UL形态伪类选择器。这些选择器都有一个配合的特性名那就是界说的款式只要当元素处于某种形态下时才起感化，在默许形态下有效。

　　明天我们先来打仗:hover、active和:focus这三种形态伪类选择器。

:hover选择器、:active选择器和:focus选择器
　　:hover选择器：当鼠标悬停在所指定的元素上时所利用的款式；
　　:active选择器：当所指定的元素处于激活形态（鼠标在元素上按下还没有松开）时所利用的款式；
　　:focus选择器：当元素取得光标核心时利用的款式，次要用在文本框输出笔墨时利用；
　　【注】下计划例运转效果，之以是点击后当即变成绿色是由于active触发的同时focus也触发了，以是active界说的款式看似有效，人人能够先把focus界说的款式正文失落运转；
<!DOCTYPEHTML>

<html>

<head>

<metacharset="gb2312">

<title>CSS3实例教程:hover、active和:focus伪选择器——网页教授教养网poluoluo.com</title>

<styletype="text/css">

　　　　*{margin:0;padding:0;}

　　　　body{margin-bottom:20px;font-family:"Microsoftyahei";font-size:14px;}

　　　　ul{margin:50pxauto;width:260px;height:100px;list-style:none;}

　　　　　　ulli{margin-bottom:10px;overflow:hidden;}

　　　　　　　　label,input{display:inline;float:left;}

　　　　　　　　label{padding-right:8px;width:50px;height:27px;line-height:27px;text-align:right;}

　　　　　　　　input{width:200px;height:25px;border:1px#eeesolid;border-top:1px#d1d1d1solid;outline:none;}

　　　　　　　　input:hover{background:#eff7ff;}

　　　　　　　　input:active{background:#ffd;}

　　　　　　　　input:focus{background:#f2fddb;}

</style>

</head>

<body>

　　<ul>

　<li>

　　　<labelfor="userName">姓名:</label>

　　<inputid="userName"type="text"/>

　</li>

　<li>

　　　<labelfor="userPwd">暗码:</label>

　　<inputid="userPwd"type="password"/>

　</li>

　</ul>

</body>

</html>
</p>
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：CSS3实例教程:hover、active和:focus伪挑选器

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子