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,即可获得统一的样式设置. ...
随机推荐
- mysql5.7 初始化启动
root@0f6852dfee81:/# mysql --versionmysql Ver 14.14 Distrib 5.7.18-16, for debian-linux-gnu (x86_64 ...
- Redis Set命令
[Redis Set命令] SET key value [EX seconds] [PX milliseconds] [NX|XX] 将字符串值 value 关联到 key . 如果 key 已经持有 ...
- java web作用域page request session application
转载自:http://blog.csdn.net/wyd458549392147/article/details/6944481 1.page指当前页面.只在一个jsp页面里有效 . 2.reques ...
- 54. Spiral Matrix (Graph)
Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...
- spring boot 1
1.创建项目. meven可以配置阿里云meven镜像 <mirror> <id>nexus-aliyun</id> <mirrorOf>central ...
- 稀疏矩阵乘法 · Sparse Matrix Multiplication
［抄题］: 给定两个 稀疏矩阵 A 和 B,返回AB的结果.您可以假设A的列数等于B的行数. [暴力解法]: 时间分析: 空间分析: ［思维问题］: ［一句话思路］: 如果为零则不相乘,优化常数的复杂 ...
- 手动制作CA证书
一.安装 CFSSL 证书下载官方地址:https://pkg.cfssl.org #下面三个安装包,无需下载,之前百度云中的压缩包中都有[root@linux-node1 ~]# cd /usr/l ...
- 逆序对 分治nlogn
定义:A是包含n个元素的有序序列{a1,a2 … an},若ai > aj 且 i < j ,则称 (ai , aj)是A的一个逆序对.求逆序对是指求出A中存在逆序对的数量. 这个算法是归 ...
- using namespace cv
在OpenCV中使用 using namespace cv 的作用: 在使用#include语句包含相应头文件后,使用下面语句即可包含相应的Opencv命名空间 using namespace cv; ...
- Java程序设计19——类的加载和反射-Part-B
接下来可以随意提供一个简单的主类,该主类无须编译就可使用上面的CompileClassLoader来运行它. package chapter18; public class Hello { publi ...