css

💡 告别类名地狱！Tailwind CSS 语义化转换神器来了作为一名前端开发者，你是否早已受够了这些折磨？😫 代码可读性灾难打开 HTML 文件，映入眼帘的是长达数十个类名的"怪物"：

DFT计算杂谈

AMSET 设置多核并行计算AMSET是基于形变势理论的自动化输运计算工具，能够从 VASP 能带输出出发，一站式给出载流子迁移率、电导率、Seebeck 系数等关键输运性质。

前端老石人

CSS 值定义语法CSS 值定义语法是一种形式化文法，用于定义某个 CSS 属性或函数所允许的有效值集合。除了这一语法之外，有效值集合还可能受到语义约束的进一步限制（例如，要求某个数值必须严格为正数）。

正方体翻滚Loading 2.0前面实现了一个正方体翻滚Loading 1.0 版本看久了觉得原地翻滚有点没意思了，不如让它左右滚动起来

别再手写重复 CSS 了：SCSS 从入门到实战SCSS 是 Sass 的一种语法格式，可以理解成“加强版 CSS”。普通 CSS 能写的内容，SCSS 基本都能直接写；在此基础上，SCSS 又加了变量、嵌套、混合、函数、循环、模块拆分等能力。浏览器并不直接执行 SCSS，项目构建时会先把 .scss 文件编译成普通 .css 文件，然后再交给浏览器使用。

HTML和CSS基础使用目录一、HTML简介与基本结构1、简介2、基本结构二、常用的 HTML 标签1、单标签2、双标签三、列表与表格的使用方法

【CSS】基础一篇过简单来说，如果把网页比作一栋房子，html就是骨架，css就是装修的那层东西。CSS（Cascading Style Sheets，层叠样式表）是一种用来表现 HTML 文件样式的计算机语言。它的核心任务就是：告诉浏览器，HTML 里的那些元素应该“长什么样”以及“摆在什么位置”。

从TailwindCSS到UnoCSS：原子化CSS框架接入、特性与配置在普通前端项目中，大部分开发者会使用class名来作为CSS规则，但是这需要定义很多类名，起名字成了困难的事情。虽然类名可以复用，但是大部分类实际上是独一无二的，没有复用机会。CSS in JS可以解决部分问题，但是依然需要在项目中写大量的CSS代码。

gCode Teacher 格码致知

Javascrip提高:CSS backdrop-filter的使用方法-由Deepseek产生backdrop-filter: blur(2px); 是一个 CSS 属性，用于对元素背后的所有内容（即该元素覆盖区域的下层背景）应用图形滤镜效果。这里 blur(2px) 表示对背后内容进行高斯模糊，模糊半径为 2 像素。

gCode Teacher 格码致知

Javascript提高:canvas画布的网格背景-由Deepseek产生以下是简化后的版本，保留了正方形画布和科技感网络线，代码结构清晰，视觉风格干净利落。以下是您所需的一个使用Canvas技术绘制的、带有科技感网格线的正方形画布的HTML代码。它创建了一个带有渐变背景、发光网格线和交互提示的视觉元素。

gCode Teacher 格码致知

Javascript提高:使用canvas绘制一个绚丽的按钮-由Deepseek产生以下是您所需的采用Canvas绘制的动态按钮的HTML代码。它实现了一个带有渐变、阴影和点击波纹效果的交互按钮。

css篇之网格grid 学习Grid（网格布局）是 CSS 里的一种布局方式，可以把它想象成表格，但比表格更强大、更灵活。Mdn-官网学习

41.ShadCN 是什么？它如何和 Tailwind CSS 集成，从而更容易构建可访问且可自定义的 React 组件？shadcn/ui 不是传统意义上“装一个 npm 包就能用的组件库”。它更像一个组件代码生成/分发方案：你通过 shadcn CLI 把组件的 TypeScript 源码直接拷贝进你的项目目录，组件样式用 Tailwind CSS 写好，组件交互与无障碍能力通常基于 Radix UI primitives（无样式但重视可访问性的底层组件原语）。因此你既能“开箱即用”，又能“随时改源码”实现深度定制。

CSS GridCSS Grid Layout 在容器上建立二维网格格式化上下文：同时定义列轨道 / 行轨道（track）与间隙，直接子元素成为网格项，并可在两条轴上按网格线或 grid-template-areas 做显式放置；轨道尺寸常配合 fr、minmax()、repeat() 等与剩余空间、最小最大内容约束一起解析。它与以单轴流式分配为主的 Flexbox（一维弹性布局）互补，而非「只是少写嵌套」。读者宜已熟悉 Flex；下文默认现代浏览器实现。

HTML+CSS+JavaScriptHTML，超文本标记语言超文本:比文本要强大.通过链接和交互式⽅式来组织和呈现信息的文本形式.不仅仅有文本,还可能包含图片,音频,或者自已经审阅过它的学者所加的评注、补充或脚注等等.

小彭努力中

205.Vue3 + OpenLayers：加载动画，采用 CSS 的 @keyframes 方式本篇文章来分享一个在 Vue3 + OpenLayers 中实现地图加载动画的小案例。这种效果常用于：

爱上好庆祝

学习js的第七天（wed APIs的开始）在html中叫标签，在js的DOM中叫对象可以写选择器，可以写类名如有<div class=nav>我无敌了</div>

CSS 属性值计算过程（Computed Value）浏览器把你写的样式、默认样式、继承样式，一步步算出最终 Computed 值，决定元素长什么样。收集所有作用于当前元素的样式，并做基础转换：

css基础margin 用于设置元素与外部元素的间距，不被背景覆盖，可居中、可负值；块级元素水平居中：margin: 0 auto padding 用于设置元素内部内容与边框的间距，会被背景覆盖。