仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 725|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看: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就可以轻松实现,从而更快地下载页面。
爱飞 该用户已被删除
沙发
发表于 2015-1-17 19:30:23 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。
小妖女 该用户已被删除
板凳
发表于 2015-1-25 21:59:18 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
冷月葬花魂 该用户已被删除
地板
发表于 2015-2-4 11:02:14 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
再现理想 该用户已被删除
5#
发表于 2015-2-9 22:19:18 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
不帅 该用户已被删除
6#
发表于 2015-2-28 01:03:45 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
山那边是海 该用户已被删除
7#
发表于 2015-3-9 19:52:49 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
变相怪杰 该用户已被删除
8#
发表于 2015-3-17 02:33:54 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
海妖 该用户已被删除
9#
发表于 2015-3-23 17:56:37 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-30 06:08

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表