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

3分钟，学会了一个调试CSS的小妙招

news 2026/3/27 7:20:24

Ⅰ. 作用

  • 用于调试CSS , 比控制台添更加方便，不需要寻找 ；
  • 边添加样式，边可以查看效果，适合初学者对CSS 的理解和学习；
    在这里插入图片描述

在这里插入图片描述

Ⅱ. 快速实现（两边）

① 显示这个样式眶

  • 给 head 和 style 标签添加一个样式 display:block；
  • 这样这个样式就会以 块级元素 显示 ；
<head style="display:block"><meta charset="UTF-8"><title>Document</title>
</head>
<style  style="display:block;">
.box{width: 100px;height: 100px;background: red;border-radius: 50%;}
</style>
  • 效果如下 👇

在这里插入图片描述

  • 这时的 「样式文本」 ，没有换行 也 不可以编辑 ；

② 让样式眶可编辑

  • 我们需要先来理解 contenteditable 这个属性； 👇

  • contenteditable : 是一个 「枚举属性」 ，表示元素是否可被 「用户编辑」 ；

  • 这里我们把它加到 <style> 标签上 ，让展示出来的盒子可以编辑；

、、、、、省略其他
<style style="display:block;" contenteditable>.box{width: 100px;height: 100px;background: red;border-radius: 50%;}
</style>
  • 这时编辑的内容，默认加载的时候 还没换行，我们添加些样式；👇
<style style="display:block;white-space: pre;background:orange;color:purple"contenteditable
>.box{width: 100px;height: 100px;background: red;border-radius: 50%;}
</style>

这样我们就完成啦 👇
在这里插入图片描述

③ 最终代码 👇

  • 是不是看起来非常简单
<!DOCTYPE html>
<html lang="en">
<head style="display:block"><meta charset="UTF-8"><title>Document</title>
</head>
<style style="display:block;white-space: pre;background:orange;color:purple" contenteditable
>.box {width: 100px;height: 100px;background: red;border-radius: 50%;}
</style><body><div class="box"></div>
</body>
</html>

在这里插入图片描述

相关文章：

3分钟，学会了一个调试CSS的小妙招

Ⅰ. 作用 用于调试CSS , 比控制台添更加方便&#xff0c;不需要寻找 &#xff1b;边添加样式&#xff0c;边可以查看效果&#xff0c;适合初学者对CSS 的理解和学习&#xff1b; Ⅱ. 快速实现&#xff08;两边&#xff09; ① 显示这个样式眶 给 head 和 style 标签添加一个…...

编程日记 2023/2/12 18:25:15

【项目精选】基于jsp的健身俱乐部会员系统

点击下载源码 社会可行性 随着社会的发展和计算机技术的进步&#xff0c;人类越来越依赖于信息化的管理系统&#xff0c;这种系统能更加方便的获得信息以及处理信息。人们都改变了过去的思维&#xff0c;开始走向了互联网的时代&#xff0c;在 可行性小结 本章在技术可行性上…...

编程日记 2023/2/12 18:24:01

java注解

1. Java注解(Annotation) 2. Java注解分类 3. JDK基本注解 4. JDK元注解 5. 注解分类 6. 自定义注解开发 7. 提取Annotation信息 8. 注解处理器 9. 动态注解处理器(spring aop方式) 1. Java注解(Annotation) Java注解是附加在代码中的一些元信息&#xff0c;用于…...

编程日记 2023/2/12 18:21:34

移动测试相关

一、环境搭建 准备工作&#xff1a; &#xff08;python、pycharm安装配置好&#xff09; 1、Java SDK 安装配置 Java Downloads | Oracle 下载安装后配置系统环境变量&#xff1a;JAVA_HOME&#xff08;jdk根目录路径&#xff09;和path&#xff08;jdk根目录下的bin目录路径…...

编程日记 2023/2/12 18:20:20

SIGIR22：User-controllable Recommendation Against Filter Bubbles

