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

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

news 文章来源：https://blog.csdn.net/weixin_42232622/article/details/128993205 2024/11/7 21:13:52

Ⅰ. 作用

  • 用于调试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

家政服务小程序实战教程09-图文卡片

小程序还有一类需求就是展示服务的列表&#xff0c;我们这里用图文卡片组件来实现&#xff0c;我们先要添加一个标题&#xff0c;使用网格布局来实现 第一列添加一个文本组件&#xff0c;第二列添加一个图标组件 修改文本组件的文本内容&#xff0c;设置外边距 设置第二列的样式…...

编程日记 2023/2/12 17:58:32

国内唯一一部在CentOS下正确编译安装和使用RediSearch的教程

开篇 Redis6开始增加了诸多激动人心的模块&#xff0c;特别是&#xff1a;RedisJSON和RediSearch。这两个模块已经完全成熟了。它们可以直接使用我们的生产上的Redis服务器来做全文搜索&#xff08;二级搜索&#xff09;以取得更廉价的硬件成本、同时在效率上竟然超过了Elastic…...

编程日记 2023/2/12 17:57:23

前端对于深拷贝和浅拷贝的应用和思考

浅拷贝 浅拷贝 &#xff1a; 浅拷贝是指对基本类型的值拷贝&#xff0c;以及对对象类型的地址拷贝。它是将数据中所有的数据引用下来&#xff0c;依旧指向同一个存放地址&#xff0c;拷贝之后的数据修改之后&#xff0c;也会影响到原数据的中的对象数据。最简单直接的浅拷贝就…...

编程日记 2023/2/12 17:56:12

Java基础常见面试题（三）

String 字符型常量和字符串常量的区别&#xff1f; 形式上: 字符常量是单引号引起的一个字符&#xff0c;字符串常量是双引号引起的若干个字符&#xff1b; 含义上: 字符常量相当于一个整型值( ASCII 值)&#xff0c;可以参加表达式运算&#xff1b;字符串常量代表一个地址值…...

编程日记 2023/2/12 17:54:56

C++设计模式(13)——装饰模式

亦称&#xff1a; 装饰者模式、装饰器模式、Wrapper、Decorator 意图 装饰模式是一种结构型设计模式&#xff0c; 允许你通过将对象放入包含行为的特殊封装对象中来为原对象绑定新的行为。 问题 假设你正在开发一个提供通知功能的库&#xff0c; 其他程序可使用它向用户发…...

编程日记 2023/2/12 17:53:44

ESP-01S通过AT指令上报数据到阿里云物模型

ESP-01S使用AT指令上报数据到阿里云物模型 上篇文章介绍了如何用AT指令连接阿里云并进行通信&#xff1a;https://blog.csdn.net/weixin_46251230/article/details/128995530 但最终需要将传感器数据上报到云平台显示&#xff0c;所以需要建立阿里云物模型 阿里云平台建立物…...

编程日记 2023/2/12 17:52:27

【强化学习】马尔可夫决策过程MDP

1.马尔可夫决策过程MDP 1.1 MDP五元组 MDP<S,A,P,R,γ>MDP<\mathcal{S},\mathcal{A},\mathcal{P},\mathcal{R},\mathcal{\gamma}>MDP<S,A,P,R,γ>&#xff0c;其中&#xff1a; S\mathcal{S}S&#xff1a;状态空间A\mathcal{A}A&#xff1a;动作空间P\mathc…...

编程日记 2023/2/12 17:51:15

刘润：五维思考，让你站得更高、看得更远

原标题&#xff1a;刘润&#xff1a;五维思考&#xff0c;让你站得更高、看得更远 前言&#xff1a;遇到问题时&#xff0c;有的人很快就能想明白&#xff0c;有的人需要很久才能想明白&#xff0c;还有的人始终都想不明白。 而且&#xff0c;那些很快就能想明白的人&#xff0…...

编程日记 2023/2/12 17:50:02

从运维角度看微服务 k8s部署微服务【偏理论】【AL】

从运维角度看微服务 & 部署微服务【偏理论】 1、微服务的特点 服务组件化&#xff1a; 每个服务独立开发、部署&#xff0c;有效避免一个服务的修改引起整个系统重新部署。 技术栈灵活&#xff1a; 约定通信方式&#xff0c;使得服务本身功能实现对技术要求不再那么敏感。…...

编程日记 2023/2/12 17:48:51

专题 | 防抖和节流

一 防抖&#xff1a;单位时间内&#xff0c;频繁触发事件&#xff0c;只执行最后一次 场景&#xff1a;搜索框搜索输入&#xff08;利用定时器&#xff0c;每次触发先清掉以前的定时器&#xff0c;从新开始&#xff09; 节流&#xff1a;单位时间内&#xff0c;频繁触发事件&…...

编程日记 2023/2/12 17:47:39

asp.net wordpress/抚州网络推广

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2020年高压电工多少分及格及高压电工免费试题&#xff0c;包含高压电工多少分及格答案和解析及高压电工免费试题练习。由安全生产模拟考试一点通公众号结合国家高压电工考试最新大纲及高压电工考试真题汇总&#xff0…...

编程日记 2024/11/7 19:17:18

做试客需要去哪些网站/深圳高端网站建设公司

1 文件管理 # ls ls -a 列出当前目录下的所有文件&#xff0c;包括以.头的隐含文件 文件管理 # ls ls-l或ll 列出当前目录下文件的详细信息 文件管理 # pwd pwd 查看当前所在目录的绝对路经 文件管理 # cd cd.. 回当前目录的上一级目录 文件管理 # cd cd - 回上一次所在的目…...

编程日记 2024/11/7 18:28:46

自己做的网站怎么被搜索出来/关键词排名优化系统

利用表之间的关系创建Query 我们经常需要根据表之间的关系用代码创建query,SysQuery这个类提供了一个方法queryFromTableRelation,当然这个方法的代码跟我们平常根据表之间的关系构造query的过程是完全一样的,不过它做成了通用的方法,直接调用它就不用自己每次都重复劳动了,另…...

编程日记 2024/11/7 14:58:49

长沙网络营销推广公司/广州网站制作实力乐云seo

首先, clone 一个远端仓库&#xff0c;到其目录下&#xff1a; $ Git clone git://example.com/myproject $ cd myproject 然后&#xff0c;看看你本地有什么分支&#xff1a; $ git branch * master 但是有些其他分支你在的仓库里面是隐藏的&#xff0c;你可以加上&#xff0d…...

编程日记 2024/11/7 12:31:12

属于b2b电子商务模式的平台有/seo排名优化seo

导读&#xff1a;什么样的区域对人才最具吸引力&#xff1f;广东海丝研究院推出的《广州11区人才吸引力指数报告》显示&#xff0c;广州11区中&#xff0c;天河区人才吸引力指数优势明显&#xff0c;位列第一&#xff0c;黄埔区、白云区、越秀区、南沙区紧随其后&#xff0c;海…...

编程日记 2024/11/7 6:16:30

兰州做家教去哪个网站比较好/网络推广渠道

职场的新人做事要有自己的原则&#xff0c;那么职场新人如何把握原则呢&#xff1f;一起来和小编看看吧。尊重原则&#xff1a;职场新人新到职场遭到“欺生”很常见&#xff0c;如果掌握了处事技巧这就没问题了&#xff0c;小峰在佛山觅得一份新的文案策划职位&#xff0c;新公…...

编程日记 2024/11/7 6:14:29