前端开发 Html/Css
刷新
CSS - transition 粗浅记忆

博主头像 在 CSS 中，transition 是用于实现元素样式平滑过渡的属性，能让元素从一种样式状态（如颜色、尺寸、位置等）逐渐变化到另一种状态，避免样式突变带来的生硬感。它是实现基础动画效果的核心工具，广泛用于 hover 交互、状态切换等场景。 一、transition 核心语法 transition ...

Scss 基础

博主头像 scss 转 css 在线转换 https://33tool.com/scss_to_css/ 变量 $primary-color: #000; .main1 { background-color: $primary-color; } 一、嵌套 1.1 父选择器 & (Referencing Par ...

记录---window.close()失效 + Chrome浏览器调试线上代码

博主头像 ‍ 写在开头 点赞 + 收藏 学会 情况说明 主系统单点登录点击触发window.open()打开本系统。 是发布生产后的新需求：要求退出登录后直接关闭当前系统页面。 本地运行增加了window.close()方法实现功能，点击退出后页面没反应。 排查过程 官方解析中说明，win ...

记录---前端微服务框架深度对比：无界（Momentum）与乾坤（Qiankun）实战指南

博主头像 ‍ 写在开头 点赞 + 收藏 学会 一、引言：为何选择微前端？ 在传统单体前端架构中，随着业务复杂度增加，代码臃肿、协作困难、部署效率低等问题愈发突出。微前端通过将项目拆分为多个独立自治的微应用，解决了这些问题： 技术栈无关：支持 Vue、React、Angular 等框架混合开 ...

记录---基于uniapp，编写一个自定义的日期组件

博主头像 ‍ 写在开头 点赞 + 收藏 学会 环境配置 系统：windows10 平台：HBuilderX4.76 语言：vue、javascript 库：uni 概述 本文是基于uniapp，编写的自定义日期选择器组件，大致效果如下： 1、组件简介 这是一个日期选择器，即可以选择年、月、 ...

上下margin无法生效的一种情况-行内元素

博主头像 问题描述 在学udemy的html&css课的时候，challenge2有一部分是给超链接添加margin-top/bottom,添加后浏览器devtool的样式中显示margin已生效，但是在页面中却无法显示。 解决过程 搜索margin不生效的几个原因可以总结为 parent box 放不下 上 ...

记录---浏览器指纹-探究前端如何识别用户设备

博主头像 ‍ 写在开头 点赞 + 收藏 学会 什么是浏览器指纹？ 浏览器指纹，是用来唯一标识你浏览器的一组“特征值”。它不是我们理解中的那种真实指纹，而是通过收集浏览器、操作系统、设备分辨率、字体、插件等信息，组合成的一个独特 ID。 和传统的 Cookie 不同，浏览器指纹不需要在用户设 ...

记录---啊！！！Blob 居然这么强大！

博主头像 ‍ 写在开头 点赞 + 收藏 学会 啊！！！Blob 居然这么强大！ 在前端开发的世界里，我们每天都在和各种 API、对象和数据打交道。然而，有一个对象，常常被我们忽视，却又在背后默默支撑着许多关键功能 —— 它就是 Blob。 Blob（Binary Large Object） ...

记录---从零开始编写 useWindowSize Hook

博主头像 ‍ 写在开头 点赞 + 收藏 学会 在 React 开发中，我们经常需要根据窗口大小来调整组件的行为。今天我们将从最简单的实现开始，逐步优化，最终构建出一个高性能的 useWindowSize Hook。 第一步：最简单的实现 让我们从最基础的版本开始： import { use ...

记录---npm link 详解：本地包开发与测试的利器

博主头像 ‍ 写在开头 点赞 + 收藏 学会 npm link 详解：本地包开发与测试的利器 什么是 npm link？ npm link 是 npm 提供的一个强大功能，它允许你在本地开发环境中创建符号链接，将本地开发的包链接到其他项目中进行测试和使用。这个功能特别适合在开发自己的 np ...

记录---说说PC端扫码登录

博主头像 ‍ 写在开头 点赞 + 收藏 学会 说说PC端扫码登录 在前端开发的面试中，面试官常常会提出一些涉及实际项目经验的问题，以评估候选人解决问题的能力和技术深度。例如，"你在项目中遇到过哪些技术挑战？是如何解决的？" 这类问题旨在了解候选人面对复杂场景时的应对策略和技术选型能力。其中 ...

记录---写个vite插件自动处理系统权限，降低99%重复工作

博主头像 ‍ 写在开头 点赞 + 收藏 学会 前言 好久没有更文章咯，最近做一个中台系统的权限控制功能，由于路由权限和角色权限都简单，但是要做按钮权限有点麻烦，因为太多按钮了。其实我以前也做过这个功能，简单暴力做法就是每个按钮用自定义指令去判断是否有权限显示。但是重复代码也太多太多，并且维 ...

记录---grid实现瀑布流

博主头像 ‍ 写在开头 点赞 + 收藏 学会 效果图 瀑布流布局原理 瀑布流布局（Waterfall Layout）是一种等宽不等高的多列布局方式，视觉上元素像瀑布一样逐列填充。核心原理： 等宽多列：将容器划分为多个等宽的列。 动态填充：元素按顺序优先插入当前高度最短的列，保证布局紧凑。 ...

记录---CSS Grid 布局：现代网页布局的强大工具

博主头像 ‍ 写在开头 点赞 + 收藏 学会 CSS Grid 布局（网格布局）是 CSS 中一种强大的二维布局系统，它彻底改变了我们构建网页布局的方式。与传统的布局方法（如浮动、定位或 Flexbox）相比，Grid 提供了更直观、更灵活的方式来创建复杂的网页布局。 一、Grid 布局的 ...

数据可视化大屏（html + js + css）

博主头像 数据可视化大屏 作为大数据的学生，每次想实现前端数据可视化大屏就头疼，不会前端就很烦，所以这次特定不断调教AI，再加上自己不断的改改改，终于花了一个下午改成了一个还过得去的可视化大屏，所以直接把源码分享在这里了，但是要自己导入echarts组件 index.html页面 <!DOCTYPE html ...

AI 赋能编程，Coding新范式

博主头像 我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：佳岚 前言 AI 的大趋势： 24、25 年是 AI 应用大爆发的两年，随着 LLMs 越来越智能化，越来越多的应用实践被挖掘。 我们可以留意到我们使用的主流 ...

123···5>