User-controllable Recommendation Against Filter Bubbles 摘要 推荐系统经常面临过滤气泡的问题&#xff1a;过度推荐基于用户特征以及历史交互的同质化项目。过滤气泡将会随着反馈循环增长&#xff0c;缩小了用户兴趣。现有的工作通常通过纳入诸如多样性和公平性等准确性之…...

编程日记 2023/2/12 18:17:55

Python中的进程线程

文章目录前言多进程与多线程基本概念多进程multiprocessing 类对象进程池subprocess模块进程间通信多线程threading实现线程操作线程共享所有变量线程锁参考资料前言 又花了点时间学习了一下Python中的多线程与多进程的知识点&#xff0c;梳理一下供复习参考 多进程与多线程 …...

编程日记 2023/2/12 18:16:36

python(8):使用conda update更新conda后，anaconda所有环境崩溃----问题没有解决，不要轻易更新conda

文章目录0. 教训1. 问题:使用conda update更新conda后&#xff0c;anaconda所有环境崩溃1.1 问题描述1.2 我搜索到的全网最相关的问题----也没有解决3 尝试流程记录3.1 重新安装pip3.2 解决anaconda编译问题----没成功0. 教训 (1) 不要轻易使用conda update更新conda----我遇到…...

编程日记 2023/2/12 18:15:25

c++11 标准模板（STL）（std::multimap）（四）

