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

让chatGPT给我写一个CSS，我太蠢了

news 2026/1/12 12:18:15

前言

CSS这东西，让AI写的确有点难度，毕竟它写出来的东西，没办法直接预览，这是其次。重要的是CSS这东西怎么描述，不好描述啊，比如我让他给我制作一个这样的效果出来，没办法描述，所以最终失败了！

在这里插入图片描述

需求

想要一个像上图一样的红色标签

第一次操作

提问

在这里插入图片描述

回答

以下是使用 CSS 画一个正方形，并在其右上角添加一个红色标签的示例代码：

HTML 代码：

<div class="square"><div class="tag">特价</div>
</div>

CSS 代码：

.square {position: relative;width: 200px;height: 200px;background-color: #ccc;
}.tag {position: absolute;top: -20px;right: -20px;width: 80px;height: 80px;background-color: red;color: white;text-align: center;line-height: 80px;font-size: 24px;transform: rotate(-45deg);
}

效果

在这里插入图片描述

第二次操作

提问

在这里插入图片描述

回答

html代码

<div class="square"><div class="tag">特价</div>
</div>

CSS 代码：

.square {position: relative;width: 200px;height: 200px;background-color: #ccc;
}.tag {position: absolute;top: -20px;right: -20px;width: 0;height: 0;border-top: 40px solid transparent;border-bottom: 40px solid transparent;border-left: 40px solid red;transform: rotate(45deg);
}

效果

在这里插入图片描述

第三次，我放弃了

由于无法直接预览它的代码，还要复制它的代码手动预览，所以我放弃了。（内心OS：看见它的代码，我找到思路了）我尽力的将它的代码组装，然后再简单优化，最终形成的效果（第一个图片），还是很棒的，也不用我去百度一点点找了。

最终代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.special {position: relative;width: 100px;height: 100px;background-color: rgb(49, 182, 37);color: white;text-align: center;line-height: 100px;}.trapezoid {position:absolute;top: 1px;left: 40px;width: 50px;height: 0;border-style: solid;border-width: 25px 25px 25px 25px;border-color: transparent transparent red transparent;transform: rotate(45deg);font-size: 14px;color: azure;text-align: center;line-height: 25px;}</style>
</head><body><div><div class="special">背景图</div><div class="trapezoid">打骨折</div></div>
</body></html>

相关文章：

让chatGPT给我写一个CSS，我太蠢了

前言 CSS这东西&#xff0c;让AI写的确有点难度&#xff0c;毕竟它写出来的东西&#xff0c;没办法直接预览&#xff0c;这是其次。重要的是CSS这东西怎么描述&#xff0c;不好描述啊&#xff0c;比如我让他给我制作一个这样的效果出来&#xff0c;没办法描述&#xff0c;所以…...

编程日记 2023/5/11 1:27:07

华为OD题目：分奖金

分奖金 知识点栈时间限制: 1s 空间限制: 256MB 限定语言: 不限 题目描述: 公司老板做了一笔大生意&#xff0c;想要给每位员工分配一些奖金&#xff0c;想通过游戏的方式来决定每个人分多少钱。 按照员工的工号顺序&#xff0c;每个人随机抽取一个数字。按照工号的顺序往后排列…...

编程日记 2023/5/11 1:22:06

【算法题】2401. 最长优雅子数组

插&#xff1a; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家一起学习鸭~~~ 题目&#xff1a; 给你一个由 正 整数组成的数组 num…...

编程日记 2023/5/11 1:17:03

【Vue】Vue快速入门

Vue快速入门 Vue.js的引入 要先有一个vue.js文件&#xff0c;可以在vue官网下载&#xff0c;将其复制到项目中并在html页面中进行引入&#xff1a; 在head标签内引入&#xff0c;src内是vue的路径 <!-- 引入vue.js--><script language"JavaScript" s…...

编程日记 2023/6/1 8:39:34

二本菜鸡，颓废两年的自我救赎

大家好&#xff0c;我是帅地。 随着校招的结束&#xff0c;帅地的星球里也有不少小伙伴前来报喜&#xff0c;今天这篇&#xff0c;是星球一个颓废两年同学的自我救赎之路&#xff0c;我觉得他的经历和很多人一样&#xff0c;前两年可能就颓废了&#xff0c;后面才后知后觉&…...

编程日记 2023/5/11 1:07:01

Spring boot 常用注解

SpringBootApplication&#xff1a;用于启动Spring Boot应用程序的主类上&#xff0c;组合了Configuration、EnableAutoConfiguration和ComponentScan三个注解。 RestController &#xff1a;修饰类&#xff0c;使用RestController注解的Controller中的方法默认返回值都会以JS…...

编程日记 2023/5/11 1:01:59

mysql从零开始（05）----锁

全局锁 使用 # 启用全局锁 flush tables with read lock # 释放全局锁 unlock tables开启全局锁后&#xff0c;整个数据库就处于只读状态了&#xff0c;这种状态下&#xff0c;对数据的增删改操作、对表结构的更改操作都会被阻塞。 另外&#xff0c;当会话断开&#xff0c;全…...

编程日记 2023/5/11 0:56:58

《Linux 内核设计与实现》03. 进程管理

文章目录 进程描述符及任务结构分配进程描述符进程描述符的存放进程状态设置当前进程状态进程上下文进程家族树 进程创建线程在 Linux 中的实现创建线程内核线程 进程终结删除进程描述符孤儿进程 进程描述符及任务结构 内核把进程存放在任务队列&#xff08;task list&#xf…...

编程日记 2023/5/11 0:51:57

