当前位置: 首页 > 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;二、检查机制三、探测结果四、容器探测…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

算术操作符与类型转换:从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

针对药品仓库的效期管理问题,如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...