前端技术文章

  • HTML图片懒加载:loading=lazy属性使用教程
    HTML图片懒加载:loading=lazy属性使用教程
    loading="lazy"仅适用于img和iframe且需src属性,Chrome76+、Firefox75+、Edge79+及Safari15.4+(仅img)支持;首屏图、背景图、picture内source等不适用,须配合width/height防CLS,SSR中需注意JS加载时机。
    文章 · 前端   |  2个月前  |   322浏览 收藏
  • CSS按钮渐变过渡不明显怎么优化
    CSS按钮渐变过渡不明显怎么优化
    渐变背景无法直接过渡,因CSS不支持渐变插值。解决方案:1.用伪元素叠加渐变层,通过opacity实现淡入效果;2.利用background-position移动渐变制造流动感;3.JS动态控制CSS变量或切换类,结合过渡动画。推荐伪元素法,简单高效,配合0.3s-0.6s动画时长与文字颜色变化,提升交互反馈。
    文章 · 前端   |  2个月前  |   322浏览 收藏
  • CSS 100% 宽度溢出问题解析
    CSS 100% 宽度溢出问题解析
    <p>width:100%撑破父容器是因为默认box-sizing:content-box,使padding和border额外增加宽度;修复方法是设置box-sizing:border-box,推荐全局重置,::before,*::after{box-sizing:border-box;}。</p>
    文章 · 前端   |  2个月前  |   322浏览 收藏
  • CSS中设置鼠标样式方法详解
    CSS中设置鼠标样式方法详解
    CSS的cursor属性用于设置鼠标悬停时的指针样式,提升交互体验。支持default、pointer、wait等内置类型,也可通过url()使用自定义图像并指定热点位置,如cursor:url('cursor.cur'),default。实际应用中,.btn用pointer表示可点击,.loading用wait提示加载,.disabled用not-allowed禁止操作,合理使用可增强界面直观性。
    文章 · 前端   |  2个月前  |   322浏览 收藏
  • CSS变量控制模态框高度实现方法
    CSS变量控制模态框高度实现方法
    模态框高度不随内容撑开需用min-height与max-height组合:设min-height保小内容不塌缩,max-height用CSS变量限制上限,overflow-y:auto加在内容区实现局部滚动。
    文章 · 前端   |  2个月前  |   322浏览 收藏
  • CSS优雅设置内边距,区分padding与内容尺寸
    CSS优雅设置内边距,区分padding与内容尺寸
    padding会撑大元素尺寸是盒模型默认行为,非bug;启用box-sizing:border-box可使width/height包含padding;简写顺序为上右下左;垂直居中应优先用flex或grid而非padding。
    文章 · 前端   |  2个月前  |   322浏览 收藏
  • CSS实现带间隙的图片马赛克效果
    CSS实现带间隙的图片马赛克效果
    grid-gap为什么对图片马赛克没反应?因为grid-gap只作用于grid容器的直接子元素之间,如果你把直接塞进display:grid容器却没设grid-template-columns/rows,浏览器可能按单列流式渲染,间隙就“看不见”。更常见的是:图片被拉伸变形后撑满单元格,间隙被视觉上“吞掉”了。实操建议:必须显式定义网格结构,比如grid-template-columns:repeat(3,1fr)给加object-fit:cover或ob
    文章 · 前端   |  2个月前  |   322浏览 收藏
  • CSS实现元素闪烁动画技巧
    CSS实现元素闪烁动画技巧
    闪烁动画应使用@keyframes定义0%/100%opacity:1与50%opacity:0的循环关键帧,配animation:blink1sstep-endinfinite实现开关式效果;IE需JS切换transitionclass;须规避光敏风险、提供禁用开关及prefers-reduced-motion支持。
    文章 · 前端   |  2个月前  |   322浏览 收藏
  • V8优化对象属性访问性能
    V8优化对象属性访问性能
    内联缓存(IC)是V8自动启用的优化机制,其效率取决于对象结构稳定性和访问模式一致性;通过预热典型对象、固定属性顺序、避免动态修改和禁用with/eval/Proxy等陷阱,可使IC快速进入高效单态;用--trace-ic和%DebugPrint可验证状态。
    文章 · 前端   |  3星期前  |   321浏览 收藏
  • HTML中CSS大写文字技巧应用
    HTML中CSS大写文字技巧应用
    text-transform:uppercase仅改变英文字符的视觉渲染为大写,不修改DOM原始值,对中文、数字、标点无效;适用于p、div、span等文本元素,禁用于input/textarea等需数据一致性的场景。
    文章 · 前端   |  3星期前  |   321浏览 收藏
  • 识别WebGL中闭包引发的GC压力方法
    识别WebGL中闭包引发的GC压力方法
    闭包不直接造成GC压力,而是因意外延长局部变量生命周期使本该回收的对象滞留堆中;WebGL渲染循环中尤需警惕捕获大对象、频繁创建新闭包及隐式持有引用等问题。
    文章 · 前端   |  3星期前  |   321浏览 收藏
  • new操作符四步解析及myNew实现详解
    new操作符四步解析及myNew实现详解
    new操作符的模拟需四步:1.用Object.create(constructor.prototype)创建空对象并绑定原型;2.用constructor.apply(obj,args)绑定this并执行构造函数;3.若构造函数返回对象或函数则返回它,否则返回新对象;4.整合为myNew函数。
    文章 · 前端   |  4星期前  |   321浏览 收藏
  • CSS变量控制网格Gutter实现动态布局
    CSS变量控制网格Gutter实现动态布局
    能,但必须用gap配合带单位的CSS变量,且Safari14.1+才完整支持;gap不触发动画因规范未要求插值,变量须定义在作用域内并含单位(如12px),不可拼接单位或混用数字与单位。
    文章 · 前端   |  1个月前  |   321浏览 收藏
  • HTML5section标签和div有啥区别_语义化分区技巧【教程】
    HTML5section标签和div有啥区别_语义化分区技巧【教程】
    <section>本质是语义化区块,需有明确主题和标题,助读屏器与搜索引擎理解结构;<div>是无语义容器,专用于布局、JS锚点等无需语义的场景。
    文章 · 前端   |  1个月前  |   321浏览 收藏
  • Web Worker异步解析百万行Excel防卡顿方法
    Web Worker异步解析百万行Excel防卡顿方法
    根本原因是CPU密集型解析任务阻塞主线程,WebWorker是唯一可靠解法——它将解压、XML解析、类型推断等纯计算任务移至独立线程,确保UI持续响应。
    文章 · 前端   |  1个月前  |   321浏览 收藏
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
  • Golang深入理解GPM模型
    Golang深入理解GPM模型
    Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
    474次学习
查看更多
AI推荐
  • ljg-skills -
    ljg-skills
    ljg-skills 是李继刚开源的 AI 技能与提示词集合,面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板,适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
    2281次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    2088次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    2035次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    2245次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    2211次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码