效果:


.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. 用Navicat Prenium12连接Oracle数据库(oracle11g版本)时报错ORA-28547:connection to server failed,probable Oracle Net admin error.解决办法

    上网一查原来是oci.dll版本不对.因为Navicat是通过Oracle客户端连接Oracle服务器的,Oracle的客户端分为两种,一种是标准版,一种是简洁版,即Oracle Install Cl ...

  2. 实验二:1、输出“Hello Word!”;2、测试主方法 的输入参数。3、总结

    一.输出:“Hello Word!” 1.新建java项目:点击File->New->Java Project.在project name一栏中输入自己所要创建的项目名称,点击Finish ...

  3. 更新时间戳.txt

    UPDATE bbs2 INNER JOIN time1 ON bbs2.AnnounceID = time1.AnnounceID SET bbs2.asptime = time1.asptime

  4. nyoj8-一种排序

    一种排序 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数:现 ...

  5. Python面向对象----封装

    1. Python语言不是强类型语言, 公有和私有体现的不是很明显.私有成员可以通过 对象._ClassName__私有成员进行访问 2. 使用封装借助了装饰器 其实具有类get和set等操作

  6. 【codeforces 807B】T-Shirt Hunt

    [题目链接]:http://codeforces.com/contest/807/problem/B [题意] 你在另外一场已经结束的比赛中有一个排名p; 然后你现在在进行另外一场比赛 然后你当前有一 ...

  7. PHP学习总结(6)——PHP入门篇之PHP语句结束符

    PHP语句结束符 有的小伙伴们是不是已经注意在每一条PHP代码行结尾处都会有一个分号:.对的,这点注意,在PHP编程中需要在每条语句的末尾加入分号:.但要注意,分号:一定在半角状态下输入噢.

  8. html5 过程解决问题收集

    1.使用画布时报错误: Uncaught TypeError: Object [object Object] has no method 'getContext' . 解决方法: $(function ...

  9. XML基本语法

    本节要点: 了解XML的文档声明 了解XML的元素.命名规则.属性.元素内容.处理指令等概念 1   XML文档声明 表示该文档是一个XML文档,以及遵循哪个XML版本的规范. 规范:<?xml ...

  10. BA-防冻开关的安装

    防冻开关学名:防冻恒温保护器,在通风空调系统中监测加热盘管空气侧温度来防止盘管冻坏.具有较小的转换差和良好的重复性.可自动复位.当在30cm长的毛细管上温度低于选择的设定值时会产生一个闭合信号给DDC ...