用HTML和CSS绘制佩奇：我不是佩奇
在这篇博客中，我将解析一个完全使用HTML和CSS绘制的佩奇(Pig)形象。这个项目展示了CSS的强大能力，仅用样式就能创造出复杂的图形，而不需要任何图片或JavaScript。
项目概述
这个名为"我不是佩奇"的项目是一个纯CSS绘制的卡通猪形象。整个图形由多个<div>元素组成，每个元素都通过精确的CSS定位和样式来构建猪的各个部分。
效果图展示：
结构分解
头部结构
- 主头部(
.pig_head) - 耳朵(
.ear_left,.ear_right) - 鼻子和鼻孔
- 眼睛(包括眼白、眼球和边框)
- 嘴巴(上中下三部分)
- 脸颊
身体结构
- 主体(
.pig_body_bottom) - 手部(左右各三部分)
- 脚部和鞋子
- 尾巴(多个部分组合)
装饰元素
- 阴影(
.pig_shadow)
整体源码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我不是佩奇</title><style type="text/css">div {position: absolute;transform-origin: left top;}
.pig_container {width: 800px;height: 800px;top: 0;left: 50px;
}.pig_head {width: 300px;height: 200px;top: 100px;left: 100px;border-radius: 95% 50% 50% 50%/ 87% 80% 68% 50%;border: 6px solid #ef96c2;background-color: #ffb3da;transform: rotate(30deg);z-index: 100;box-sizing: border-box;
}
.pig_head_white_left_bottom {width: 200px;height: 154px;bottom: -7px;left: -38px;background-color: #fff;box-sizing: border-box;
}
.pig_head_white_left_top {width: 200px;height: 66px;bottom: 84px;background-color: #ffb3da;box-sizing: border-box;top: 166px;left: 134px;transform: rotate(34deg);z-index: 103;
}
.left_eye, .right_eye, .face, .mouth {z-index: 104;
}
.pig_nose {width: 51px;height: 70px;top: 147px;left: 107px;border-radius: 72% 72% 72% 72%/ 72% 72% 72% 72%;border: 6px solid #ef96c2;background-color: #ffb3da;transform: rotate(36deg);z-index: 103;box-sizing: border-box;
}
.pig_nose_bottom {width: 88px;height: 13px;top: 209px;left: 84px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;border: 6px solid #ef96c2;background-color: #ffb3da;transform: rotate(35deg);z-index: 102;box-sizing: border-box;border-top-color: #ffb3da;
}
.pig_jaw {width: 97px;height: 104px;top: 249px;left: 141px;border-radius: 0% 0% 0% 76%/ 0% 0% 0% 74%;border: 6px solid #ef96c2;background-color: #ffb3da;transform: rotate(22deg);z-index: 100;box-sizing: border-box;border-top-color: #ffb3da;border-right-color: #ffb3da;
}
.pig_jaw_right {width: 13px;height: 6px;background-color: #ef96c2;top: 373px;left: 186px;transform: rotate(19deg);z-index: 100;
}
.left_eye_bg {width: 29px;height: 29px;top: 177px;left: 170px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #fff;background-color: #fff;z-index: 101;box-sizing: border-box;
}
.left_eye_ball {width: 10px;height: 10px;top: 181px;left: 171px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #000;background-color: #000;z-index: 101;box-sizing: border-box;
}
.left_eye_border {width: 34px;height: 34px;top: 174px;left: 166px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #ef96c2;background-color: transparent;z-index: 101;box-sizing: border-box;
}.right_eye_bg {width: 28px;height: 28px;top: 194px;left: 205px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #fff;background-color: #fff;z-index: 101;box-sizing: border-box;
}
.right_eye_ball {width: 10px;height: 10px;top: 199px;left: 208px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #000;background-color: #000;z-index: 101;box-sizing: border-box;
}
.right_eye_border {width: 35px;height: 37px;top: 191px;left: 202px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #ef96c2;background-color: transparent;z-index: 101;box-sizing: border-box;
}.mouth_bottom {width: 97px;height: 45px;top: 273px;left: 154px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;border: 6px solid #d44b81;background-color: #000;z-index: 101;box-sizing: border-box;transform: rotate(19deg);
}
.mouth_middle {width: 98px;height: 27px;top: 272px;left: 154px;border-radius: 0% 0% 50% 50%/ 0% 0% 100% 100%;border: 6px solid #d44b81;background-color: #ffb3da;z-index: 101;box-sizing: border-box;transform: rotate(19deg);border-top-color: #ffb3da;
}
.mouth_top {width: 135px;height: 66px;top: 231px;left: 149px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;background-color: #ffb3da;z-index: 101;transform: rotate(13deg);}
.face {width: 49px;height: 59px;top: 243px;left: 269px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;background-color: #ff96ce;transform: rotate(26deg);
}.nose_kong_left {width: 12px;height: 12px;top: 179px;left: 93px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;background-color: #da6c9b;z-index: 104;
}
.nose_kong_right {width: 12px;height: 12px;top: 182px;left: 109px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;background-color: #da6c9b;z-index: 104;
}.ear_left {width: 24px;height: 52px;top: 126px;left: 226px;border: 6px solid #ef96c2;border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;background-color: #ffb3da;z-index: 99;transform: rotate(18deg);
}
.ear_right {width: 24px;height: 52px;top: 150px;left: 280px;border: 6px solid #ef96c2;border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;background-color: #ffb3da;z-index: 99;transform: rotate(36deg);
}.pig_body_bottom {width: 215px;height: 197px;top: 305px;left: 108px;border: 6px solid #e33b32;border-radius: 50% 50% 50% 50%/ 100% 100% 0% 0%;background-color: #eb5b50;z-index: 99;
}.hand_left_middle {width: 78px;height: 12px;top: 432px;left: 63px;border-radius: 100% 100% 100% 17%/ 100% 90% 16% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(-35deg);
}
.hand_left_top {width: 28px;height: 9px;top: 415px;left: 63px;border-radius: 100% 100% 100% 35%/ 100% 90% 16% 90%;background-color: #ffbadf;z-index: 99;
}
.hand_left_bottom {width: 20px;height: 9px;top: 420px;left: 93px;border-radius: 60% 59% 65% 90%/ 100% 90% 89% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(98deg);
}.hand_right_middle {width: 79px;height: 11px;top: 374px;left: 309px;border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(28deg);
}
.hand_right_top {width: 28px;height: 10px;top: 397px;left: 350px;border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(-7deg);
}
.hand_right_bottom {width: 28px;height: 11px;top: 395px;left: 356px;border-radius: 100% 100% 62% 17%/ 99% 92% 90% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(69deg);
}
.left_foot {width: 11px;height: 52px;top: 507px;left: 175px;border-radius: 100% 100% 100% 100%/ 50% 50% 21% 20%;background-color: #ffbadf;z-index: 99;
}
.left_shoes {width: 51px;height: 14px;top: 553px;left: 138px;border-radius: 58% 187% 180% 50%/ 130% 123% 113% 100%;background-color: #000;z-index: 99;transform: rotate(0deg);
}
.right_foot {left: 268px;
}
.right_shoes {left: 230px;
}
.pig_shadow {width: 240px;height: 47px;top: 535px;left: 101px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;background-color: rgba(171, 171, 171, 0.7);transform: rotate(-1deg);
}
.tail_left {width: 19px;height: 8px;top: 472px;left: 330px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;transform: rotate(-9deg);background-color: #ffbadf;z-index: 99;
}
.tail_left_blank {width: 30px;height: 15px;top: 466px;left: 332px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;transform: rotate(-36deg);background-color: #fff;z-index: 99;
}
.tail_right {width: 21px;height: 5px;top: 451px;left: 343px;border-radius: 0% 0% 51% 50%/ 0% 0% 100% 100%;transform: rotate(31deg);background-color: #fff;z-index: 99;border: 8px solid #ffbadf;border-top-color: #fff;
}
.tail_blank {width: 36px;height: 21px;top: 437px;left: 351px;transform: rotate(34deg);background-color: #fff;z-index: 99;
}
.tail_middle {width: 7px;height: 11px;top: 450px;left: 336px;border: 8px solid #ffbadf;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;background-color: #fff;z-index: 99;
}
.tail_circle {width: 17px;height: 8px;top: 475px;left: 358px;border-radius: 36% 37% 62% 63%/ 99% 92% 90% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(-40deg);
}</style>
</head>
<body>
<h1 align="center">我不是佩奇</h1>
<div class="pig_container"><!-- 尾巴 --><div class="tail_left"></div><div class="tail_right"></div><div class="tail_blank"></div><div class="tail_middle"></div><div class="tail_circle"></div><!-- 底部阴影 --><div class="pig_shadow"></div><!-- 左脚 --><div class="left_foot"></div><div class="left_foot right_foot"></div><!-- 左鞋 --><div class="left_shoes"></div><div class="left_shoes right_shoes"></div><!-- 左手 --><div><div class="hand_left_top"></div><div class="hand_left_bottom"></div><div class="hand_left_middle"></div></div><!-- 身体 --><div class="pig_body_bottom"></div><!-- 右手 --><div><div class="hand_right_top"></div><div class="hand_right_bottom"></div><div class="hand_right_middle"></div></div><!-- 猪头 --><div><!-- 耳朵 --><div class="ear_left"></div><div class="ear_right"></div><div class="pig_head"><div class="pig_head_white_left_bottom"></div></div><div class="pig_head_white_left_top"></div><!-- 鼻子 --><div class="pig_nose"></div><!-- 下巴 --><div class="pig_jaw"></div><div class="pig_jaw_right"></div><div class="pig_nose_bottom"></div><!-- 鼻孔 --><div class="nose_kong_left"></div><div class="nose_kong_right"></div><!-- 左眼 --><div class="left_eye"><div class="left_eye_bg"></div><div class="left_eye_ball"></div><div class="left_eye_border"></div></div><!-- 右眼 --><div class="right_eye"><div class="right_eye_bg"></div><div class="right_eye_ball"></div><div class="right_eye_border"></div></div><!-- 嘴巴 --><div class="mouth"><div class="mouth_bottom"></div><div class="mouth_middle"></div><div class="mouth_top"></div></div><!-- 脸颊 --><div class="face"></div></div>
</div>
</body>
</html>总结
这个项目展示了CSS在图形创作中的强大能力。通过精心计算的位置、变形和层次控制，仅用CSS就创造出了一个生动的卡通形象。这种技术可以应用于：
- 图标设计
- 简单的游戏角色
- 品牌形象展示
- 网页装饰元素
虽然这种实现方式在性能上可能不如SVG高效，但它是一个很好的CSS练习，展示了CSS的可能性边界。
你可以通过调整各种CSS参数来修改猪的外观，创造属于自己的独特版本，快来试试吧！
相关文章：
用HTML和CSS绘制佩奇：我不是佩奇
在这篇博客中，我将解析一个完全使用HTML和CSS绘制的佩奇(Pig)形象。这个项目展示了CSS的强大能力，仅用样式就能创造出复杂的图形，而不需要任何图片或JavaScript。 项目概述 这个名为"我不是佩奇"的项目是一个纯CSS绘制的卡通猪形象…...
Qwen2.5-7B-Instruct FastApi 部署调用教程
1 环境准备 基础环境最低要求说明： 环境名称版本信息1Ubuntu22.04.4 LTSCudaV12.1.105Python3.12.4NVIDIA CorporationRTX 3090 首先 pip 换源加速下载并安装依赖包 # 升级pip python -m pip install --upgrade pip # 更换 pypi 源加速库的安装 pip config set g…...
潇洒浪： Dify 上传自定义文件去除内容校验 File validation failed for file: re.json
Dify上传文件 添加其他文件类型如 my.myselfsuffix 上传成功 执行报错 File validation failed for file: re.json 解决办法 Notepad 搜索dify源码 注释掉，重启容器 或者直接在容器中修改重启...
【力扣hot100题】（088）最长有效括号
这题目真是越做越难了。 但其实只是思路很难想到，一旦会了方法就很好做。 但问题就在方法太难想了…… 思路还是只要遍历一遍数组，维护动态规划数组记录截止至目前位置选取该元素的情况下有效括号的最大值。 光是知道这个还不够，看了答案…...
 对比)
