不要忘了 :focus 和 :active!
很多人在给页面元素设计样式时忽略了它们的状态,只考虑了用户使用鼠标操作,忘记了用户也许是用键盘操作。请用 :focus 和 :active 标明它们的状态:
a:hover, a:active, a:focus { /* 改变它们的样式 */
color: #900;
}
给用户做一件好事吧:下次当你开发一个网站,请用tab键遍历页面上所有的元素;如果你按动tab键后,页面没有任何聚焦点变化,请检查你的样式表,看看是否忘了给它们添加一些状态样式!
不要忘了 :focus 和 :active!的更多相关文章
- chrome控制台模拟hover、focus、active等状态,方便调试
有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...
- :link,:visited,:focus,:hover,:active详解
原文::link,:visited,:focus,:hover,:active详解 CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. ...
- CSS样式中visited,hover,active , focus这四个分别表示什么意思?
CSS伪类用于向某些选择器添加特殊的效果.CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺 ...
- a标签伪类link,hover,active,visited,focus区别
<div id="content"> <h3><a class="a1" href="#">a标签伪类l ...
- BootStrap 关于input与btn的点击focus取消特效相关css
取消btn按钮点击出现的外边框: .btn:focus, /*清除btn按钮点击出现的边框*/.btn:active:focus,.btn.active:focus,.btn.focus,.btn:a ...
- Web程序员常见的5个错误及解决方案
我是那种脾气暴躁的web用户,但我认为正是如此才驱使我成为一名良好的web开发人员.我会对那些会导致使用网站变得困难的事情恼火,我认为事情越简单越方便越好.这里有五个常见的可用性错误,以及如何避免它们 ...
- 2010-2014总结 ____V_V____ hello-world
.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table ...
- [Ceoi2004]Journey
题目描述 给出N个点,及你的出发点K. 接下来N-1行描述有关边的开始点,结束点,边长.保证图中不会有环 接下来给出数字J,代表你要走多少个点. 接下来J个数字,代表你要走过的点的编号.当然你可以自己 ...
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
随机推荐
- WebService 入门
1. 远程调用技术 2. WebService 概述 WebService 是使用 Http 发送 SOAP 协议数据的一种远程调用技术; WebService 需要开发客户端; WebService ...
- QTimeLine 控制动画(一步一步的往前变化,并在每次变化时都会发出一个frameChanged信号)
QTimeLine顾名思义表示一条时间线,即一个时间序列,该时间序列会按我们实现定义好的间隔一步一步的往前变化,并在每次变化时都会发出一个frameChanged()信号.所以,我们通常会使用该类来驱 ...
- ssh登陆github
ssh [转载] 如果只是在一个仓库里管理文件历史,Git和SVN真没啥区别.为了保证你现在所学的Git物超所值,将来绝对不会后悔,同时为了打击已经不幸学了SVN的童鞋,本章开始介绍Git的杀手级功能 ...
- Django 之基础学习
阅读目录 配置 视图层之路由系统配置 模版层 模版过滤器 request & response Ajax Cookie Session 分页 文件传输 Django MTV模型 Django ...
- 用Tchromium替换webbrowser
用Tchromium替换webbrowser 用惯了EmbeddedWB,不想换,但是IE内核一直存在内存泄漏问题,没办法,只有寻找替代品了. 要把用习惯的EmbeddedWB换成完全不一样的TChr ...
- (转)CTO的烦恼:为啥差距就这么大呢?
话说胖哒是一只CTO,近来遇到了一些小烦恼… 胖哒表示这么多问题想想就头大啊! 一直听说用Docker解决问题不错,于是两个月前,胖哒不远万里来到DockerCon 16,打算向国外的Docker先行 ...
- Kattis - cokolada【水】
Kattis - cokolada[水] 题意 有一个人想吃巧克力,但是巧克力都是按照 2 的幂次的数量包装的,然后他想吃一定数量块的巧克力,然后可以敲碎,每次敲碎都分成两半,比如四块装的分成两块就是 ...
- cf100989b
http://codeforces.com/gym/100989/my B. LCS (B) time limit per test 0.25 seconds memory limit per tes ...
- POJ - 2942 Knights of the Round Table (点双联通分量+二分图判定)
题意:有N个人要参加会议,围圈而坐,需要举手表决,所以每次会议都必须是奇数个人参加.有M对人互相讨厌,他们的座位不能相邻.问有多少人任意一场会议都不能出席. 分析:给出的M条关系是讨厌,将每个人视作点 ...
- linux中相关服务不能访问的排错技巧
Linux相关服务不能访问的排错步骤,以HTTP服务为例: 一.服务端排查思路: 1.检查SELinux是否关闭(针对CentOS6系统) (1)临时关闭 setenforce 0 (2 ...