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

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

news 2026/4/5 22:15:36
第三方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

知网维普都要过，AI率85%用哪款工具最合适

越来越多高校开始同时要求知网和维普检测&#xff0c;这让选工具变得更复杂了——不是只要过一个平台&#xff0c;而是要同时达标。 AI率85%&#xff0c;知网和维普都要过20%以下&#xff0c;这种情况用哪款工具最合适&#xff1f; 知网和维普的算法差异 先说一个背景知识&a…...

编程新知 2026/4/5 21:59:50

率零测评：AI率83%的文章降完是什么效果

率零&#xff08;www.0ailv.com&#xff09;最大的特点是便宜——3.2元/千字&#xff0c;在主流工具里价格最低&#xff0c;还有1000字免费体验。这让很多AI率高的同学把它作为第一选择。 它的实际效果怎么样&#xff1f;这篇文章来说清楚。 测试基本情况 测试论文&#xff…...

编程新知 2026/4/5 21:35:23

UFS4.0协议之电源与信号完整性设计探析

1. UFS4.0协议的核心电源架构解析 第一次拆解UFS4.0存储芯片时&#xff0c;我被其电源系统的精密设计震撼到了。与早期版本相比&#xff0c;UFS4.0将供电网络细分为VCC&#xff08;2.5V&#xff09;、VCCQ&#xff08;1.2V&#xff09;和VCCQ2&#xff08;1.8V&#xff09;三级…...

编程新知 2026/4/5 20:58:59

保姆级教程：用ms-swift微调Qwen3-Embedding-0.6B，搞定文本相似度任务

从零构建文本语义搜索系统&#xff1a;基于Qwen3-Embedding的实战指南 当我们需要在海量文本中快速找到相关内容时&#xff0c;传统的关键词匹配已经力不从心。想象一下电商平台的智能推荐、客服系统的FAQ自动匹配&#xff0c;或是法律文档的相似案例检索——这些场景都需要理解…...

编程新知 2026/4/5 20:38:44

别再只盯着报点率了：聊聊电容触摸屏算法里那些不为人知的‘软实力’

电容触摸屏算法的隐秘战场&#xff1a;超越报点率的技术博弈 在智能家居面板的清晨唤醒中&#xff0c;工业HMI产线的精准操控里&#xff0c;或是车载中控的流畅滑动间&#xff0c;电容触摸屏已成为人机交互的核心界面。当大多数技术选型讨论聚焦于报点率、触控精度这些硬指标时…...

编程新知 2026/4/5 20:28:26

终极Windows内存优化指南：用Mem Reduct释放被浪费的RAM资源

终极Windows内存优化指南&#xff1a;用Mem Reduct释放被浪费的RAM资源 【免费下载链接】memreduct Lightweight real-time memory management application to monitor and clean system memory on your computer. 项目地址: https://gitcode.com/gh_mirrors/me/memreduct …...

编程新知 2026/4/5 19:17:02

如何用QtScrcpy突破手机操控局限？三大创新方案让多场景效率提升300%

如何用QtScrcpy突破手机操控局限&#xff1f;三大创新方案让多场景效率提升300% 【免费下载链接】QtScrcpy Android real-time display control software 项目地址: https://gitcode.com/GitHub_Trending/qt/QtScrcpy 手机屏幕太小导致操作失误&#xff1f;多设备管理切…...

编程新知 2026/4/5 19:08:58

【西瓜带你学设计模式 | 第十二期 - 装饰器模式】装饰器模式 —— 动态叠加功能实现、优缺点与适用场景

文章目录前言1. 装饰器模式是什么&#xff1f;2. 装饰器模式解决什么问题&#xff1f;3. 实现步骤4. 静态结构4.1 抽象组件&#xff1a;Coffee&#xff08;统一接口&#xff09;4.2 具体组件&#xff1a;SimpleCoffee&#xff08;基础咖啡&#xff09;4.3 装饰器抽象类&#xf…...

编程新知 2026/4/5 18:48:35

自感的奠基与哲学的转轨：一项元哲学视域中的全球思想比较研究

自感的奠基与哲学的转轨&#xff1a;一项元哲学视域中的全球思想比较研究摘要本文以岐金兰的“自感-痕迹论”与“大儒家观”为核心参照框架&#xff0c;在全球哲学的前沿版图中&#xff0c;对当代试图回应人工智能时代意义危机的代表性思想体系展开系统性的元哲学比较研究。本文…...

编程新知 2026/4/5 18:22:09

BootDo项目使用指南：从架构解析到生产环境部署

BootDo项目使用指南&#xff1a;从架构解析到生产环境部署 【免费下载链接】bootdo 项目地址: https://gitcode.com/gh_mirrors/bo/bootdo 项目核心架构解析 核心目录树与功能模块关联 BootDo采用分层架构设计&#xff0c;核心目录结构如下&#xff1a; bootdo/ ├─…...

编程新知 2026/4/5 17:33:30