效果:


.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. python调用函数实现数据的增删改查(2)

    1  添加数据 def add(): # 输入姓名,年龄,电话 name=raw_input('name:') age=raw_input('age:') phone=raw_input('phone ...

  2. Python笔记7----Pandas中变长字典Series

    1.Series概念 类似一维数组的对象,由数据和索引组成 2.Series创建 用Series()函数创建,0,1,2为series结构自带的索引. 可以自己指定索引值,用index,也可以直接用字 ...

  3. Python数据分析1------数据存取

    1.CSV格式数据: 1.1普通读取和保存 可以以纯文本形式打开,可以保存多条记录,每条记录的数据之间默认用逗号来分隔,csv就是逗号分割值的英文缩写. 保存为csv文件: import pandas ...

  4. PHP中调用Soap/WebService

    关于在PHP中如何调用Soap/WebService的描述,网络上有不少帖子.但是主要讲述了如何用PHP开发服务器端.客户端并加以关联,而很少触及在PHP中调用现成的WebService的情况.在本文 ...

  5. [网络流24题] 太空飞行计划问题 (最大流->最大权闭合图)

    洛谷传送门 LOJ传送门 做这道题之前建议先看这篇论文,虽然论文里很多地方用了很多术语,但hbt神犇讲得很明白 这篇题解更加偏向于感性理解 把问题放到二分图上,左侧一列点是实验,权值为$p[i]$,右 ...

  6. 干货:鲜为人用的MySQL高级特性与玩法!

    上一篇文章<万字总结:学习MySQL优化原理,这一篇就够了!>文末给大家留有两个开放的问题: 有非常多的程序员在分享时都会抛出这样一个观点:尽可能不要使用存储过程,存储过程非常不容易维护, ...

  7. BA--湿球温度和干球温度的区别

    关于湿球温度和干球温度的区别: 干湿球温度表:用一对并列装置的.形状完全相同的温度表,一支测气温,称干球温度表,另一支包有保持浸透蒸馏水的脱脂纱布,称湿球温度表.当空气未饱和时,湿球因表面蒸发需要消耗 ...

  8. POJ 1950

    直接DFS,因为实在没想到什么剪枝了... 注意一点是,10.11使用的是1011哦 #include <iostream> #include <cstdio> #includ ...

  9. Hadoop Word Count程序

    Hadoop Word Count程序 pom.xml文件: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns ...

  10. 因一段JavaScript代码引发的闲扯

    前两天,一朋友给我发了一段JavaScript代码: function f1(){ var n=999; nAdd=function(){ n+=1 }; function f2(){ alert(n ...