a标签的伪元素的应用——link,hover,visited,active
a标签应用中,一般有四个状态:
鼠标未移入前(link),鼠标移入时(hover),
鼠标点击时(active),鼠标点击后(visited)。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
body{
padding: 200px 0;
}
a {
font-size: 50px;
} /*未访问时*/
a:link {
color: green;
} /*已访问后*/
a:visited {
color: blue;
} /*鼠标浮上*/
a:hover {
color: red;
} /*正在点击*/
a:active {
color: yellow;
}
</style>
</head> <body>
<a href="https://www.baidu.com">aaa</a><br />
<a href="http://www.shenchang.com">wode</a><br />
<a href="https://www.qq.com">QQ</a><br />
<a href="https://www.qq.com">weixin</a>
</body> </html>
a标签的伪元素的应用——link,hover,visited,active的更多相关文章
- 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...
- css 伪类: 1)a:link , a:visited, a:hover, a:active 2):first-child
1. 链接伪类: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&qu ...
- 转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 常用伪元素及content属性值的使用
1.常用伪元素有 after.before,使用方法,如下 a:after{ display:block; content:''; } 2. content: "/\00a0";/ ...
- css伪选择器使用总结——css中关于伪类和伪元素的知识总汇
CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
随机推荐
- Codeforces Round #356 (Div. 1) C. Bear and Square Grid
C. Bear and Square Grid time limit per test 3 seconds memory limit per test 256 megabytes input stan ...
- dp水一天
水一些dp的联系题 标签: dp ###hdu_2045 题意 一穿珠子,用三种颜色染色,要求相邻的珠子和两端的珠子不能是同一种颜色,求当有n个珠子的时候有几种染色方案 题解 表示dp[i][j][k ...
- poj_2503(map映射)
题目链接poj2503 Babelfish Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 38820 Accepted: ...
- [国嵌笔记][006][Linux文本编辑器]
Linux中常见的文本编辑器有Vi和Emacs Vim有3中工作模式:命令行模式.插入模式.底行模式 1.键入i进入插入模式 2.键入[Esc]退回到命令行模式 3.键入:进入底行模式,再键入wq保存 ...
- mysql 手册关于修改列字符编码的一个bug
项目因为历史原因使用了 GBK编码,遇到非GBK编码字符时出现乱码问题,情况比较严重,暂时先打算修改 列的字符编码为 utf8mb4. 查看 mysql 手册: 用 GBK 编码转 utf8 进行说明 ...
- RSA关于加密长度限制的解决办法
RSA关于加密长度限制的解决办法 因为rsa采用分块进行加密的,所以有长度限制.如果加密信息较多,可分段加解密(不建议对大量信息rsa加密,效率低效): 正常加密情形如下: public ...
- HDU 2119 Matrix
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2119 解题思路: 处理数据,使用公式最小点覆盖数=最大匹配数,使用匈牙利算法求二分图最大匹配即可. ...
- Runtime之NSCoding的自动归档、接档
为什么要有Runtime的NSCoding的自动归档.接档 大家所熟知的方法 //归档方法 - (void)encodeWithCoder:(NSCoder *)aCoder { //当学生被归档,学 ...
- sql 中文转拼音首字母
http://blog.csdn.net/zhanglong_longlong/article/details/46772571 --可支持大字符集20000个汉字! create function ...
- 更改dede网站地图模板样式
dedecms后台可以生成2个地图,一个是网站地图,html格式的,一个是rss地图,同样默认这2个地图生成之后也会有底部的dedecms版权声明,这个时候我们需要分别更改这2个模板才可以去掉底部的版 ...