效果:


.person_use>span{
display:block;
width:0;
height:0;
border-width:10px;
border-style:solid;
border-color:transparent transparent #ddd transparent ;
position:absolute;
top:-20px;
left:50%;
margin-left: -5px;
}
.person_use>span>em{
display:block;
width:0;
height:0;
border-width: 10px;
border-style:solid;
border-color: transparent transparent #fff transparent ;
position:absolute;
top:-9px;
left:50%;
margin-left: -9px;
}

关于使用css伪类实现小图标的更多相关文章

  1. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  2. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  3. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  4. jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child

    最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...

  5. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  6. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  7. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  8. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  9. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

随机推荐

  1. poj 3669 bfs(这道题隐藏着一个大坑)

    题意 在x,y坐标系,有流星会落下来,给出每颗流星落下来的坐标和时间,问你能否从(0,0)这个点到一个安全的位置.所谓的安全位置就是不会有流星落下的位置. 题解: 广搜,但是这里有一个深坑,就是搜索的 ...

  2. 怎么让composer加速(转)

    composer 在install的时候会做这几个事情: 去packagist.org中寻找对应需要的包的版本信息和下载地址 循环下载对应的包 解压安装对应的包 我们平时使用composer慢就可能在 ...

  3. 关于TCP中对于ACK报文是否需要确认的理解

    首先,TCP是一个面向字节流的协议,它不会对自己的内容做出任何的解释,也不需要做出解释,具体的解释由上层的协议来处理. 其次,TCP是一个面向字节流的协议,它会对它发送的每一个字节负责,确保每一个字节 ...

  4. ios风格的时间选择插件

    1.起因 在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子. 2.插件效果 3.插件依赖以及安装使用 插件依赖 ...

  5. 简述JVM、JRE、JDK的关系及作用

    1.JVM:java虚拟机 . 作用:保证java语言跨平台. 2.JRE:java运行环境 jre=java虚拟机+核心类库. 作用:java程序的运行环境. 3.JDK :java开发工具集.JD ...

  6. 谷歌翻译使用php curl请求接口文档

    支持语言 阿拉伯语代码 ar 英语代码 en 中文(简体)代码 zh-CN php中curl类常用方法封装和详解 REST API Method translate POST /language/tr ...

  7. Ubuntu双系统后时间不对解决方案

    先在ubuntu下更新一下时间,确保时间无误 sudo apt install ntpdate sudo ntpdate time.windows.com 然后将时间更新到硬件上 sudo hwclo ...

  8. [剑指offer] 41. 数据流中的中位数 (大小堆,优先队列)

    对于海量数据与数据流,用最大堆,最小堆来管理. class Solution { public: /* * 1.定义一个规则:保证左边(大顶堆)和右边(小顶堆)个数相差不大于1,且大顶堆的数值都小于等 ...

  9. 【Codeforces 276C】Little Girl and Maximum Sum

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最后的和. 其实可以看成是 ∑bi*ai 的形式. 这里的bi这个系数表示的是有多少个区间覆盖了ai这个元素. 既然这样的话. 那么 ...

  10. Spring学习总结(19)——Spring概念详解

    Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spring是一个分层的JavaSE/EEfull-stack(一 ...