用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进行优…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
AI编程--插件对比分析：CodeRider、GitHub Copilot及其他
AI编程插件对比分析：CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...