很多人在给页面元素设计样式时忽略了它们的状态，只考虑了用户使用鼠标操作，忘记了用户也许是用键盘操作。请用 :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. Converts Internet addresses to Internet numbers. ip2long long2ip

    http://php.net/manual/en/function.long2ip.phpPHP: ip2long - Manual http://php.net/manual/en/function ...

  2. 利用python实现TCP和UDP服务器

    利用python的socket模块可以实现基本的网络编程,并且只限于一对一的连接.当然,也可以在其基础上实现一个网络服务器,但由于太底层这种做法不被推荐.其实如果要实现一个网络服务器很简单,调用pyt ...

  3. Java基础 - 面向对象 - 构造方法

    在类中除了成员方法之外,还存在一种特殊类型的方法,那就是构造方法.构造方法是一个与类同名的方法,对象的创建就是通过构造方法完成的.每当类实例化一个对象时,类都会自动调用构造方法. 构造方法的特点: 构 ...

  4. tomcat和jboss的区别

    1. Tomcat是Apache鼎力支持的Java Web应用服务器(注:servlet容器),由于它优秀的稳定性以及丰富的文档资料,广泛的使用人群,从而在开源领域受到最广泛的青睐. 2. Jboss ...

  5. travelsal all files in a dir using recursion shell

    #!/bin/bash function getdir(){ ` do dir_or_file=$"/"$element if [ -d $dir_or_file ] then g ...

  6. [转载]javascript+ajax+jquery教程11--正则表达式

    原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...

  7. Selenium定位不到指定元素原因之iframe（unable to locate element）

    浏览过程中,图片中的内容可能太小,无法看清,可以>右键>在新标签中打开 Outline 项目原因,需要用selenium实现模拟登陆.模拟上传文件,自然就需要模拟点击[上传]按钮: 模拟点 ...

  8. django博客项目8：文章详情页

    首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...

  9. Django的model模型

    一:字段选项 1,null =True 表示数据库的中可以存为null  默认值是False 2,blank=True  表示字段可以为空  默认值是False 3,chioces 由二项元组构成的一 ...

  10. 搜狐云景client工具评測之WordPress的搭建

    搜狐云景是搜狐推出的一款PaaS产品,眼下还处在公測阶段,拿到邀请码后试用了一下,感觉还不错. 搜狐云景提供了四种方式部署应用,感觉应该能够满足各种口味的码农:1. zip包的形式在网页上传并部署   ...