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

CSS绘制气泡对话框样式(有边框)

1、效果图

在这里插入图片描述

2、难点和思路

难点:上面那个带边框的小三角不好实现
思路:画两个不同大小的div,使其基本重叠(两个大小不同,不完全重叠,让红色的露出一点边边),让白色div放到最上层(设置z-index)

3、代码实现

<p class="pSanStyle"><p class="pSanStyleInner"></p></p><div class="divStyle"><p style="padding: 10px 0 0 10px; font-weight: bold">项目</p><hr style="width: 240px" /><a-row><a-col :span="7" style="border-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px">项目名称</a-col><a-col :span="7" style="border-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px">项目名称</a-col><a-col :span="7" style="margin: 5px 0 5px 5px">项目名称</a-col></a-row></div>
.pSanStyle {width: 0;height: 0;position: relative;border: 10px solid transparent;border-color:  transparent transparent red  transparent ;margin-left: 50px;}.pSanStyleInner{width: 0;height: 0;border: 12px solid transparent;border-color:  transparent transparent white  transparent ;position: absolute;margin-left: -11.5px;margin-top: -10px;z-index: 21;}.divStyle {position: absolute;width: 260px;height: 150px;margin-top: 20px;background-color: white;padding: 10px;border: 1px solid red;}

相关文章:

CSS绘制气泡对话框样式(有边框)

1、效果图 2、难点和思路 难点&#xff1a;上面那个带边框的小三角不好实现 思路&#xff1a;画两个不同大小的div&#xff0c;使其基本重叠&#xff08;两个大小不同&#xff0c;不完全重叠&#xff0c;让红色的露出一点边边&#xff09;&#xff0c;让白色div放到最上层&…...

12款 Macmini A1347 跑 Stable Diffusion,20多分钟一张图

设备 2012款 Macmini A1347 12款 mini A1347 跑 Stable Diffusion 要20多分钟一张图 来欣赏一下20分钟画出来的图片 a black and white cat 环境&#xff1a;...

流量控制和拥塞控制的原理和区别

文章目录先介绍下重传机制和滑动窗口超时重传快速重传SACK方法Duplicate SACK滑动窗口发送方缓存窗口接收方缓存窗口流量控制小结拥塞控制慢开始算法拥塞避免算法快重传快恢复先介绍下重传机制和滑动窗口 超时重传 重传机制的其中一个方式&#xff0c;就是发送数据时&#xf…...

金融机构断卡行动中外部数据

“断卡行动”&#xff0c;近几年逐渐走入大众视野&#xff0c;是国家在从根源上整治网络及金融犯罪层面的重大举措。相信很多朋友在日常生活中已经有所体会了&#xff0c;比如我们在办理电话卡及银行卡的时候要经过很多审核机制&#xff0c;同时发卡后还会限制卡片的一些转账等…...

携程总监的单元测试是怎么样写的?

大家都知道&#xff0c;开发软件的时候为代码编写单元测试是很好的。但实际上&#xff0c;光有测试还不够&#xff0c;还要编写好的测试&#xff0c;这同样重要。 要做到这一点&#xff0c;考虑遵循一些固执的原则&#xff0c;对测试代码给予一些关爱&#xff1a; 1. 保持测试…...

算法每日一题:P2089 烤鸡 -DFS练习

&#x1f61a;一个不甘平凡的普通人&#xff0c;日更算法学习和打卡&#xff0c;期待您的关注和认可&#xff0c;陪您一起学习打卡&#xff01;&#xff01;&#xff01;&#x1f618;&#x1f618;&#x1f618; &#x1f917;专栏&#xff1a;每日算法学习 &#x1f4ac;个人…...

Spring中的循环依赖是什么?如何解决它?

循环依赖是指两个或多个Bean之间相互依赖&#xff0c;导致它们无法被正确地初始化。在Spring中&#xff0c;当两个或多个Bean之间存在循环依赖时&#xff0c;Spring容器无法决定哪个Bean应该先初始化&#xff0c;因此会抛出BeanCurrentlyInCreationException异常&#xff0c;从…...

不良事件报告系统源码,PHP医院安全(不良)事件报告系统源码,在大型医院稳定运行多年

PHP医院安全&#xff08;不良&#xff09;事件报告系统源码&#xff0c;不良事件系统源码&#xff0c;有演示&#xff0c;在大型医院稳定运行多年。 系统技术说明 技术架构&#xff1a;前后端分离&#xff0c;仓储模式 开发语言&#xff1a;PHP 开发工具&#xff1a;VSco…...

MySQL 查询常用操作(3)——排序 order by