深入探究HDFS：高可靠、高可扩展、高吞吐量的分布式文件系统【上进小菜猪大数据系列】

上进小菜猪&#xff0c;沈工大软件工程专业&#xff0c;爱好敲代码&#xff0c;持续输出干货。 引言 在当今数据时代&#xff0c;数据的存储和处理已经成为了各行各业的一个关键问题。尤其是在大数据领域&#xff0c;海量数据的存储和处理已经成为了一个不可避免的问题。为了应…...

编程日记 2023/5/11 0:46:56

GIMP制作艺术字技巧

GIMP下载官网 https://www.gimp.org/downloads/ 我使用的版本 2.10.32 字体下载 https://ziyouziti.com/index-index-all.html 下载解压之后会有otf、ttf等字体文件&#xff0c;需要拷贝到gimp当前用户目录 C:\Users\用户名\AppData\Roaming\GIMP\2.10\fonts GIMP绘制字…...

编程日记 2023/5/31 18:59:38

Redis 布隆过滤器总结

Redis 布隆过滤器总结 适用场景 大数据判断是否存在来实现去重&#xff1a;这就可以实现出上述的去重功能&#xff0c;如果你的服务器内存足够大的话&#xff0c;那么使用 HashMap 可能是一个不错的解决方案&#xff0c;理论上时间复杂度可以达到 O(1) 的级别&#xff0c;但是…...

编程日记 2023/5/11 0:36:53

云基础设施安全：7个保护敏感数据的最佳实践

导语&#xff1a;云端安全防护进行时&#xff01; 您的组织可能会利用云计算的实际优势&#xff1a;灵活性、快速部署、成本效益、可扩展性和存储容量。但是&#xff0c;您是否投入了足够的精力来确保云基础设施的网络安全&#xff1f; 您应该这样做&#xff0c;因为数据泄露、…...

编程日记 2023/5/11 0:31:52

centos7安装nginx

1.配置环境 1).gcc yum install -y gcc2).安装第三方库 pcre-devel yum install -y pcre pcre-devel3).安装第三方库 zlib yum install -y zlib zlib-devel2.下载安装包并解压 nginx官网下载&#xff1a;http://nginx.org/en/download.html 或者 使用wget命令进行下载 wg…...

编程日记 2023/5/11 0:26:51

PyQt5 基础篇（一）-- 安装与环境配置

1 PyQt5 图形界面开发工具 Qt 库是跨平台的 C 库的集合&#xff0c;是最强大的 GUI 库之一&#xff0c;可以实现高级 API 来访问桌面和移动系统的各种服务。PyQt5 是一套 Python 绑定 Digia QT5 应用的框架。PyQt5 实现了一个 Python模块集&#xff0c;有 620 个类&#xff0c;…...

编程日记 2023/5/11 0:21:50

Java—JDK8新特性—函数式接口【内含思维导图】

目录 3.函数式接口 思维导图 3.1 什么是函数式接口 3.2 functionalinterface注解 源码分析 3.3 Lambda表达式和函数式接口关系 3.4 使用函数式接口 3.5 内置函数式接口 四大核的函数式接口区别 3.5.1 Supplier 函数式接口源码分析 3.5.2 Supplier 函数式接口使用 3.…...

编程日记 2023/5/11 0:16:49

【MySQL】外键约束和外键策略

一、什么是外键约束&#xff1f; 外键约束&#xff08;FOREIGN KEY&#xff0c;缩写FK&#xff09;是用来实现数据库表的参照完整性的。外键约束可以使两张表紧密的结合起来&#xff0c;特别是针对修改或者删除的级联操作时&#xff0c;会保证数据的完整性。 外键是指表…...

编程日记 2023/5/11 0:11:48

3. SQL底层执行原理详解

一条SQL在MySQL中是如何执行的 1. MySQL的内部组件结构1.1 Server层1.2 Store层 2. 连接器3. 分析器4. 优化器5. 执行器6. bin-log归档 本文是按照自己的理解进行笔记总结&#xff0c;如有不正确的地方&#xff0c;还望大佬多多指点纠正&#xff0c;勿喷。 1. MySQL的内部组件结…...

编程日记 2023/5/11 0:06:47

Bus动态刷新

Bus动态刷新全局广播配置实现 启动 EurekaMain7001ConfigcenterMain3344ConfigclientMain3355ConfigclicntMain3366 运维工程师 修改Gitee上配置文件内容&#xff0c;增加版本号发送POST请求curl -X POST "http://localhost:3344/actuator/bus-refresh" —次发送…...

编程日记 2023/5/30 2:43:11

逆波兰式的写法

一、什么是波兰式&#xff0c;逆波兰式和中缀表达式 6 *(37) -2 将运算数放在数值中间的运算式叫做中缀表达式 - * 6 3 7 2 将运算数放在数值前间的运算式叫做前缀表达式 6 3 7 * 2 - 将运算数放在数值后间的运算式叫做后缀表达式 二、生成逆波兰表达式 6 *(37) -2 生成…...

编程日记 2023/5/10 23:56:45

Linux系统日志介绍

Linux系统日志都是放在“/var/log”目录下面&#xff0c;各个日志文件的功能&#xff1a; /var/log/messages — 包括整体系统信息&#xff0c;其中也包含系统启动期间的日志。此外&#xff0c;mail&#xff0c;cron&#xff0c;daemon&#xff0c;kern和auth等内容也记录在va…...

编程日记 2023/5/10 23:51:44

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/1/10 20:30:55

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/1/9 3:47:36

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/10 10:57:39

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/1/5 6:11:00

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/11/27 23:47:29

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2026/1/1 20:10:54

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/1/12 10:14:09