效果:


.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. RHEL 7 & CentOS 7禁用IPV6(转载)

    RHEL 7 & CentOS 7下禁用IPV6的方法和之前的版本不太一样了,本文整理了一下处理方法: 首先,我们必须给出最根本的解决方法:修改grub,在引导时就不加载IPV6模块 这样修改 ...

  2. SQL增删改

    USE sqlxx CREATE TABLE ygb( sid INT, sname VARCHAR(20), sgender VARCHAR(2), sbirthday DATE, semail V ...

  3. cmake处理多源文件目录

    cmake处理多源文件目录 假设我们的源文件全部在src中,则我们需要在子文件src中建立文件CmakeLists.txt,内容如下: AUX_SOURCE_DIRECTORY(. DIR_TEST_ ...

  4. java 比较两个时间大小

    Date d1 = new Date(System.currentTimeMillis()-1000); Date d2 = new Date(System.currentTimeMillis()); ...

  5. Nginx 配置 Gzip 压缩

    打开配置文件 /etc/nginx/nginx.conf,取消掉以下的注释项: #gzip on; 取消后: gzip on; 在此配置后加上以下内容: gzip on; gzip_vary on; ...

  6. 【AIM Tech Round 5 (rated, Div. 1 + Div. 2) 总结】【题解往前或往后翻,不在这】

    又是爆炸的一场 心态有点小崩.但问题不大.. 看A题,一直担心有多个正方形..小心翼翼地看完之后,毅然地交上去了. [00:08] A[Accpted] 然后开始看B题. 觉得和之前做的某题很像,但翻 ...

  7. Flash的选择

    算起来自己接触Flash接近4年了. 最開始的2.0,做button,做动画,做导航. 后来用3.0做动画,做相冊.做毕业设计,做课件. 然后到公司做2.0的动画,模板开发,效果设计. 似乎又回到了原 ...

  8. 【云快讯】之四十八《IBM和Cisco最新收购,加强Openstack易用能力》

    2015-06-08 张晓东 东方云洞察 点击上面的链接文字,能够高速关注"东方云洞察"公众号 本周宣布的两起收购引人注意.思科购买Piston云计算公司.同期IBM的收购Blue ...

  9. SDUT 1225-编辑距离(串型dp)

    编辑距离 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 如果字符串的基本操作仅为:删除一个字符.插入一个字符和将一个字符改动 ...

  10. 我的php站点系统分析工具01

    出于后的工作需求.须要高速弄清楚整个php站点系统是怎样执行的.抱着试探的心态.写出了这个工具. 临时把它叫做"系统信息动态解析地图"吧,或许"系统信息图"更方 ...