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

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

news 2026/2/9 13:38:21
第三方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

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/2/6 2:05:50

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/2/7 4:16:41

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2026/1/29 3:25:02

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2026/2/2 0:52:30

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2026/2/6 5:39:10