不要忘了 :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 ...
随机推荐
- Tunneling protocol
w https://en.wikipedia.org/wiki/Tunneling_protocol
- maven安装,maven命令行使用
1 下载maven,解压(无需安装),配置环境变量,命令行mvn -v测试. 2 maven常用命令:https://www.cnblogs.com/wkrbky/p/6352188.html 3 注 ...
- Python简单实现邮件群发
Python简单实现邮件群发 import smtplib from email.mime.text import MIMEText from email.utils import formatadd ...
- N多条短信,用什么算法从中找出相似内容的来?
创建树,每个字符为一个节点,对于同一位置字符相同的共用一个节点.最后找出具有公共节点的短信.例如:MessageA "hello,world"MessageB "hell ...
- npm更新和nodejs更新
npm更新和nodejs更新 更新你已经安装的NPM库,这个很简单,只需要运行. npm update -g 更新Nodejs自身.一直依赖我都是下载最新版的源码,然后make install,及其繁 ...
- POJ_1195 Mobile phones 【二维树状数组】
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013912596/article/details/33802561 题目链接:id=1195&qu ...
- 000 初步使用Kotlin开发Android应用
Kotlin是Jetbrians公司开发的一款编程语言,基于jvm兼容Java. 要求 IDE:IDEA或者Android Studio(简称studio)对Kotlin语言有所了解,官方文档:htt ...
- mysql-xtrabackup
使用xtrabackup进行MySQL数据库备份 2013年10月04日 ⁄ MySQL ⁄ 共 11306字 ⁄ 使用xtrabackup进行MySQL数据库备份已关闭评论 ⁄ 被围观 34,116 ...
- Excel数据常用操作,vlookup,text,trim,数据格式导致出错
数据有缺漏,需要在数据前面补零 =TEXT(F70,"000000") 前面是要操作的数据,后面是补几位 匹配数据(将一个表格中的数据进行匹配) =VLOOKUP(C2,aaa,4 ...
- 基于jQuery和Bootstrap的手风琴垂直菜单
在线演示 本地下载