用js快速生成一个简单的css原子库 例如: .mr-18 .pl-18
第三方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，有学习成本最开始写的时候效率可能还没有我们自己手写效率高，需要配置，会有原始样式被覆盖的问题；总之就是一个字重 自己搓的优点 学习成本低灵活不会有副作用 <!DOCTYPE html>…...
Java鹰眼轨迹服务 轻骑小程序 运动健康与社交案例
Java地图专题课 基本API BMapGLLib 地图找房案例 MongoDB 百度地图鹰眼轨迹服务 鹰眼轨迹服务概述 鹰眼是一套轨迹管理服务，提供各端SDK和API供开发者便捷接入，追踪所管理的车辆/人员等运动物体。 基于鹰眼提供的接口和云端服务，开发者可以迅…...
【产品经理】微信小程序隐私保护指引
为了分辨用户，开发者将在获取你的明示同意后，收集你的微信昵称、头像。 为了显示距离，开发者将在获取你的明示同意后，收集你的位置信息。 开发者收集你的地址，用于获取位置信息。 开发者收集你的发票信息࿰…...
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…...
网络安全攻防实战：探索互联网发展史
大家好，我是沐尘而生。 互联网发展史：数字世界的壮阔画卷 从早期的ARPANET到今天的万物互联，互联网经历了漫长的发展过程。然而，随着技术的进步，网络安全问题也随之而来。我们不仅要探索互联网的壮阔历程，…...
pwm接喇叭搞整点报时[keyestudio的8002模块]
虽然现在查看时间很方便，但是其实好像我的时间观念却越来越差。于是决定搞一个整点报时，时常提醒自己时光飞逝，不要老是瞎墨迹。 这篇主要讲一下拼装方式和配置，就差不多了。不涉及什么代码。3针的元器件，去掉正负接线…...
配置listener tcps加密 enable SSL encryption for Oracle SQL*Net
一 配置客户端和服务端的wallet 2端配置方法一致，相互添加证书 orapki wallet create -wallet “/u01/oracle/wallet” -pwd Wdkf984jkkgekj434FKFD -auto_login_local orapki wallet add -wallet “/u01/oracle/wallet” -pwd Wdkf984jkkgekj434FKFD -dn “CNho…...
【Sklearn】基于逻辑回归算法的数据分类预测（Excel可直接替换数据）
【Sklearn】基于逻辑回归算法的数据分类预测（Excel可直接替换数据） 1.模型原理2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果1.模型原理 逻辑回归是一种用于二分类问题的统计学习方法，尽管名字中含有“回归”，但实际上是一种分类算法。它的基本原理是通…...
自然数的拆分问题
题目描述 任何一个大于 11 的自然数 n，总可以拆分成若干个小于 n 的自然数之和。现在给你一个自n，要求你求出 n 的拆分成一些数字的和。每个拆分后的序列中的数字从小到大排序。然后你需要输出这些序列，其中字典序小的序列需要优先输出。 输…...
du -mh命令
du 命令查看每个文件夹大小（du 命令用法详解），du 命令的英文全拼是 disk usage，意思是占用的磁盘空间，该命令可以显示目录或文件的大小。 在执行“ du ”命令时，使用“ -h ”参数会以“人类可读格式”显示…...
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 用于控制是否允许对查询结果进…...
Mongodb (四十一）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 目录 前言 一、概述 1.1 相关概念 1.2 特性 二、应用场景 三、安装 四、目录结构 五、默认数据库 六、 数据库操作 6.1 库操作 6.2 文档操作 七、MongoDB数据库备份 7.1 备…...
16 dlsys GAN
和有监督的分类工作不同，生成任务的目标更不明确。难以评价生成结果的好坏。 Oracle discriminator 假设我们有一个先知判别器oracle discriminator可以分辨我们生成的内容是真还是假。 D(x) 表示判别数据为真的概率。 我们想让生产成的结果足够真实，所…...
css3-flex布局：基础使用 / Flexbox布局
一、理解flex 二、理解Flex布局（又称Flexbox布局） Flex布局（又称Flexbox布局）是一种基于Web的CSS3布局模式，其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项…...
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学生编号学…...
Python-迭代
1、迭代器 迭代器是一个对象，它可以记录遍历的相关信息，迭代器对象从集合的第一个元素开始访问，直到所有的元素被访问完结束。迭代器有两个基本的方法：iter() 和 next()。我们都过命令行工具，了解一下python的底层迭代…...
【论文阅读】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，这是一种图摘要方法，通过将大图划…...
大语言模型之一 Attention is all you need ---Transformer
大语言模型已经在很多领域大显身手，其应用包括只能写作、音乐创作、知识问答、聊天、客服、广告文案、论文、新闻、小说创作、润色、会议/文章摘要等等领域。在商业上模型即产品、服务即产品、插件即产品，任何形态的用户可触及的都可以是产品，…...
数字鸿沟，让气候脆弱者更脆弱
随着科技的飞速发展，数字化正在改变我们的生活方式和社会结构。然而，数字鸿沟（Digital Divide）这一长期存在的问题，却在某些方面加剧了社会的不平等现象。在此，我们将探讨数字鸿沟如何加剧了气候脆弱者的脆…...
Tomcat 部署优化
Tomcat Tomcat 开放源代码web应用服务器，是由java代码开发的 tomcat就是处理动态请求和基于java代码的页面开发 可以在html当中写入java代码，tomcat可以解析html页面当中的iava，执行动态请求 动态页面机制有问题：不对tomcat进行优…...
如何用AD8232构建你的第一个专业级心电监测系统：从零到一的完整指南
如何用AD8232构建你的第一个专业级心电监测系统：从零到一的完整指南 【免费下载链接】AD8232_Heart_Rate_Monitor AD8232 Heart Rate Monitor 项目地址: https://gitcode.com/gh_mirrors/ad/AD8232_Heart_Rate_Monitor 想要亲手打造一个专业级的心电监测设备…...
构建企业级金融数据管道：AKShare分布式数据采集架构深度解析
构建企业级金融数据管道：AKShare分布式数据采集架构深度解析 【免费下载链接】akshare AKShare is an elegant and simple financial data interface library for Python, built for human beings! 开源财经数据接口库 项目地址: https://gitcode.com/gh_mirrors/…...
Cursor Free VIP破解工具：5步实现永久免费使用的完整解决方案
Cursor Free VIP破解工具：5步实现永久免费使用的完整解决方案 【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve reached y…...
DeepSeek工具调用能力深度评测（实测12类插件+8种LLM上下文窗口下的成功率与延迟数据）
更多请点击： https://kaifayun.com 第一章：DeepSeek工具调用能力概览与评测方法论 DeepSeek系列大模型（如DeepSeek-V2、DeepSeek-Coder）原生支持结构化工具调用（Tool Calling），其核心机制基于J…...
具身智能的发展趋势对就业市场的影响是什么？
具身智能对就业的核心影响是结构性重塑：短期替代大量重复性岗位、长期创造更高价值的新岗位，整体呈现 “替代 — 创造 — 转型” 的震荡再平衡过程。下面从替代、创造、结构变化、技能与分配、时间线五个方面展开。一、岗位替代：低技能、高重…...
EASY-HWID-SPOOFER：3分钟学会硬件信息伪装终极指南
EASY-HWID-SPOOFER：3分钟学会硬件信息伪装终极指南 【免费下载链接】EASY-HWID-SPOOFER 基于内核模式的硬件信息欺骗工具 项目地址: https://gitcode.com/gh_mirrors/ea/EASY-HWID-SPOOFER 在当今数字时代，您的硬件标识就像是设备的"数字指纹…...
LogExpert实战指南：5大核心功能深度探索Windows日志分析高效方案
LogExpert实战指南：5大核心功能深度探索Windows日志分析高效方案 【免费下载链接】LogExpert Windows tail program and log file analyzer. 项目地址: https://gitcode.com/gh_mirrors/lo/LogExpert LogExpert是一款专为Windows平台设计的图形化日志分析工具…...
Cursor Free VIP破解工具终极指南：5分钟实现AI编程助手永久免费使用
Cursor Free VIP破解工具终极指南：5分钟实现AI编程助手永久免费使用 【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve rea…...
深度解析开源翻译方案：如何构建高效免费的DeepL替代品
深度解析开源翻译方案：如何构建高效免费的DeepL替代品 【免费下载链接】DeepLX Powerful Free DeepL API, No Token Required 项目地址: https://gitcode.com/gh_mirrors/de/DeepLX DeepL翻译API的免费限制和复杂配置常常让开发者望而却步。DeepLX作为开源免…...
终极免费指南：Wand-Enhancer解锁WeMod完整功能体验
终极免费指南：Wand-Enhancer解锁WeMod完整功能体验 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 你是否厌倦了WeMod专业版的高昂费用&…...