CSS 中 @media 规则及用例
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。浏览器支持表格中的数字表示支持 @media 规则的第一个浏览器的版本号。规则chromeIEFireF...
Vite 插件 —— 在 Laravel 中使用 Purgecss
这是一个 Vite 插件，集成了 PurgeCSS 和 Laravel 10/9 模板资源。该插件会只在生产模式下对资源进行清理 (yarn build/npm run build)。安装yarnyarn add -D @erbelion/vite-plugin-laravel-purgecssnpmnpm i -D @erbelion/vite...
盒子模型:display:-webkit-box的使用
在移动布局中浮动已经不再重要,自适应成为主要的需求,所以display:-webkit-box;变的尤为重要.box-flex是css3新添加的盒子模型属性,实现布局的垂直登高/水平均分/按比例划分.兼容性有待提高,没有得到完全支持,可以使用它们的私有属性定义Firefox(-moz)/opera(-o)/chrome/safari(-webkit）一、bo...
xpath 排除某个元素
通常我们使用 xpath 的用处是选择某个或者某些节点，但是如果我们的业务变成“需要选择去掉某个节点，然后拿到其他节点”，这个时候该怎么办呢？其实xpath 中有个功能叫做 not(name()) 可以删除一类 tag 的所有节点，如下所示：我们先有一个 html 的页面结构。方便大家的查看。...
daisyUI - 主题漂亮、代码纯净！免费开源的 Tailwind CSS 组件库
daisyUI 是一款极为流行的 CSS UI 组件库，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架构建的组件库。截止发文日期，已经在 Github 得到 11,200 Star， 944,600 次 NPM 安装。
Pico.css - 优雅的纯 CSS 开源 UI 框架，用原始的 HTML 元素标签来做界面
不同浏览器对网页默认的组件解析样式不一致，而且不够美观，网页样式开发需要大量时间，今天介绍一款优雅的 CSS 框架。关于 Pico.cssPico.css 是一个简单轻量化的 CSS UI 框架，最大的特点是样式都基于 HMTL 原始的标签名和内置的属性，少用甚至是不用 class 来定义样式，写出来的代码语义清晰，可维护性强，能够帮助开发者构建自己的 UI...