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,即可获得统一的样式设置. ...
随机推荐
- 迷你MVVM框架 avalonjs 0.9发布
本版本最大的改进是引进了ms-with绑定,现在可轻松遍历对象了. 改进列表如下: 重新使用082的scanNodes方法,因为有关旧式IE下UI渲染锁死的问题已经解决了. 优化each绑定与Coll ...
- testng的xml文件说明（TestNG DTD）
testNG启发自JUnit和NUnit的一种测试框架,通过使用testNG使的测试更简单.,比如如下的一些特点: 1.通过注释来管理测试 2.多线程并发执行测试,且是安全的 3.支持数据驱动测试 4 ...
- 22-python爬虫解决gbk乱码问题
转载自: python爬虫解决gbk乱码问题 今天尝试了下爬虫,爬取一本小说,忘语的凡人修仙仙界篇,当然这样不好,大家要支持正版. 爬取过程中是老套路,先获取网页源代码 # -*- coding: ...
- iconv-go升级过程中的编译问题
工作项目原因,需要对golang进行升级.升级之后老的iconv-go运行有问题.因为新的golang运行更加严格,所以需要升级iconv-go. 从djimenez/iconv-go 拉下来代码进行 ...
- Please ensure that adb is correctly located at 。。。。。。。。。。。。
遇到问题描述: 运行Android程序控制台输出 [2012-07-18 16:18:26 - ] The connection to adb is down, and a severe error ...
- JVM 垃圾回收- 转载 知识碎片
最近关注了一下垃圾回收的问题,想了解一下JVM 关于方法区的垃圾回收机制,找了几篇文章,不同的文章从不同角度讲述了一下,嗯... 拼凑起来 记录一下, 有些未验证正确性... JVM 方法区 当JVM ...
- 阿里云OSS-js分片上传
使用 aliyun-oss-sdk-4.4.4.min.js 方式一 客户端授权 https://help.aliyun.com/document_detail/32069.html 通过new OS ...
- windows下 git+tortoiseGit的使用【转】
一定要自己写出来才能牢记,所以我来写一下 git确实比svn好用的多了,最起码只有一个文件夹用来标记版本信息比svn所有文件夹下都要放一个文件夹来标记版本信息先进多了,不然你不想要版本管理这些文件的时 ...
- intrinsicConditionQueue笔记
一, 使用conditionQueue需要注意的一些点: 一个conditionQueue被多种Predicate condition 使用是很正常的,所以当一个wait的线程被唤醒的时候,很有可能它 ...
- ZOJ2388 Beat the Spread! 2017-04-16 19:18 91人阅读 评论(0) 收藏
Beat the Spread! Time Limit: 2 Seconds Memory Limit: 65536 KB Superbowl Sunday is nearly here. ...