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,即可获得统一的样式设置. ...
随机推荐
- 禁止ImageCapture自动启动
[禁止ImageCapture自动启动] 打开ImageCapture,点开左下角菜单,把Connecting this iPhone opens:的内容改为以下选项即可.
- TouchEvent里的targetTouches、touches、changedTouches的区别的具体体现是？
touches:当前屏幕上所有触摸点的集合列表 targetTouches: 绑定事件的那个结点上的触摸点的集合列表 changedTouches: 触发事件时改变的触摸点的集合 举例来说,比如div ...
- for 续6
---------siwuxie095 for 实际运用样例(/f 的使用不列出来): for %%i in (*) do echo %%i 显示当前目录下 ,所有非文 ...
- Spring boot 、mybatis、swagger、c3p0、redis 和mongodb 整合
文件路径: 添加依赖: <?xml version="1.0" encoding="UTF-8"?> <project ...
- MVC过滤器实现用户登录验证
前言当我们访问某个网站的时候需要检测用户是否已经登录(通过Session是否为null),我们知道在WebForm中可以定义一个BasePage类让他继承System.Web.UI.Page,重写它的 ...
- [转].NET 4.5+项目迁移.NET Core的问题记录 HTTP Error 502.5
本文转自:http://www.cnblogs.com/ronli/p/5900001.html 这几天试着把目前的开发框架迁移到新的.net core平台,中间遇到的问题在这里简单记录一下. 迁移过 ...
- CentOS7下NFS服务安装及配置
系统环境:CentOS Linux release 7.4.1708 (Core) 3.10.0-693.el7.x86_64 软件版本:nfs-utils-1.3.0-0.48.el7_4.x86_ ...
- code3289 花匠
题目大意是求一个最长的抖动的子序列 题解中有一个大神写下了这样的代码: #include<cstdio> ,b=,x,y; int mmax(int a,int b) { if(a> ...
- matplotlib安装错误依赖问题解决
When install "matplotlib" with "pip", if you get the following error, it means t ...
- 8 种提升 ASP.NET Web API 性能的方法 （转）
出处:http://www.oschina.net/translate/8-ways-improve-asp-net-web-api-performance ASP.NET Web API 是非常棒的 ...