用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进行优…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...
Java求职者面试指南：计算机基础与源码原理深度解析
Java求职者面试指南：计算机基础与源码原理深度解析 第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...
「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下，推客小程序系统凭借其裂变传播、精准营销等特性，成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径，助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ，这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器，右键点击 .uproject 文件，选择 "Generate Visual Studio project files"，重…...
实战设计模式之模板方法模式
概述 模板方法模式定义了一个操作中的算法骨架，并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下，重新定义算法中的某些步骤。简单来说，就是在一个方法中定义了要执行的步骤顺序或算法框架，但允许子类…...
Monorepo架构: Nx Cloud 扩展能力与缓存加速
借助 Nx Cloud 实现项目协同与加速构建 1 ） 缓存工作原理分析 在了解了本地缓存和远程缓存之后，我们来探究缓存是如何工作的。以计算文件的哈希串为例，若后续运行任务时文件哈希串未变，系统会直接使用对应的输出和制品文件。 2 …...