效果:


.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. 原生js实现form表单序列化

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...

  2. C++ STL-stack使用详解

    stack 类是容器适配器,它给予程序员栈的功能--特别是 FILO (先进后出)数据结构. 该类模板表现为底层容器的包装器--只提供特定函数集合.栈从被称作栈顶的容器尾部推弹元素. 一:头文件 #i ...

  3. ROPI下载安装

    ROPI下载安装 官方地址 参考文献 安装过程 wget http://num.math.uni-goettingen.de/~m.goerigk/ropi/0.1.0/ropi-0.1.0.tar. ...

  4. 转[总结]FFMPEG视音频编解码零基础学习方法 .

    http://blog.csdn.net/leixiaohua1020/article/details/15811977 在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视 ...

  5. jQuery(表单选择器)

  6. FFT卷积相加模板

    struct Complex { double r,i; Complex(double _r,double _i):r(_r),i(_i){} Complex(){} Complex operator ...

  7. CDH版hbase-0.98.1单机安装

    HBase 的安装有两种方式:单机安装和分布式安装.HBase的单机安装了解即可,大家重点掌握HBase 分布式集群的安装.下面我们分别进行介绍. HBase 单机安装 HBase 需要运行在 Had ...

  8. Inflation System Properties

    https://blogs.oracle.com/buck/inflation-system-properties I wanted to write a quick post about the t ...

  9. HDU 4394 BFS

    M2%10x=N (x=0,1,2,3....) 给出N.找到最小的满足条件的M 因为:N的个位仅仅由M的个位决定.N十位由M的个位和十位决定,N的百位由M的个位十位百位决定.以此类推 全部从个位開始 ...

  10. hrift does not support polymorphic data types

    hrift does not support polymorphic data types Exception in thread "main" com.facebook.swif ...