当前位置: 首页 > news >正文

怎样不引入图片实现前端css实现x关闭按钮

  1. 首先初始化一个dom节点
<span class="closeButton"></span>
  1. 设置样式
.closeButton {width: 12px;height: 12px;margin-top: 5px;margin-right: 5px;float: right;cursor: pointer;color: #105c86;}
  1. 通过伪元素before after画两条线
    margin-left 的设置是为了处理’线’的自身宽度
 &::before,&::after {position: absolute;// right: 0;width: 2px;height: 12px;margin-left: 2px;content: '';background: #105c86;}
  1. 分别试着旋转角度
   &::before {transform: rotate(-45deg);}&::after {transform: rotate(45deg);}

完整代码

.closeButton {width: 12px;height: 12px;margin-top: 5px;margin-right: 5px;float: right;cursor: pointer;color: #105c86;&::before,&::after {position: absolute;// right: 0;width: 2px;height: 12px;margin-left: 2px;content: '';background: #105c86;}&::before {transform: rotate(-45deg);}&::after {transform: rotate(45deg);}
}

参考网页
https://www.nowcoder.com/discuss/517014650349744128?fromPut=jj-blog&urlSource=extension-api

相关文章:

怎样不引入图片实现前端css实现x关闭按钮

首先初始化一个dom节点 <span class"closeButton"></span>设置样式 .closeButton {width: 12px;height: 12px;margin-top: 5px;margin-right: 5px;float: right;cursor: pointer;color: #105c86;}通过伪元素before after画两条线 margin-left 的设置是…...

SpringBoot实现文件下载的多种方式

SpringBoot实现文件下载的几种方式 1. 将文件以流的形式一次性读取到内存&#xff0c;通过响应输出流输出到前端1.1 下载文件 2. 将输入流中的数据循环写入到响应输出流中&#xff0c;而不是一次性读取到内存&#xff0c;通过响应输出流输出到前端3. 下载网络文件到本地4. 网络…...

uniapp简单版语音播放

mounted() {this.ScanAudio(http://118.178.137.235:88/ipoker.mp3, 3); // 开始播放音频},ScanAudio(url, count) {// 递归终止条件&#xff1a;当循环次数小于等于 0 时&#xff0c;停止递归if (count < 0) return;// 创建内部音频上下文对象var music uni.createInnerAu…...

前端三剑客入门一文解决

文章目录 HTML快速开发网站Flask页面结构标签基础标签超链接图片列表下拉框表格input系列多行文本form表单 网络请求HTML案例 CSSCSS盒模型CSS样式定义CSS选择器 CSS样式使用1. 在标签上直接写2. 在head标签中写3.写到css文件中 标签样式1. 高度和宽度2. 块级和行内标签3.字体设…...

php curl apache 超时 500错误

web请求超过40s 就返回500错误 php的超时时间 set_time_limit无效 curl CURLOPT_TIMEOUT 设置请求时间 无效 设置apache Timeout 链接超时 无效 最后添加 Fcgid才可以 apache 配置文件 httpd.conf <IfModule mod_fcgid.c>FcgidProcessLifeTime 10000FcgidIOTimeout 1000…...

ValueError: too many values to unpack (expected 4)

ValueError: too many values to unpack (expected 4)这个错误通常是由于解包赋值个数与返回值个数不匹配所致。 比较常见的情况是: 1.在数据预处理函数中,使用train_test_split对数据进行分割后返回值,但解包赋值时个数与返回值不匹配。 train_test_split返回的就是(X_trai…...

学习Vue过程中遇到的问题汇总

Vue 控制台出现You are running Vue in development mode. Make sure to turn on production mode when deploying for production. 在页面的body标签或head标签中加入如下代码 <script type"text/javascript">Vue.config.productionTip false</script>…...

cloud_mall-notes03

请求方式GetMapping&#xff08;11&#xff09;用途方法返回值GetMapping(“info”)查询管理员信息getByIdsysUserGetMapping(“info/{userId}”)查询管理员详情getByIdsysUserGetMapping(“info/{roleId}”)查询角色详情getByIdsysRoleGetMapping(“info/{categoryId}”)根据标…...

Redis注入中出现的问题

Redis注入中出现的问题 出现的问题 Error starting ApplicationContext. To display the conditions report re-run your application with debug enabled. 2023-08-23 16:38:42.294 ERROR 32136 --- [ main] o.s.b.d.LoggingFailureAnalysisReporter : *********…...

机器学习实战之模型的解释性:Scikit-Learn的SHAP和LIME库详解

引言&#xff1a;机器学习模型的“黑箱”困境 机器学习模型的崛起让我们惊叹不已&#xff01;不论是预测房价、识别图片中的猫狗&#xff0c;还是推荐给你喜欢的音乐&#xff0c;这些模型都表现得非常出色。但是&#xff0c;有没有想过&#xff0c;这些模型到底是如何做出这些决…...

【网络安全】防火墙知识点全面图解(二)

本系列文章包含&#xff1a; 【网络安全】防火墙知识点全面图解&#xff08;一&#xff09;【网络安全】防火墙知识点全面图解&#xff08;二&#xff09; 防火墙知识点全面图解&#xff08;二&#xff09; 21、路由器的访问控制列表是什么样的&#xff1f;22、防火墙的安全策…...

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递(8 月 14 日论文合集)

文章目录 一、检测相关(7篇)1.1 Continual Face Forgery Detection via Historical Distribution Preserving1.2 Exploring Predicate Visual Context in Detecting of Human-Object Interactions1.3 Out-of-Distribution Detection for Monocular Depth Estimation1.4 Cyclic-…...

自学设计模式(类图、设计原则、单例模式 - 饿汉/懒汉)

设计模式需要用到面向对象的三大特性——封装、继承、多态&#xff08;同名函数具有不同的状态&#xff09; UML类图 eg.—— 描述类之间的关系&#xff08;设计程序之间画类图&#xff09; : public; #: protected; -: private; 下划线: static 属性名:类型&#xff08;默认值…...

python爬虫10:selenium库

python爬虫10&#xff1a;selenium库 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网站产…...

c++ java rgb与nv21互转

目录 jni函数 c++ rgb转nv21,可以转,不报错,但是转完只有黑白图 java yuv420保存图片,先转nv21,再保存ok: c++ yuv420月bgr互转,测试ok jni函数 JNIEXPORT void JNICALL Java_com_tencent_blazefacencnn_BlazeFaceNcnn_encode(JNIEnv *env,jobject thiz, jobject in…...

多视图聚类(multi-view clustering)简介

多视图聚类 目前大概有以下几种&#xff1a; 多视图k-means聚类多视图谱聚类多视图图聚类多视图子空间聚类 (multi-view subspace clustering)深度学习多视图聚类 (deep multi-view clustering) 其中多视图子空间聚类具有不错的数据表征能力。 对于多视图子空间聚类而言&…...

wazhu配置以及漏洞复现

目录 1.wazhu配置 进入官网下载 部署wazhu 修改网络适配器 重启 本地开启apache wazhu案例复现 前端页面 执行 1.wazhu配置 进入官网下载 Virtual Machine (OVA) - Installation alternatives (wazuh.com) 部署wazhu 修改网络适配器 重启 service network restart 本地…...

javaweb项目部署linux服务器遇到的问题

其他有关本次部署内容请参考本站其他文章 javaweb项目要用war包 IntelliJ IDEA 可以打包out里的子目录 D:\D盘文件\浏览器\webshop\out\artifacts\webshop_war_exploded>jar cvf webshop.war * 方法来源视频 18、web项目的打包与发布_哔哩哔哩_bilibili myeclipse项目…...

【数据结构OJ题】环形链表

原题链接&#xff1a;https://leetcode.cn/problems/linked-list-cycle/description/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 整体思路&#xff1a;定义快慢指针fast&#xff0c;slow&#xff0c;如果链表确实有环&#xff0c;fast指针一定会…...

PySpark-核心编程

2. PySpark——RDD编程入门 文章目录 2. PySpark——RDD编程入门2.1 程序执行入口SparkContext对象2.2 RDD的创建2.2.1 并行化创建2.2.2 获取RDD分区数2.2.3 读取文件创建 2.3 RDD算子2.4 常用Transformation算子2.4.1 map算子2.4.2 flatMap算子2.4.3 reduceByKey算子2.4.4 Wor…...

vue 在IOS移动端中 windon.open 等跳转外部链接后,返回不触发vue生命周期、mounted等相关事件-解决方法

做了一个列表的h5页面&#xff0c;通过点击列表跳转到外部链接&#xff0c;然后返回是回到原来页面状态&#xff0c;类似缓存。发现在ios端返回后&#xff0c;vue 的mounted() 、create()、路由监听等方法都不会执行。在安卓和pc 端都能正常调用。 解决方案&#xff1a;监听pa…...

股票预测和使用LSTM(长期-短期-记忆)的预测

一、说明 准确预测股市走势长期以来一直是投资者和交易员难以实现的目标。虽然多年来出现了无数的策略和模型&#xff0c;但有一种方法最近因其能够捕获历史数据中的复杂模式和依赖关系而获得了显着的关注&#xff1a;长短期记忆&#xff08;LSTM&#xff09;。利用深度学习的力…...

Docker搭建个人网盘、私有仓库

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘 [rootlocalhost ~]# docker pull mysql:5.6 [rootlocalhost ~]# docker pull owncloud [rootlocalhost ~]# docker run -itd --name mysql --env MYSQL_ROOT_PASSWORD123456 mysql:5.6 [rootlocalhost ~]# doc…...

3种获取OpenStreetMap数据的方法【OSM】

OpenStreetMap 是每个人都可以编辑的世界地图。 这意味着你可以纠正错误、添加新地点&#xff0c;甚至自己为地图做出贡献&#xff01; 这是一个社区驱动的项目&#xff0c;拥有数百万注册用户。 这是一个社区驱动的项目&#xff0c;旨在在开放许可下向每个人提供所有地理数据。…...

数据处理与统计分析——MySQL与SQL

这里写目录标题 1、初识数据库1.1、什么是数据库1.2、数据库分类1.3、相关概念1.4、MySQL及其安装1.5、基本命令 2、基本命令2.1、操作数据库2.2、数据库的列类型2.3、数据库的字段属性2.4 创建和删除数据库表2.5、数据库存储引擎2.6、修改数据库 3、MySQL数据管理3.1、外键 My…...

OpenCV之特征点匹配

特征点选取 特征点探测方法有goodFeaturesToTrack(),cornerHarris()和SURF()。一般使用goodFeaturesToTrack()就能获得很好的特征点。goodFeaturesToTrack()定义&#xff1a; void goodFeaturesToTrack( InputArray image, OutputArray corners,int maxCorners, double qualit…...

浅谈开关柜绝缘状态检测与故障诊断

贾丽丽 安科瑞电气股份有限公司 上海嘉定 201801 摘要:电力开关柜作为电力系统的关键设备广泛应用于输电配电网络&#xff0c;其运行可靠性直接影响着电力系统供电质量及安全性能。开关柜绝缘状态检测与故障诊断是及时维修、更换和预防绝缘故障的重要技术手段。在阐述开关柜绝…...

Mybatis 动态 SQL

动态 SQL 1. if 标签2. trim 标签3. where 标签4. set 标签5. foreach 标签 1. if 标签 if 标签有很多应用场景, 例如: 在用户进行注册是有些是必填项有些是选填项, 这就会导致前端传入的参数不固定如果还是将参数写死就很难处理, 这时就可以使用 if 标签进行判断 <insert …...

Android studio之 build.gradle配置

在使用Android studio创建项目会出现两个build.gradle&#xff1a; 一. Project项目级别的build.gradle &#xff08;1&#xff09;、buildscript{}闭包里是gradle脚本执行所需依赖&#xff0c;分别是对应的maven库和插件。 闭包下包含&#xff1a; 1、repositories闭包 2、d…...

【ElasticSearch】一键安装IK分词器无需其他操作

要注意的时下面命令中的es是我容器的名称&#xff0c;要换成你对应的es容器名 docker exec -it es /bin/bash # 进入容器 ./bin/elasticsearch-plugin install https://github.com/medcl/elasticsearch-analysis- ik/releases/download/v7.12.1/elasticsearch-analysis-ik-7.1…...

seo点击排名源码/茶叶seo网站推广与优化方案

state单一状态树的理解 将所有需要管理的信息放到一个store里管理 getters使用详解 可以理解为计算属性。假如我们state里保存的还有其他复杂状态 //共享状态 state: {counter: 100,student:[{id:110,name:why,age:18},{id:112,name:why2,age:28},{id:113,name:why3,age:38},…...

人工优化网站怎么做/影视剪辑培训机构排名

欢迎来到性能调优培训的第4个月。这个月全是关于SQL Server里的统计信息&#xff0c;还有它们如何帮助查询优化器生成足够好的执行计划。统计信息主要是被查询优化器用来估计查询返回的行数。它只是个估计&#xff0c;没别的。 统计信息概述 SQL Server使用在统计信息对象里称作…...

拟采用建站技术/软文写作营销

SmartRefreshHorizontal 项目地址&#xff1a;scwang90/SmartRefreshHorizontal 简介&#xff1a; 横向刷新、水平刷新、RefreshLayout、OverScroll&#xff0c;Horizontal&#xff0c;基于 SmartRefreshLayout 的水平智能刷新 更多&#xff1a;作者 提 Bug 官网 标…...

网站怎做/海外社交媒体营销

近年来&#xff0c;全球大数据储量呈现爆炸式增长&#xff0c;其中中国数据产生量增长最为迅速&#xff0c;平均每年增长速度比全球快3%&#xff0c;预计到2025年中国将成为全球最大的数据圈。中国数据圈将受到来自物联网设备信号、元数据、娱乐相关数据、云计算和边缘计算增长…...

哈尔滨城乡建设局网站/域名注册官网

由于工作实际需要&#xff0c;得给前线生产大量的盒子&#xff0c;涉及到里面的 用户、组、ssh-key、date、application、config.....等。 只好将其写成脚本&#xff0c;作为参考&#xff1a; 1.自动获取并配置网络IP地址&#xff1a; #!/bin/shsIPsudo ifconfig eth1 | grep i…...

asp网站开发模板/怎样在百度上发布免费广告

http://stor-age.zdnet.com.cn/stor-age/2011/1017/2061452.shtml 转载于:https://blog.51cto.com/quadro/704380...