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

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

news 2026/2/9 19:23:46

第三方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>…...

编程日记 2023/8/15 20:55:38

Java鹰眼轨迹服务轻骑小程序运动健康与社交案例

Java地图专题课基本API BMapGLLib 地图找房案例 MongoDB 百度地图鹰眼轨迹服务鹰眼轨迹服务概述鹰眼是一套轨迹管理服务，提供各端SDK和API供开发者便捷接入，追踪所管理的车辆/人员等运动物体。基于鹰眼提供的接口和云端服务，开发者可以迅…...

编程日记 2023/8/15 20:54:35

【产品经理】微信小程序隐私保护指引

为了分辨用户，开发者将在获取你的明示同意后，收集你的微信昵称、头像。为了显示距离，开发者将在获取你的明示同意后，收集你的位置信息。开发者收集你的地址，用于获取位置信息。开发者收集你的发票信息&#xff0…...

编程日记 2023/8/15 20:53:33

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

网络安全攻防实战：探索互联网发展史

大家好，我是沐尘而生。互联网发展史：数字世界的壮阔画卷从早期的ARPANET到今天的万物互联，互联网经历了漫长的发展过程。然而，随着技术的进步，网络安全问题也随之而来。我们不仅要探索互联网的壮阔历程，…...

编程日记 2023/8/15 20:51:31

pwm接喇叭搞整点报时[keyestudio的8002模块]

虽然现在查看时间很方便，但是其实好像我的时间观念却越来越差。于是决定搞一个整点报时，时常提醒自己时光飞逝，不要老是瞎墨迹。这篇主要讲一下拼装方式和配置，就差不多了。不涉及什么代码。3针的元器件，去掉正负接线…...

编程日记 2023/8/15 20:50:30

配置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…...

编程日记 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，总可以拆分成若干个小于 n 的自然数之和。现在给你一个自n，要求你求出 n 的拆分成一些数字的和。每个拆分后的序列中的数字从小到大排序。然后你需要输出这些序列，其中字典序小的序列需要优先输出。输…...

编程日记 2023/8/15 20:47:25

du -mh命令

du 命令查看每个文件夹大小（du 命令用法详解），du 命令的英文全拼是 disk usage，意思是占用的磁盘空间，该命令可以显示目录或文件的大小。在执行“ du ”命令时，使用“ -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 (四十一）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档目录前言一、概述 1.1 相关概念 1.2 特性二、应用场景三、安装四、目录结构五、默认数据库六、数据库操作 6.1 库操作 6.2 文档操作七、MongoDB数据库备份 7.1 备…...

编程日记 2023/8/15 20:44:20

16 dlsys GAN

和有监督的分类工作不同，生成任务的目标更不明确。难以评价生成结果的好坏。 Oracle discriminator 假设我们有一个先知判别器oracle discriminator可以分辨我们生成的内容是真还是假。 D(x) 表示判别数据为真的概率。我们想让生产成的结果足够真实，所…...

编程日记 2023/8/15 20:43:17

css3-flex布局：基础使用 / Flexbox布局

一、理解flex 二、理解Flex布局（又称Flexbox布局） Flex布局（又称Flexbox布局）是一种基于Web的CSS3布局模式，其目的是为了更加灵活和自适应地布置各种各样的网页元素。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、迭代器迭代器是一个对象，它可以记录遍历的相关信息，迭代器对象从集合的第一个元素开始访问，直到所有的元素被访问完结束。迭代器有两个基本的方法：iter() 和 next()。我们都过命令行工具，了解一下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，这是一种图摘要方法，通过将大图划…...

编程日记 2023/8/15 20:39:11

大语言模型之一 Attention is all you need ---Transformer

大语言模型已经在很多领域大显身手，其应用包括只能写作、音乐创作、知识问答、聊天、客服、广告文案、论文、新闻、小说创作、润色、会议/文章摘要等等领域。在商业上模型即产品、服务即产品、插件即产品，任何形态的用户可触及的都可以是产品&#xff0c…...

编程日记 2023/8/15 20:38:08

数字鸿沟，让气候脆弱者更脆弱

随着科技的飞速发展，数字化正在改变我们的生活方式和社会结构。然而，数字鸿沟（Digital Divide）这一长期存在的问题，却在某些方面加剧了社会的不平等现象。在此，我们将探讨数字鸿沟如何加剧了气候脆弱者的脆…...

编程日记 2023/8/15 20:37:06

Tomcat 部署优化

Tomcat Tomcat 开放源代码web应用服务器，是由java代码开发的 tomcat就是处理动态请求和基于java代码的页面开发可以在html当中写入java代码，tomcat可以解析html页面当中的iava，执行动态请求动态页面机制有问题：不对tomcat进行优…...

编程日记 2023/8/15 20:36:05

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/22 15:14:25

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享文件木马：https://w…...

编程新知 2026/1/25 10:13:29

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2026/1/23 11:58:06

Linux 中如何提取压缩文件？

Linux 是一种流行的开源操作系统，它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间，使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的，要在 …...

编程新知 2026/2/1 5:38:25

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号错误码常见问题前置条件手机安装有sim卡手机开启…...

编程新知 2026/1/27 2:03:36

第三方css原子库的缺点

自己搓的优点

相关文章：