XML、JSON 和 Protocol Buffers (protobuf) 对比
目录 1. XML (eXtensible Markup Language) 1）xml的特点： 2）xml的适用场景： 2. JSON (JavaScript Object Notation) 1）JSOM的特点： 2）JSON的适用场景： 3. Protocol Buffers (…...
C++ 入门四：类与对象 —— 面向对象编程的核心基石
一、类的定义 1. 类的基本形式 class 类名 { public: // 公有成员（类内外均可访问）数据类型 数据成员; // 公有数据成员数据类型 成员函数(参数列表); // 公有成员函数声明 protected: // 保护成员（类内和派生类可访问&…...
DeepSeek：穿透行业知识壁垒的搜索引擎攻防战
DeepSeek：穿透行业知识壁垒的搜索引擎攻防战 文 / 产业智能观察组（人机协同创作） 一、搜索引擎的"认知折叠"危机 2024年Q1数据显示，百度搜索结果前10页中，61.7%的内容存在"伪专业化"现象——看似…...
SQL 查询中涉及的表及其作用说明
SQL 查询中涉及的表及其作用说明： 涉及的数据库表 表名别名/用途关联关系dbo.s_orderSO（主表）存储订单主信息（订单号、日期、客户等）dbo.s_orderdetailSoD（订单明细）通过 billid SO.billid 关…...
数组 array
1、数组定义 是一种用于存储多个相同类型数据的存储模型。 2、数组格式 （1）数据类型[ ] 变量名（比较常见这种格式） 例如： int [ ] arr0，定义了一个int类型的数组，数组名是arr0； &am…...
Git 查看提交历史
Git作为最流行的版本控制工具，其提交历史管理是开发者日常工作的核心部分。无论是回溯代码变更、定位问题根源，还是进行版本回退，掌握Git提交历史的操作技巧都至关重要。本文将全面解析Git提交历史相关命令，助你成为版本管理高手&…...
电脑提示“找不到mfc140u.dll“的完整解决方案：从原因分析到彻底修复
当你启动某个软件或游戏时，突然遭遇"无法启动程序，因为计算机中丢失mfc140u.dll"的错误提示，这确实令人沮丧。mfc140u.dll是Microsoft Foundation Classes（MFC）库的重要组成部分，属于Visual C Re…...
windows安卓子系统wsa隐藏应用列表的安装激活使用
Windows 11 安卓子系统应用部署全攻略 windows安卓子系统wsa隐藏应用列表的安装激活使用|过检测核心前端 在 Windows 11 系统中，安卓子系统为用户带来了在电脑上运行安卓应用的便利。经过一系列的操作，我们已经完成了 Windows 11 安卓子系统的底层和前端…...
深入探索 PyTorch：回归与分类模型的全方位解析
深入探索 PyTorch：回归与分类模型的全方位解析 在当今数据驱动的时代，机器学习与深度学习技术正广泛应用于各个领域，助力我们从海量数据中挖掘有价值的信息。而 PyTorch 作为一款备受青睐的深度学习框架，为开发者们提供了简洁且高…...
案例分析：东华新径，拉动式生产的智造之路
目录 文章目录 目录南京东华智能转向系统有限公司是一家什么公司？背景知识：新能源汽车生产制造流程简介东华遇见了什么问题？东华希望如何解决？解决思路：从 “推动式生产” 到 “拉动式生产”，从 “冗余式思…...
【android bluetooth 框架分析 01】【关键线程 5】【bt_main_thread介绍】
1. 概述 system/stack/btu/btu_task.cc bt_main_thread 是 Android Bluetooth 协议栈中的核心线程，负责处理蓝牙协议栈中的大部分关键任务和事件。它相当于蓝牙协议栈的"大脑"，协调各种蓝牙功能的运行。 2. 重要性 bt_main_thread 的重要性…...
城市应急安防系统EasyCVR视频融合平台：如何实现多源视频资源高效汇聚与应急指挥协同
一、方案背景 1）项目背景 在当今数字化时代，随着信息技术的飞速发展，视频监控和应急指挥系统在公共安全、城市应急等领域的重要性日益凸显。尤其是在关键场所，高效的视频资源整合与传输能力对于应对突发公共事件、实现快速精准的…...
自动化测试常用函数
自动化测试常用函数 前言1. 元素的定位1.1 cssSelector1.2 xpath1.2.1 获取 HTML 页面所有的节点1.2.2 获取 HTML 页面指定的节点1.2.3 获取一个节点中的直接子节点1.2.4 获取一个节点的父节点1.2.5 实现节点属性的匹配1.2.6 使用指定索引的方式获取对应的节点内容 2. 操作测试…...
---摄像机)
OpengGL教程(七)---摄像机
本章参考官方教程：摄像机 本系列历史文 OpengGL教程(一)—OpenGL环境的配置(GLFW3,GLAD) OpengGL教程(二)—渲染一个简单的窗体 OpengGL教程(三)—使用VAO和VBO方式绘制三角形 OpengGL教程(四)—使用EBO方式绘制矩形 OpengGL教程(五)—纹理的应用 OpengGL教程(六)—…...
springboot禁用静态资源
使用 application.properties 在 application.properties 中添加如下配置： spring.web.resources.add-mappingsfalse使用 application.yml 在 application.yml 中添加如下配置： spring:web:resources:add-mappings: false配置解释 spring.web.resou…...
猫咪如厕检测与分类识别系统系列【二】多图上传及猫咪分类特征提取更新
前情提要 家里养了三只猫咪，其中一只布偶猫经常出入厕所。但因为平时忙于学业，没法时刻关注牠的行为。我知道猫咪的如厕频率和时长与健康状况密切相关，频繁如厕可能是泌尿问题，停留过久也可能是便秘或不适。为了更科学地了解牠的…...
ViewModel和AndroidViewModel的主要区别
ViewModel和AndroidViewModel的主要区别在于它们的继承关系、构造函数以及使用场景。 继承关系与构造函数： ViewModel：ViewModel是一个抽象类，位于androidx.lifecycle包中。它是所有ViewModel类的基类，构造函数较为…...
myeclise导入项目并运行
1、把项目复制到myeclise工作目录 2、导入项目：将项目导入到myeclise工作目录 3、配置jre 4、把项目放到tomcat 5、运行项目 配置数据库后运行...
XSS 防御转义规则笔记
一、转义规则概述 核心目标：防止用户输入被浏览器解析为可执行代码，确保输入始终被视为数据而非代码。 关键策略：根据数据嵌入的上下文环境（HTML、JavaScript、CSS 等），对特殊字符进行转义或编码。 二、不…...
【2025年认证杯数学中国数学建模网络挑战赛】C题 完整论文 全三问模型+求解+代码
目录 【2025年认证杯数学建模挑战赛】C题数据预处理与全三问求解一、问题重述二、模型假设与符号说明2.1 模型基本假设2.2 符号说明 三、数据预处理及分析四、问题一五、问题二5.1 基于互相关函数的反应延时识别5.2 反应过程延时结果分析5.3 基于BP神经网络的不合格产物预测5.4…...
iOS应用开发指南
开发一款iOS应用是一个系统化的过程，涵盖从环境搭建、界面设计、编码实现到测试发布的各个环节。以下是一份面向初学者的iOS移动应用开发指南，帮助你从零开始构建自己的App。 一、准备工作：开发环境与工具 必备设备 Mac电脑：iO…...
小刚说C语言刷题——第21讲 一维数组
在日常生活中，我们经常输入一组数据。例如输入一个班30名学生的语文成绩，或者输入一组商品的价格。这个时候，我们如何输入一组类型相同的数据呢？这里我们就要用到数组。 1.数组的概念 所谓数组就是一组相同类型数据的集合。数组中…...
苍穹外卖2
根据id查询员工 调用顺序：Controller—>Service—>ServiceImpl—>Mapper—>xml 1.controller层一个tab秒了（ai生成） 由于result泛型中希望返回一个employee对象，所以定义一个employee来接受Service的getbyid方法,在…...
C语言之双层for循环
一、第一小题引入 循环次数用 外层循环内层循环 这一题即是: 3412(次) 外循环一次 内循环一趟(可以形象理解为 时针和 分针) 运行结果如下: 一、第二小题引入 请阅读下列代码: 执行程序.程序执行的循环次数为多少? 答案:20次 这一题 外层循环 从5开始到i结束 中间的i是…...
第8课：多智能体系统评估与迭代
多智能体系统评估与迭代：从指标设计到持续优化的全流程指南 一、引言：当智能体协作出现“磨合期”：评估与迭代为何是必经之路？ 在多智能体系统（MAS）的实际运行中，即使架构设计合理，也可能面临“协作效率下降”“资源浪费”等问题： 任务完成率突然从95%降至70%，却找…...
HTTP：三.HTTP报文
报文流 http报文是以一种类似的流的方式来发送数据的，所以报文流讲述了http报文的一些客观状态，相关术语：流入、流出形容事务处理。http报文任何时候是从上游向下游流入的！其中进过的节点既可能是上游，有可能是下游，如果从某个节点流出，那么相对于此节点流入的那个节点…...
.NET MAUI教程1-入门并发布apk包安装到真机
由于本人水平有限，如有写得不对的地方往指出，由于是使用公司的电脑，电脑的操作系统是英文的，没有权限修改，所以本文截图中的vs是英文版的 以发布android为例进行讲解 测试环境： window 11 vs2022 步骤如…...
你所拨打的电话是空号？手机状态查询API
一、引言 在当今数字化营销时代，电话销售仍然是许多企业获取客户的重要手段之一。然而，电销过程中常常遇到空号、风险号和沉默号等问题，这不仅降低了营销效率，还增加了企业的运营成本。例如，频繁拨打空号浪费了大量时…...
C++顺序栈的实现
顺序栈详细介绍 定义与特点 顺序栈（Sequential Stack）是一种基于数组实现的栈结构，利用数组的连续内存空间存储元素，遵循后进先出（LIFO）原则。其核心特点包括： 固定或动态容量：初始…...
element-ui 中的 select 组件如何 remote-method 函数中传参
在 select 组件中我们使用其 change 事件可以传参，请查看：el-select 中change 事件传参问题。 在我们使用 select 组件的远程搜索时，我们如何给 remote-method 这个方法添加自定义参数呢？ 代码实现如下： <el-sel…...
浅谈解释型语言的运用
不得不说，程序不需要编译，程序在运行时才翻译成机器语言，每执行一次，都要翻译一次，因此效率比较低。在运行程序时才翻译，专门有一个解释器去进行翻译，每个语句都是执行的时候才翻译，…...
云手机哪个平台最好用？云手机性能、服务、技术等多维度测评分析
在云手机市场日渐繁荣的当下，面对琳琅满目的云手机平台，用户往往难以抉择云手机哪个平台最好。下面我们就从从性能、价格等多维度分析，云手机平台哪家强，队国内好用的云手机平台进行排行盘点。 好用的云手机平台排行盘点 第一&…...
idea版的cursor：Windsurf Wave 7
在企业环境中，Visual Studio Code和JetBrains系列是最常用的开发工具，覆盖了全球绝大多数开发者。这两类IDE各有优势，但JetBrains系列凭借其针对特定语言和企业场景的深度优化，使得用户很难轻易更换工具。 虽然Windsurf编辑器是基…...
【IDEA】创建 SpringBoot 项目连接 MySQL
前言 IntelliJ IDEA 作为一款专业的 Java 开发工具，在创建和管理 Spring Boot 项目方面具有显著优势。它深度集成了 Spring Boot 的开发流程，从项目初始化到最终部署都提供了高效的支持。IDEA 内置的 Spring Initializr 工具让项目创建变得极其简单&…...
使用 IntelliJ IDEA 进行远程调试
1. 前言 今天线上出现了个 Bug ，而且比较坑的是涉及到k8s环境相关的东西不能线下调试。传统方式是在代码中各种的日志 log 埋点然后重新部署进行调试，再根据 log 中的信息进行分析。如果你的 log 埋点不合理，就要不停的修改代码、不停的打包…...
Linux操作系统--进程状态
目录 1.运行、阻塞、挂起 1.1运行 1.2阻塞 1.3挂起(了解一下即可，基本不会出现这种情况) 2.进程状态 2.1进程状态查看 2.2 Z-僵尸进程 2.3孤儿进程 1.运行、阻塞、挂起 1.1运行 运行状态： 进程正在占用CPU执行指令。此时进程对系统资源ÿ…...
【端到端】端到端自动驾驶依赖Occupancy进行运动规划？还是可以具有生成局部地图来规划？
端到端自动驾驶系统的架构设计，目前主流做法实际上已经出现两种路径，我们来拆解一下： 🚘 一、Occupancy 是否用于运动规划？ 一种趋势是使用 Occupancy 表示作为 中间表征，用于： 运动规划&…...
HarmonyOS-ArkUIV2装饰器-@Param：组件外部输入
上文我们了解了@Local装饰器 ，讲明了Local装饰器不允许外部传入值对其进行初始化。详见： HarmonyOS-ArkUI V2装饰器@Local装饰器：组件内部状态-CSDN博客。 但总有场景是需要外部组件传值过来，然后本组件接收这个值这种场景的。而且很多情况下，一个状态变量的作用范围会是…...
报错 ImportError: cannot import name ‘packaging‘ from ‘pkg_resources‘
解决方法一 （推荐） 先检查setuptools是否为70.0.0版本 pip list | grep setuptools再降低版本 python -m pip install setuptools69.5.1或者： 解决方法二 上述的报错信息表明：在安装 mmcv 时出现了 pkg_resources 模块的问题…...
Ollama调用多GPU实现负载均衡
文章目录 📊 背景说明🛠️ 修改 systemd 服务配置1. 配置文件路径2. 编辑服务文件2. 重新加载配置并重启服务3. 验证配置是否成功 📈 应用效果示例1. 调用单个70b模型2. 调用多个模型（70b和32b模型） 总结📌…...
Next.js 简介
Next.js 是一个由 Vercel 开发的基于 React 的 Web 开发框架，旨在简化 React 应用的开发流程，提供更好的性能和开发体验。 🌟 Next.js 的核心特点 1. 文件系统路由（File-system Routing） 在 pages/ 目录中创建文件就…...
使用Apache POI（Java）创建docx文档和表格
1、引入poi 依赖组件 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-scratchpad</artifactId><version>4.0.0</version> </dependency> <dependency><groupId>org.apache.poi</groupId>&…...
Dynamics365 ExportPdfTemplateExportWordTemplate两个Action调用的body构造
这两天在用ExportPdfTemplate做pdf导出功能时，遇到了如下问题InnerException : Microsoft.OData.ODataException: An unexpected StartArray node was found when reading from the JSON reader. A PrimitiveValue node was expected. 我的场景是使用power automate…...
《算法笔记》3.3小节——入门模拟-＞图形输出
1036 跟奥巴马一起编程 #include <iostream> #include <cmath> using namespace std;int main() {int n,m;char c;cin>>n>>c;for (int i 0; i < n; i) {cout<<c;}cout<<endl;m round(1.0*n/2)-2;//round里面不能直接写n/2，…...
iOS 上的内存管理是如何处理的？
iOS主要通过自动引用计数（ARC）和内存管理模型来处理内存。以下是对这两者的详细介绍以及在实际工作中的应用场景： 1. 自动引用计数（ARC） ARC是iOS和macOS中的内存管理机制。它能自动跟踪和管理应用程序的内存使用情况…...
河北工程大学e2e平台，python
题目，选择题包100分！ 题目，选择题包100分！ 题目，选择题包100分！ 联系🛰：18039589633...