关于使用css伪类实现小图标

效果:

.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伪类实现小图标的更多相关文章
- 应用越来越广泛的css伪类
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...
- jquery 文字向上滚动+CSS伪类before和after的应用
汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- CSS Icon 项目地址 小图标-用css写成的
http://cssicon.space/#/icon/focus 这是所有用css写成的 小图标 右侧有 html和css代码
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
随机推荐
- vc++如何创建程序-构造和继承
#include<iostream.h>//定义一个动物类class Animal{public: void eat();//添加方法 { cout<<"animal ...
- Centos7 单节点安装 FastDFS + FastDHT服务
Centos7 单节点安装 FastDFS + FastDHT服务 1.安装gcc(编译时需要) FastDFS是C语言开发,安装FastDFS需要先将官网下载的源码进行编译,编译依赖gcc环境,如果 ...
- php-fpm优化处理
php-fpm.conf有两个至关重要的参数:一个是”max_children”,另一个是”request_terminate_timeout”. 我的两个设置的值一个是”40″,一个是”900″,但 ...
- Python CSV- 绘制气温图表
CSV- 绘制气温图表 资源: 链接: https://pan.baidu.com/s/1kqREk-sRnOcC34Mh1lBDHQ 提取码: uyx7 # highs_lows_Jul.py 最 ...
- 20190226-SecureCRT连接linux显示中文乱码
SecureCRT连接我的Ubuntu14时中文显示乱码 解决办法: 在session options里选择UTF-8
- Java基础学习总结(32)——Java项目命名规范
一.命名规范 1. 项目名全部小写 2. 包名全部小写 3. 类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写. 如:public class MyFirstClass{} 4. 变量 ...
- springmvc上传操作
创建虚拟目录 配置tomcat的配置文件server.xml 在真实路径中放置一个图片 启动服务器: 直接可以通过配置的虚拟路径来访问真实路径中的图片 所以 我们在做图片上传的操作的时候 就可 ...
- 环境搭建Selenium2+Eclipse+Java+TestNG_(一)
第一步 安装JDK 第二步 下载Eclipse 第三步 在Eclipse中安装TestNG 第四步 下载Selenium IDE.SeleniumRC.IEDriverServer 第五步 下载Fi ...
- BA-siemens-PXM液晶面板
PXM面板作用:可以查看模块内部的信息,可以触发控制点来近程控制模块上的点位(非常便于现场调试). 优点:1.便于现场紧急控制,有些地方是必须要加上的,如工厂控制等项目,假如机器死机,可以通过面板切换 ...
- 洛谷 U6254 最低费用
U6254 最低费用 题目背景 小明暑假去国外游玩,到了最后一天,却发现自己的钱还不一定够去机场,于是他开始对国外特殊的交通方式进行研究,但是他发现路段的错综复杂使他头脑昏花,于是他打开电脑,希望你去 ...