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

用js快速生成一个简单的css原子库 例如: .mr-18 .pl-18

news 2026/2/9 18:53:56
第三方css原子库的缺点

比如 tailwindcss，有学习成本最开始写的时候效率可能还没有我们自己手写效率高，需要配置，会有原始样式被覆盖的问题；总之就是一个字重

自己搓的优点
  • 学习成本低
  • 灵活
  • 不会有副作用
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let str = "";function createClass(classPrefix,cssAttrs,num=41){for (let i = 0; i < num; i++) {str = str +`.${classPrefix}${i}{ ${cssAttrs}: ${i}px};`;}}// margincreateClass('ml-','margin-left')createClass('mr-','margin-right')createClass('mt-','margin-top')createClass('mb-','margin-bottom')// paddingcreateClass('p-','padding')createClass('pl-','padding-left')createClass('pr-','padding-right')createClass('pt-','padding-top')createClass('pb-','padding-bottom')// font-sizecreateClass('fs-','font-size')// width、heightcreateClass('w-','width')createClass('h-','height')// row-gap、column-gapcreateClass('row-gap-','row-gap')createClass('column-gap-','column-gap')console.log(JSON.stringify(str));</script>
</body>
</html>

相关文章：

用js快速生成一个简单的css原子库 例如: .mr-18 .pl-18

第三方css原子库的缺点 比如 tailwindcss&#xff0c;有学习成本最开始写的时候效率可能还没有我们自己手写效率高&#xff0c;需要配置&#xff0c;会有原始样式被覆盖的问题&#xff1b;总之就是一个字重 自己搓的优点 学习成本低灵活不会有副作用 <!DOCTYPE html>…...

编程日记 2023/8/15 20:55:38

Java鹰眼轨迹服务 轻骑小程序 运动健康与社交案例

Java地图专题课 基本API BMapGLLib 地图找房案例 MongoDB 百度地图鹰眼轨迹服务 鹰眼轨迹服务概述 鹰眼是一套轨迹管理服务&#xff0c;提供各端SDK和API供开发者便捷接入&#xff0c;追踪所管理的车辆/人员等运动物体。 基于鹰眼提供的接口和云端服务&#xff0c;开发者可以迅…...

编程日记 2023/8/15 20:54:35

【产品经理】微信小程序隐私保护指引

为了分辨用户&#xff0c;开发者将在获取你的明示同意后&#xff0c;收集你的微信昵称、头像。 为了显示距离&#xff0c;开发者将在获取你的明示同意后&#xff0c;收集你的位置信息。 开发者收集你的地址&#xff0c;用于获取位置信息。 开发者收集你的发票信息&#xff0…...

编程日记 2023/8/15 20:53:33

springboot创建websocket服务端

springboot创建websocket服务端 1.配置类 package com.neusoft.airport.websocket;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndp…...

编程日记 2023/8/15 20:52:32

网络安全攻防实战：探索互联网发展史

大家好&#xff0c;我是沐尘而生。 互联网发展史&#xff1a;数字世界的壮阔画卷 从早期的ARPANET到今天的万物互联&#xff0c;互联网经历了漫长的发展过程。然而&#xff0c;随着技术的进步&#xff0c;网络安全问题也随之而来。我们不仅要探索互联网的壮阔历程&#xff0c;…...

编程日记 2023/8/15 20:51:31

pwm接喇叭搞整点报时[keyestudio的8002模块]

虽然现在查看时间很方便&#xff0c;但是其实好像我的时间观念却越来越差。于是决定搞一个整点报时&#xff0c;时常提醒自己时光飞逝&#xff0c;不要老是瞎墨迹。 这篇主要讲一下拼装方式和配置&#xff0c;就差不多了。不涉及什么代码。3针的元器件&#xff0c;去掉正负接线…...

编程日记 2023/8/15 20:50:30

配置listener tcps加密 enable SSL encryption for Oracle SQL*Net

一 配置客户端和服务端的wallet 2端配置方法一致&#xff0c;相互添加证书 orapki wallet create -wallet “/u01/oracle/wallet” -pwd Wdkf984jkkgekj434FKFD -auto_login_local orapki wallet add -wallet “/u01/oracle/wallet” -pwd Wdkf984jkkgekj434FKFD -dn “CNho…...

编程日记 2023/8/15 20:49:29

【Sklearn】基于逻辑回归算法的数据分类预测（Excel可直接替换数据）

【Sklearn】基于逻辑回归算法的数据分类预测（Excel可直接替换数据） 1.模型原理2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果1.模型原理 逻辑回归是一种用于二分类问题的统计学习方法，尽管名字中含有“回归”，但实际上是一种分类算法。它的基本原理是通…...

编程日记 2023/8/15 20:48:26

自然数的拆分问题

题目描述 任何一个大于 11 的自然数 n&#xff0c;总可以拆分成若干个小于 n 的自然数之和。现在给你一个自n&#xff0c;要求你求出 n 的拆分成一些数字的和。每个拆分后的序列中的数字从小到大排序。然后你需要输出这些序列&#xff0c;其中字典序小的序列需要优先输出。 输…...

