css 实现关闭按钮 X
.close::before {
content: "\2716";
}
然后就显示出来了
这里有个更直接的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.close {
background: orange;
color: red;
border-radius: 12px;
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
font-size: 18px;
padding: 1px;
top: -10px;
right: -10px;
position: absolute;
}
/* use cross as close button */
.close::before {
content: "\2716";
}
</style>
<body>
<div style="height: 100px; width: 100px; border: 1px solid black; position: relative;">
<span class="close"></span>
</div>
</body>
</html>
css 实现关闭按钮 X的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- css 关闭按钮实现
通过css的伪元素:before,:after以及transform: rotate(45deg);旋转来实现(支持IE9及其以上版本) <div class="close" ...
- css画叉叉(一般用于关闭按钮)
css 一般用于右上角关闭弹窗 #pdclose { width: 18px; height: 18px; cursor: pointer; float: right; position: relat ...
- bootstrap css总结
base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级),pre(块级),.pre-scrollabl ...
- 面试题HTML +CSS
HTML+CSS部分1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他 ...
- [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.
最近在做Lodop打印功能: 思路是: 用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是: 在打印的JS文件中, 引 ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
随机推荐
- 关于进程exit后，内存释放释放的实践
最近碰到一个问题,或许也是小猿们都会碰到的问题:内存泄露. 都知道malloc后需要free才能释放内存,shmat后需要shmdt才能断掉内存区并使用IPC_RMID命令删除共享内存.那么如果是当前 ...
- varchar和Nvarchar区别(转)
Unicode字符集就是为了解决字符集这种不兼容的问题而产生的,它所有的字符都用两个字节表示,即英文字符也是用两个字节表示 如果还为了这个纠结,就直接看看后面的解说,做决定吧. 一般如果用到中文或者其 ...
- shell脚本学习指南-grep文本搜索命令-学习（3）
1.作用 Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全 ...
- C#获取mp3文件时长、解决发布到服务器无法使用问题
首先引用COM组件:Microsoft Shell Controls And Automation,需要引用1.2版本的,1.0的会出问题. 这里需要注意DLL的属性Embed Interop Typ ...
- 交互原型画得丑？29个优秀UI/UX线框草图
现在越来越多UI设计师都需要画一些交互的线框图,然而作为视觉专家,当然要把它画得靓靓的嘛,是不是?所以很多用户会使用<5款高效的原型设计工具>来绘制,或者直接手绘更有逼格. 今天达人手工整 ...
- qt学习(三) qt布局
使用横向与竖向.网格三种布局嵌套使用后可以组合出很复杂的界面. 这里向大家推荐这篇博客 http://www.cnblogs.com/Bonker/p/3454956.html 我这里使用布局做了一个 ...
- Android Service 通知Activity更新界面的方法研究
Android Service 通知Activity更新界面的方法研究 Android的最重要的组件式service和activity,那么在使用的过程中,我们最常遇到的问题是他们之间的通信问题. ...
- java内存溢出异常
名称 特征 作用 配置参数 异常 程序 计数器 占用内存小,线程私有, 生命周期与线程相同 大致为字节码行号指示器 无 无 虚拟机栈 线程私有,生命周期与线程 相同,使用连续的内存空间 Java 方法 ...
- 安装Android SDK Manager的“Failed to fetch refused”问题解决方法
安装Android SDK Manager的"Failed to fetch refused"问题解决方法 一见 2014/11/11 问题现象: 步骤一:修改hosts文件(wi ...
- 20169202 2016-2017-2《Windows攻击》
Windows攻击 实验要求:使用Metaspoit攻击MS08-067,提交正确得到远程Shell的截图,加上自己的学号水印 (1):MS08-067远程溢出漏洞描述 MS08-067漏洞的全称为& ...