前端技术文章

  • 如何利用 navigator.serviceWorker 拦截模块请求并实现自定义的模块联邦分发
    如何利用 navigator.serviceWorker 拦截模块请求并实现自定义的模块联邦分发
    ServiceWorker的fetch事件无法拦截模块联邦请求,因其仅捕获网络层请求,不干预运行时模块解析、shared协商、路径重写及JS缓存;可行方案是SW代理资源+客户端劫持Webpack运行时初始化。
    文章 · 前端   |  1个月前  |   230浏览 收藏
  • HTML鼠标悬停文字效果实现方法
    HTML鼠标悬停文字效果实现方法
    最稳妥方案是用:hover伪类配合display或visibility控制显隐:display兼容性好但触发重排,visibility保留占位不跳动;需同父容器、定位时父元素须设position:relative。
    文章 · 前端   |  1个月前  |   230浏览 收藏
  • Flex实现等高列布局方法
    Flex实现等高列布局方法
    使用Flexbox实现等高列只需父容器设置display:flex,子元素会自动拉伸对齐最高列。2.默认align-items:stretch使子项沿交叉轴填满容器高度。3.HTML结构为包含多个.column的.container容器。4.CSS中.container设为flex布局,.column添加样式如内边距和背景色。5.注意避免子元素设置float、absolute定位或固定height影响拉伸效果。6.确保min-height不覆盖stretch行为,注意嵌套flex布局的影响。7.Flex等
    文章 · 前端   |  1个月前  |   230浏览 收藏
  • React 实现随机词替换,TypeScript 类型安全详解
    React 实现随机词替换,TypeScript 类型安全详解
    本文详解如何在React+TypeScript项目中安全访问DOM元素的dataset属性,解决“Property'dataset'doesnotexistontype'EventTarget'”类型错误,并完整实现基于主题(忍者/宝可梦/太空)的文本单词随机替换功能。本文详解如何在React+TypeScript项目中安全访问DOM元素的`dataset`属性,解决“Property'dataset'do
    文章 · 前端   |  1个月前  |   230浏览 收藏
  • requestIdleCallback超时设置优化任务执行
    requestIdleCallback超时设置优化任务执行
    必须用timeout参数兜底,否则低性能设备或复杂页面下可能永远等不到空闲;回调中需通过deadline.didTimeout区分触发原因,并据此调整执行策略。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • Port.start 实现共享子线程与主页面长连接方法
    Port.start 实现共享子线程与主页面长连接方法
    port.start()并非开启长连接的方法,而是启用MessagePort消息接收队列的必要操作,需在获取port后显式调用以开始接收消息,尤其在未设置onmessage时;它属于MessageChannel通信机制,不涉及网络连接。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • CSS中:enabled与:disabled用法详解
    CSS中:enabled与:disabled用法详解
    应使用:enabled伪类选择实际可交互的表单控件,而非仅依赖元素名或[disabled]属性选择器;它动态反映浏览器运行时状态,适用于button、input(非hidden)、select、textarea等表单元素,不适用于div、span等非表单元素。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • JavaScript控制响应式菜单显示隐藏技巧
    JavaScript控制响应式菜单显示隐藏技巧
    本文讲解如何在响应式菜单中正确实现点击切换内容显示/隐藏,并确保屏幕尺寸变化时自动恢复默认可见状态,避免内联样式残留导致的显示异常。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • Middleman生成高效HTML站点技巧
    Middleman生成高效HTML站点技巧
    middlemanbuild生成的HTML没有样式或JS,是因为默认不自动编译前端资产;需启用:sprockets或手动运行webpack,确保资源路径正确且文件实际生成。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • Less列表交替背景色实现方法
    Less列表交替背景色实现方法
    Less中nth-child无法自动展开伪类,需用循环生成固定规则;如用.generate-stripes(@n,@i:1)配合递归和字符串拼接,在编译期输出前n项奇偶背景样式。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • HTML属性选择器使用方法详解
    HTML属性选择器使用方法详解
    CSS属性选择器用方括号[]匹配HTML元素属性,如[type="submit"]选type值完全等于"submit"的元素,支持^=、$=、*=等模式,优先级与class相同,data-属性搭配最安全。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • HTML页面切换动画怎么做【代码详解】
    HTML页面切换动画怎么做【代码详解】
    VueRouter切换时transition不生效,主要因router-view未被transition直接包裹、CSS类名未匹配Vue版本钩子(Vue2用v-前缀,Vue3默认fade-前缀)、路由组件非动态加载导致enter/leave钩子未触发。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • CSS如何控制多栏布局的间距?使用column-gap属性统一设置
    CSS如何控制多栏布局的间距?使用column-gap属性统一设置
    column-gap不生效是因为容器未启用多列模式;必须设置column-count或column-width等触发属性,且display需为multi-column,内容足够长,避免与gap混用,单位推荐rem,Safari≤14.1需加-webkit前缀。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • HTML中ul无序列表设计 HTML中ul标签list-style属性详解
    HTML中ul无序列表设计 HTML中ul标签list-style属性详解
    list-style是复合属性,等价于同时设置list-style-type、list-style-position和list-style-image;省略任一值则使用默认值(discoutsidenone),且list-style-image优先级高于type,加载失败即回退为无标记。
    文章 · 前端   |  2个月前  |   229浏览 收藏
  • floatleft横向排列技巧详解
    floatleft横向排列技巧详解
    float:left元素默认横向排列,堆成一列的主因是子项width为100%、父容器坍缩未清除浮动,或盒模型/空白符导致宽度超限;现代布局应优先选用flex或grid。
    文章 · 前端   |  2个月前  |   229浏览 收藏
查看更多
课程推荐
  • 前端进阶之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 工作流和沉淀团队常用智能体能力。
    4498次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    4177次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    4146次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    4372次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    4316次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码