MySQL中常用的查询操作&#xff0c;首先是能直接从表中直接取出数据&#xff0c;接着能对查询结果做一些简单的处理&#xff0c;比如去重等&#xff0c;然后是根据条件查询数据&#xff0c;包括精准查询、模糊查询以及按照数据的某个范围或者指定多个指标进行查询&#xff0c;值…...

Android Jetpack 从使用到源码深耕【数据库注解Room 从实践到原理 】(二)

上文,我们通过一个简单的sqlite应用实例,引入了Room,知道了Room使用的便捷和好处。然后用Room的方式,重新实现了应用实例中的场景,在这个过程中,我们结合自己已有的知识体系,从使用代码入手,对Room的实现原理,进行了猜想和简单的验证。 Room实现原理,是否真如我们猜想…...

传统企业如何实现数字化转型?

近年来&#xff0c;围绕新产品新模式新业态&#xff0c;国家重点部署了7个方向&#xff0c;包括数字化管理、平台化设计、智能化生产、网络化协同、个性化定制、服务化延伸、新型智能产品等&#xff0c;均为市场价值大、发展潜力深、示范效应强的代表性、引领性领域。 因此&am…...

Linux修改密码报错Authentication token manipulation error的终极解决方法

文章目录报错说明解决思路流程排查特殊权限有没有上锁查看根目录和关闭selinux/etc/pam.d/passwd文件/etc/pam.d/system-auth文件终极办法&#xff0c;手动定义密码passwd: Have exhausted maximum number of retries for servic、ssh用普通用户登录输入密码正确但是登录时却提…...

ROS实践06 自定义消息类型

文章目录运行环境&#xff1a;思路&#xff1a;1.1 定义.msg文件1)功能包下新建 msg 目录&#xff0c;添加文件 Person.msg2)修改package.xml3)修改CMakeLists.txt2.1 自定义消息调用(C)1&#xff09;编译后修改includePath2&#xff09;发布方实现2.1修改CMakeLists.txt2.3运行…...

《剑指offer》——从尾到头打印链表

首先&#xff0c;拿到题之后&#xff0c;我们还是先从题目入手&#xff0c;只有掌握题干的意思&#xff0c;才能进行接下来的解题操作。 示例1 输入 : {1,2,3} 返回值&#xff1a;[3,2,1] 示例2 输入 &#xff1a;{67,0,24,58} 返回值&#xff1a;[58,24,0,67] 解题方法…...

Javaweb基础配置模板(mybatis+javaweb)

1.大纲规划图 本配置涉及的技术:mybatis,javaweb,json转换&#xff0c;分页查询等 2.导入相关的配置文件pom.xml 2.1 依赖文件 <dependencies> <!-- 测试依赖--><dependency><groupId>junit</groupId><artifactId>junit</artifact…...

物联网 JS 前端框架开发 - 执行 js 程序

前言 此篇文章主要讲解如何在物联网操作系统OneOS上运行高级语言JS脚本程序。想想还是有点意思的&#xff0c;毕竟在IOT设备上&#xff0c;我们的固有想法是&#xff0c;他们性能很羸弱&#xff0c;可能就跑跑一些简单的C应用程序&#xff0c;没想到已经可以运行高级语言JS脚本…...

区块链概论

目录 1.概述 2.密码学原理 2.1.hash函数 2.2.签名 3.数据结构 3.1.区块结构 3.2.hash pointer 3.3.merkle tree 3.3.1.概述 3.3.2.证明数据存在 3.3.3.证明数据不存在 4.比特币的共识协议 4.1.概述 4.2.验证有效性 4.2.1.验证交易有效性 4.2.2.验证节点有效性 …...

MAC地址表安全

4.1.2MAC地址表安全 MAC地址表项类型包括:动态MAC地址表项:由接口通过报文中的源MAC地址学习获得,表项可老化。在系统复位、接口板热插拔或接口板复位后,动态表项会丢失。静态MAC地址表项:由用户手工配置并下发到各接口板,表项不老化。在系统复位、接口板热插拔或接口板复…...

处理CSV(python)

处理CSV&#xff08;python&#xff09;简介1. CSV和Python简介2. 文章内容简介一、用csv模块读取和写入CSV文件1. CSV模块2. 示例二、用pandas库读取和写入CSV文件1. pandas2. 示例三、处理CSV文件中的特殊情况1. 特殊情况及处理方法2. 示例简介 1. CSV和Python简介 CSV是一…...

【云原生】Kubernetes(k8s)之容器的探测

Kubernetes&#xff08;k8s&#xff09;之容器的探测一、探测类型及使用场景1.1、startupProbe&#xff08;启动探测&#xff09;1.2、readinessProbe&#xff08;就绪探测&#xff09;1.3、livenessProbe&#xff08;存活探测&#xff09;二、检查机制三、探测结果四、容器探测…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...