编程日记 2023/8/15 20:47:25

du -mh命令

du 命令查看每个文件夹大小&#xff08;du 命令用法详解&#xff09;&#xff0c;du 命令的英文全拼是 disk usage&#xff0c;意思是占用的磁盘空间&#xff0c;该命令可以显示目录或文件的大小。 在执行“ du ”命令时&#xff0c;使用“ -h ”参数会以“人类可读格式”显示…...

编程日记 2023/8/15 20:46:24

MySQL 8 group by 报错 this is incompatible with sql_mode=only_full_group_by

文章目录 sql_mode配置ONLY_FULL_GROUP_BYSTRICT_TRANS_TABLESNO_ZERO_IN_DATENO_ZERO_DATEERROR_FOR_DIVISION_BY_ZERONO_AUTO_CREATE_USERNO_ENGINE_SUBSTITUTION 局部修改配置windows修改配置Linux修改配置 sql_mode配置 ONLY_FULL_GROUP_BY 用于控制是否允许对查询结果进…...

编程日记 2023/8/15 20:45:23

Mongodb (四十一）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、概述 1.1 相关概念 1.2 特性 二、应用场景 三、安装 四、目录结构 五、默认数据库 六、 数据库操作 6.1 库操作 6.2 文档操作 七、MongoDB数据库备份 7.1 备…...

编程日记 2023/8/15 20:44:20

16 dlsys GAN

和有监督的分类工作不同&#xff0c;生成任务的目标更不明确。难以评价生成结果的好坏。 Oracle discriminator 假设我们有一个先知判别器oracle discriminator可以分辨我们生成的内容是真还是假。 D(x) 表示判别数据为真的概率。 我们想让生产成的结果足够真实&#xff0c;所…...

编程日记 2023/8/15 20:43:17

css3-flex布局：基础使用 / Flexbox布局

一、理解flex 二、理解Flex布局&#xff08;又称Flexbox布局&#xff09; Flex布局&#xff08;又称Flexbox布局&#xff09;是一种基于Web的CSS3布局模式&#xff0c;其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项…...

编程日记 2023/8/15 20:42:16

MYSQL-习题掌握

文章目录 SQL基本操作1 设计表操作1.1 关系表字段1.2 关系表创建1.3 关系表数据1.4 关系表关系 2 SQL操作2.1 SQL 1-102.2 SQL 11-202.3 SQL 21-302.4 SQL 31-402.5 SQL 41-50 SQL基本操作 1 设计表操作 1.1 关系表字段 1 学生表 student s_ids_names_births_sex学生编号学…...

编程日记 2023/8/15 20:41:15

Python-迭代

1、迭代器 迭代器是一个对象&#xff0c;它可以记录遍历的相关信息&#xff0c;迭代器对象从集合的第一个元素开始访问&#xff0c;直到所有的元素被访问完结束。迭代器有两个基本的方法&#xff1a;iter() 和 next()。我们都过命令行工具&#xff0c;了解一下python的底层迭代…...

编程日记 2023/8/15 20:40:13

【论文阅读】DEPCOMM：用于攻击调查的系统审核日志的图摘要（SP-2022）

Xu Z, Fang P, Liu C, et al. Depcomm: Graph summarization on system audit logs for attack investigation[C]//2022 IEEE Symposium on Security and Privacy (SP). IEEE, 2022: 540-557. 1 摘要 ​ 提出了 DEPCOMM&#xff0c;这是一种图摘要方法&#xff0c;通过将大图划…...

编程日记 2023/8/15 20:39:11

大语言模型之一 Attention is all you need ---Transformer

大语言模型已经在很多领域大显身手&#xff0c;其应用包括只能写作、音乐创作、知识问答、聊天、客服、广告文案、论文、新闻、小说创作、润色、会议/文章摘要等等领域。在商业上模型即产品、服务即产品、插件即产品&#xff0c;任何形态的用户可触及的都可以是产品&#xff0c…...

编程日记 2023/8/15 20:38:08

数字鸿沟，让气候脆弱者更脆弱

随着科技的飞速发展&#xff0c;数字化正在改变我们的生活方式和社会结构。然而&#xff0c;数字鸿沟&#xff08;Digital Divide&#xff09;这一长期存在的问题&#xff0c;却在某些方面加剧了社会的不平等现象。在此&#xff0c;我们将探讨数字鸿沟如何加剧了气候脆弱者的脆…...

编程日记 2023/8/15 20:37:06

Tomcat 部署优化

Tomcat Tomcat 开放源代码web应用服务器&#xff0c;是由java代码开发的 tomcat就是处理动态请求和基于java代码的页面开发 可以在html当中写入java代码&#xff0c;tomcat可以解析html页面当中的iava&#xff0c;执行动态请求 动态页面机制有问题&#xff1a;不对tomcat进行优…...

编程日记 2023/8/15 20:36:05

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2026/1/23 12:18:20

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2026/1/25 9:08:41

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2026/2/5 18:58:39

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

编程新知 2025/9/18 4:17:51

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51