定义于头文件 <map> template< class Key, class T, class Compare std::less<Key>, class Allocator std::allocator<std::pair<const Key, T> > > class multimap;(1)namespace pmr { template <class Key, class T…...

编程日记 2023/2/12 18:14:12

乐观锁及悲观锁

目录 1.乐观锁 (1).定义 (2).大体流程 (3).实现 (4).总结 2.悲观锁 (1).定义 (2).大体流程 (3).实现 (4).缺点 (5).总结 1.乐观锁 (1).定义 乐观锁在操作数据时非常乐观&#xff0c;认为别的线程不会同时修改数据所以不会上锁&#xff0c;但是在更新的时候会判断一…...

编程日记 2023/2/12 18:12:59

常见的锁策略

注意: 接下来讲解的锁策略不仅仅是局限于 Java . 任何和 "锁" 相关的话题, 都可能会涉及到以下内容. 这些特性主要是给锁的实现者来参考的.普通的程序猿也需要了解一些, 对于合理的使用锁也是有很大帮助的. 1.乐观锁 vs 悲观锁 悲观锁: &#xff08;认为出现锁冲…...

编程日记 2023/2/12 18:11:46

springboot学习(八十) springboot中使用Log4j2记录分布式链路日志

在分布式环境中一般统一收集日志&#xff0c;但是在并发大时不好定位问题&#xff0c;大量的日志导致无法找出日志的链路关系。 可以为每一个请求分配一个traceId&#xff0c;记录日志时&#xff0c;记录此traceId&#xff0c;从网关开始&#xff0c;依次将traceId记录到请求头…...

编程日记 2023/2/12 18:10:28

10种ADC软件滤波方法及程序

10种ADC软件滤波方法及程序一、10种ADC软件滤波方法1、限幅滤波法&#xff08;又称程序判断滤波法&#xff09;2、中位值滤波法3、算术平均滤波法4、递推平均滤波法&#xff08;又称滑动平均滤波法&#xff09;5、中位值平均滤波法&#xff08;又称防脉冲干扰平均滤波法&#x…...

编程日记 2023/2/12 18:09:14

第五章：Windows server加域

加入AD域&#xff1a;教学视频&#xff1a;https://www.bilibili.com/video/BV1xM4y1D7oL/?spm_id_from333.999.0.0首先我们选择一个干净的&#xff0c;也就是新建的没动过的Windows server虚拟机。我们将DNS改成域的ip地址&#xff0c;还要保证它们之间能ping的通&#xff0c…...

编程日记 2023/2/12 18:07:59

Elasticsearch：获取 nested 类型数组中的所有元素

在我之前的文章 “Elasticsearch: object 及 nested 数据类型” 对 nested 数据类型做了一个比较详细的介绍。在实际使用中&#xff0c;你在构建查询时肯定会遇到一些问题。根据官方文档介绍&#xff0c;nested 类型字段在隐藏数组中索引其每个项目&#xff0c;这允许独立于索引…...

编程日记 2023/2/12 18:06:50

English Learning - Day53 作业打卡 2023.2.7 周二

English Learning - Day53 作业打卡 2023.2.7 周二引言1. 我必须承认&#xff0c;我之前学习没你用功。have to VS must2. 这跟我想得一样简单。3. 生活并不像它看上去那么顺风顺水&#xff0c;但也不会像我们想象得那么难。Look VS seem4. 你比去年高多了。5. 你关心你的工作胜…...

编程日记 2023/2/12 18:05:41

SpringMVC--注解配置SpringMVC、SpringMVC执行流程

注解配置SpringMVC 使用配置类和注解代替web.xml和SpringMVC配置文件的功能 创建初始化类&#xff0c;代替web.xml 在Servlet3.0环境中&#xff0c;容器会在类路径中查找实现javax.servlet.ServletContainerInitializer接口的类&#xff0c; 如果找到的话就用它来配置Servle…...

编程日记 2023/2/12 18:04:30

JavaScript中数组常用的方法

文章目录前言常用数组方法1、 join( )2、push&#xff08;&#xff09;与 pop&#xff08;&#xff09;3、shift&#xff08;&#xff09;与 unshift&#xff08;&#xff09;4、sort&#xff08;&#xff09;5、reverse&#xff08;&#xff09;6、slice&#xff08;&#xff…...

编程日记 2023/2/12 18:03:21

ModuleNotFoundError: No module named ‘pip‘

项目场景&#xff1a;pip 错误 Traceback (most recent call last): File "E:\KaiFa\Python\Python38\lib\runpy.py", line 194, in _run_module_as_main return _run_code(code, main_globals, None, File "E:\KaiFa\Python\Python38\lib\runpy.py&qu…...

编程日记 2023/2/12 18:02:10

ROS2 入门应用 发布和订阅（C++）

ROS2 入门应用 发布和订阅&#xff08;C&#xff09;1. 创建功能包2. 创建源文件2.1. 话题发布2.2. 话题订阅3. 添加依赖关系4. 添加编译信息4.1. 添加搜索库4.2. 增加可执行文件4.3. 增加可执行文件位置5. 编译和运行1. 创建功能包 在《ROS2 入门应用 工作空间》中已创建和加…...

编程日记 2023/2/12 18:00:54

XSS漏洞,通过XSS实现网页挂马

**今天讲下通过XSS实现网页挂马~*&#xff0c;目的是了解安全方面知识&#xff0c;提升生活网络中辨别度 原理&#xff1a; 实验分为两部分&#xff1a; 1、通过Kali linux&#xff0c;利用MS14_064漏洞&#xff0c;制作一个木马服务器。存在该漏洞的用户一旦通过浏览器访问木…...

编程日记 2023/2/12 17:59:45

免环境配置：Qwen-Image定制镜像让4090D显卡快速跑通视觉语言模型

免环境配置&#xff1a;Qwen-Image定制镜像让4090D显卡快速跑通视觉语言模型 1. 引言 1.1 视觉语言模型的应用价值 在当今AI技术快速发展的背景下&#xff0c;视觉语言模型(VLM)已成为连接计算机视觉与自然语言处理的桥梁。这类模型能够理解图像内容并生成相关文本描述&…...

编程新知 2026/3/27 7:18:12

Keil5主题配色进阶：不只是好看，更要好用！详解如何区分函数、变量、宏定义的颜色

Keil5主题配色进阶&#xff1a;不只是好看&#xff0c;更要好用&#xff01;详解如何区分函数、变量、宏定义的颜色 作为一名嵌入式开发者&#xff0c;每天面对Keil5的默认编辑器界面&#xff0c;你是否也感到视觉疲劳&#xff1f;那些单调的配色不仅影响编码心情&#xff0c;更…...

编程新知 2026/3/27 7:01:26

如何用PPI网络community分析发现潜在药物靶点？微生信可视化保姆教程

从PPI网络到药物靶点&#xff1a;基于Community分析的生物标记物发现全流程 在生物医学研究的浩瀚海洋中&#xff0c;蛋白质-蛋白质相互作用(PPI)网络犹如一张精密的城市交通图&#xff0c;而community分析则帮助我们识别出其中的"功能街区"。想象一下&#xff0c;当…...

编程新知 2026/3/27 6:39:18

Blazor组件测试工具：BootstrapBlazor测试库完整指南

Blazor组件测试工具&#xff1a;BootstrapBlazor测试库完整指南 【免费下载链接】BootstrapBlazor 项目地址: https://gitcode.com/gh_mirrors/bo/BootstrapBlazor BootstrapBlazor测试库是企业级Blazor UI组件库的质量保障体系&#xff0c;提供了一套完整的组件测试解…...

编程新知 2026/3/27 5:38:55

RustFS实战：5分钟在Linux服务器上搭个私有S3兼容存储（保姆级配置+避坑指南）

RustFS实战&#xff1a;5分钟在Linux服务器上搭个私有S3兼容存储&#xff08;保姆级配置避坑指南&#xff09; 最近在折腾一个需要私有文件存储的Side Project&#xff0c;既不想用公有云S3&#xff08;太贵&#xff09;&#xff0c;又嫌MinIO配置繁琐。偶然发现RustFS这个基于…...

编程新知 2026/3/27 5:22:45

A860-2155-T611发那科分离式增量型主轴编码器

型号&#xff1a;A860-2155-T611全称&#xff1a;αiBZ SENSOR ASSY 512 (THIN TYPE) 薄型传感器总成品牌&#xff1a;FANUC&#xff08;发那科&#xff09;类型&#xff1a;分离式增量型主轴编码器&#xff08;薄型&#xff09;一、产品特性薄型分离式设计&#xff1a;传感器头…...

编程新知 2026/3/27 5:10:43

别再死记硬背公式了！用3Blue1Brown的几何动画，5分钟搞懂行列式到底是啥

用动画解锁行列式的几何直觉&#xff1a;从死记硬背到可视化理解 当你第一次在课本上看到行列式的计算公式时&#xff0c;是否感到困惑——这个看似随意的ad-bc到底意味着什么&#xff1f;为什么它能够决定矩阵是否可逆&#xff1f;传统教学往往让我们陷入计算的泥潭&#xff0…...

编程新知 2026/3/27 5:02:29

AI显微镜-Swin2SR基础教程：理解‘细节重构技术’对AI生成图的价值

AI显微镜-Swin2SR基础教程&#xff1a;理解‘细节重构技术’对AI生成图的价值 1. 从模糊到高清&#xff1a;AI超分的革命性突破 你是否曾经遇到过这样的情况&#xff1a;AI生成了一张很有创意的图片&#xff0c;但分辨率太低&#xff0c;放大后全是马赛克&#xff1b;或者找到…...

编程新知 2026/3/27 4:52:11

效率革命：设计师必备的Sketch批量命名神器RenameIt完全指南

效率革命&#xff1a;设计师必备的Sketch批量命名神器RenameIt完全指南 【免费下载链接】RenameIt Keep your Sketch files organized, batch rename layers and artboards. 项目地址: https://gitcode.com/gh_mirrors/re/RenameIt 在现代UI/UX设计流程中&#xff0c;保…...

编程新知 2026/3/27 1:22:19

Git提交时Personal Access Token权限不足：如何正确配置workflow scope

1. 为什么Git提交会提示Personal Access Token权限不足&#xff1f; 最近在团队协作中遇到一个典型问题&#xff1a;当开发者尝试推送包含.github/workflows目录的代码到GitHub仓库时&#xff0c;系统突然报错refusing to allow a Personal Access Token to create or update w…...

编程新知 2026/3/27 0:53:39