很多人在给页面元素设计样式时忽略了它们的状态，只考虑了用户使用鼠标操作，忘记了用户也许是用键盘操作。请用 :focus 和 :active 标明它们的状态：

a:hover, a:active, a:focus { /* 改变它们的样式 */

    color: #900;

}

　　给用户做一件好事吧：下次当你开发一个网站，请用tab键遍历页面上所有的元素；如果你按动tab键后，页面没有任何聚焦点变化，请检查你的样式表，看看是否忘了给它们添加一些状态样式！

不要忘了 :focus 和 :active！的更多相关文章

  1. chrome控制台模拟hover、focus、active等状态，方便调试

    有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...

  2. :link,:visited,:focus,:hover,:active详解

    原文::link,:visited,:focus,:hover,:active详解 CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究.   ...

  3. CSS样式中visited，hover，active , focus这四个分别表示什么意思？

    CSS伪类用于向某些选择器添加特殊的效果.CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺 ...

  4. a标签伪类link，hover，active，visited，focus区别

    <div id="content"> <h3><a class="a1" href="#">a标签伪类l ...

  5. BootStrap 关于input与btn的点击focus取消特效相关css

    取消btn按钮点击出现的外边框: .btn:focus, /*清除btn按钮点击出现的边框*/.btn:active:focus,.btn.active:focus,.btn.focus,.btn:a ...

  6. Web程序员常见的5个错误及解决方案

    我是那种脾气暴躁的web用户,但我认为正是如此才驱使我成为一名良好的web开发人员.我会对那些会导致使用网站变得困难的事情恼火,我认为事情越简单越方便越好.这里有五个常见的可用性错误,以及如何避免它们 ...

  7. 2010-2014总结 ____V_V____ hello-world

    .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table ...

  8. [Ceoi2004]Journey

    题目描述 给出N个点,及你的出发点K. 接下来N-1行描述有关边的开始点,结束点,边长.保证图中不会有环 接下来给出数字J,代表你要走多少个点. 接下来J个数字,代表你要走过的点的编号.当然你可以自己 ...

  9. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

随机推荐

  1. 个案排秩 Rank (linear algebra) 秩 (线性代数)

    非叫“秩”不可,有秩才有解_王治祥_新浪博客http://blog.sina.com.cn/s/blog_8e7bc4f801012c23.html 我在一个大学当督导的时候,一次我听一位老师给学生讲 ...

  2. Tornado实战

    抽屉之Tornado实战(1)--分析与架构 抽屉之Tornado实战(2)--数据库表设计 抽屉之Tornado实战(3)--注册 抽屉之Tornado实战(4)--发帖及上传图片 抽屉之Torna ...

  3. django博客项目4：博客首页视图(1)

    Web 应用的交互过程其实就是 HTTP 请求与响应的过程.无论是在 PC 端还是移动端,我们通常使用浏览器来上网,上网流程大致来说是这样的: 我们打开浏览器,在地址栏输入想访问的网址,比如 http ...

  4. 我的Android进阶之旅------>android如何将List请求参数列表转换为json格式

    本文同步发表在简书,链接:http://www.jianshu.com/p/395a4c8b05b9 前言 由于接收原来的老项目并进行维护,之前的http请求是使用Apache Jakarta Com ...

  5. MySQL数据库（2）- 库的操作、表的操作、数据的操作、存储引擎的介绍

    一.库的操作 1.系统数据库 执行如下命令,查看系统数据库: mysql> show databases; 参数解释: information_schema: 虚拟库,不占用磁盘空间,存储的是数 ...

  6. mysql 建立表之间关系 练习 1

    练习:账号信息表,用户组,主机表,主机组 #用户表 mysql> create table user( id int not null unique auto_increment, userna ...

  7. Java-idea-创建maven项目，部署项目，部署服务器，简单测试

    spring-boot项目创建 1.项目创建 使用Idea,File→Project→Spring initalizr,点击next,进行基本配置.此时 一个spring boot项目创建完成. 之后 ...

  8. windows10下安装face_recongnition

    第一步:安装vistual studio,我安装的是最新版本2017. 另外,并且因为要学习C# ,选了所需要的东西.暂不知这一步是否必需. 第二步:接下来安装boost 通过此链接:https:// ...

  9. 小知识：pyhon的作用域

    http://www.cnblogs.com/wupeiqi/p/5649402.html    五句话搞定JavaScript作用域 从JavaScript  == pyhon 作用域几乎一致 __ ...

  10. Bootstrap 简介二

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstra ...