前端技术文章
-
- HTML实现网页背景色的定时随机切换,主要依赖于JavaScript来动态修改CSS样式。以下是详细的步骤和代码示例:✅ 实现思路使用 HTML:创建一个基本的网页结构。使用 CSS:可以定义一些基础样式(可选)。使用 JavaScript:生成随机颜色。定时器(setInterval)控制切换频率。修改 document.body.style.backgroundColor 来改变背景色。📄 示
- 用setInterval+HSL随机色相(0–360)配固定饱和度70%、明度85%实现柔和背景切换,间隔3000–8000ms,添加鼠标悬停暂停、卸载前清除定时器,并预设CSStransition确保淡入淡出生效。
- 文章 · 前端 | 1个月前 | 163浏览 收藏
-
- HTML渐变背景CSS实现方法详解
- 最直接的写法是用background-image:linear-gradient()给body或容器设渐变背景;需配background-color降级,避免用background简写覆盖,并注意浏览器兼容性与移动端渲染问题。
- 文章 · 前端 | 1个月前 | 260浏览 收藏
-
- CSSGrid页头布局实战技巧
- CSSGrid实现复杂页头需在header容器设display:grid和grid-template-areas(带引号多行声明),子元素grid-area值须严格匹配;响应式需重写entireareas;吸顶用position:sticky于子行而非整个header;box-sizing:border-box必须统一。
- 文章 · 前端 | 1个月前 | 425浏览 收藏
-
- HTML表单如何追踪用户视线?
- HTML表单无法直接获取视线轨迹,需用mousemove、focus/blur、scroll等代理信号推测注意力;应避免误用IntersectionObserver,聚焦字段级行为链聚合与合理埋点。
- 文章 · 前端 | 1个月前 | 224浏览 收藏
-
- HTML如何实现二维码扫描|前端扫码方法详解
- HTML无法直接扫码,需用JavaScript调用摄像头:通过navigator.mediaDevices.getUserMedia获取视频流,用jsQR等库逐帧解码二维码;须控制帧率、适配分辨率、及时关闭媒体轨道,并确保HTTPS环境与权限处理。
- 文章 · 前端 | 1个月前 | 188浏览 收藏
-
- CSS自动填充网格布局技巧
- auto-fit只创建有内容的轨道并拉伸填满容器,auto-fill则无论内容多少都按minmax()尽可能预留全部轨道,导致空列和布局错位。
- 文章 · 前端 | 1个月前 | 242浏览 收藏
-
- 相对路径引用CSS文件的正确写法与注意事项
- 正确引用外部CSS需根据HTML与CSS文件的相对位置使用路径。同一目录用href="style.css",子目录用href="css/style.css",上级目录用href="../style.css",多级跳转如href="../../assets/css/main.css";注意大小写敏感、使用正斜杠/、避免以/开头导致根路径误用,并通过开发者工具Network面板验证加载情况。
- 文章 · 前端 | 1个月前 | 377浏览 收藏
-
- HTML中的manifest.json文件主要用于定义PWA(渐进式网页应用)的元信息,如应用名称、图标、启动URL等。不过,manifest.json本身并不支持直接配置“快捷方式”(shortcuts),这是浏览器对PWA的一种扩展功能,需要结合其他技术实现。但如果你是指如何在PWA中添加应用快捷方式入口(即用户点击桌面或开始菜单时能直接启动应用的快捷方式),那么你需要使用 Web App M
- shortcuts字段必须是顶层非空数组,每项须含name和url(相对路径),且url需符合scope范围;Android要求显式配置icons,否则显示空白。
- 文章 · 前端 | 1个月前 | 288浏览 收藏
-
- CSS全屏切换效果:vh与vw构建幻灯片
- 根本原因是移动端浏览器地址栏收放导致vh动态变化,应改用min-height:100vh+height:100%、JS同步--vh变量、监听resize/orientationchange事件并防抖处理,确保全屏体验稳定。
- 文章 · 前端 | 1个月前 | 133浏览 收藏
-
- JIT编译器热点优化与去优化解析
- JIT优化不是“一劳永逸”因为其依赖的运行时推测信息可能失效,一旦假设被违反(如类型变化、类加载、虚方法目标变更等),必须执行去优化(deoptimization)回退到解释执行。
- 文章 · 前端 | 1个月前 | 226浏览 收藏
-
- CSS移动端字体闪烁解决方法
- font-display:swap需配合preload、font-size-adjust和min-height容器兜底才能缓解移动端CLS,单独使用反而加剧布局跳动。
- 文章 · 前端 | 1个月前 | 476浏览 收藏
-
- CSS不规则格子布局实现方法
- 优先用grid-column和grid-row手动控制每个格子的起止线;grid-template-areas仅适用于语义固定、命名稳定的布局场景。
- 文章 · 前端 | 1个月前 | 182浏览 收藏
-
- HTML画中画标题设置与API详解
- 画中画标题样式受限,只能通过video::picture-in-picture-title伪类调整color和font-family等极少数属性;1.浏览器限制样式是为了安全,防止伪造系统界面进行钓鱼等恶意行为;2.保持用户体验一致性,确保PiP窗口在不同网站间外观统一、易于识别和操作;3.技术上因PiP窗口由浏览器原生UI层渲染,网页CSS控制能力本就有限;4.标题内容应通过<video>标签的title属性设置,以确保清晰传达视频信息;5.优化PiP体验可从提升视频质量、优化title文案
- 文章 · 前端 | 1个月前 | 289浏览 收藏
-
- 用export构建高效异步业务流系统
- 构建高性能业务流模块系统应以ES6模块静态导出为核心:用命名导出封装细粒度异步单元,export*聚合领域能力,default导出组合流程模板,配合dynamicimport实现按需加载。
- 文章 · 前端 | 1个月前 | 343浏览 收藏
-
- 语义化图片布局技巧与优化方法
- 正确使用HTML标签和属性实现图片语义化布局,可提升可访问性、SEO与代码维护性。1.内容型图片用<img>配alt描述,如产品图;2.装饰性图片通过CSSbackground-image实现;3.复杂图表结合aria-describedby或figure与figcaption提供详细说明;4.响应式中利用srcset、sizes优化加载,配合loading="lazy"提升性能;5.优先使用WebP等现代格式并通过<picture>回退;6.alt文本需具体简
- 文章 · 前端 | 1个月前 | html 445浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 485次学习
-
- Golang深入理解GPM模型
- Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
- 474次学习
查看更多
AI推荐
-
- ljg-skills
- ljg-skills 是李继刚开源的 AI 技能与提示词集合,面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板,适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
- 86次使用
-
- MELO音乐
- MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
- 107次使用
-
- UniScribe
- UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
- 99次使用
-
- 剧云
- 剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
- 243次使用
-
- 万象有声
- 万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
- 249次使用

