前端技术文章
-
- CSS多级下拉导航栏实现方法
- 使用Flex和Grid布局结合hover实现多级下拉导航栏,通过语义化HTML构建结构,CSS中利用flex实现主菜单横向布局,grid控制子菜单对齐,position定位配合hover触发显示,确保层级关系清晰且视觉一致,适合无JavaScript的初级项目实践。
- 文章 · 前端 | 7个月前 | 480浏览 收藏
-
- JavaScript调试技巧:源码映射配置详解
- <p>SourceMap是提升JavaScript调试效率的关键工具,它通过映射压缩或编译后代码与原始源码的位置关系,使开发者能在浏览器中直接查看和调试原始代码。其核心为JSON文件,包含version、sources、names、mappings和file等字段。在Webpack中可通过devtool配置eval-source-map、cheap-module-source-map、source-map等类型,分别适用于开发或生产环境;Vite则在vite.config.js中通过build
- 文章 · 前端 | 7个月前 | 480浏览 收藏
-
- CSS中white-space属性详解及应用
- white-space属性通过控制空白符处理和换行行为,解决文本布局中的格式丢失、意外换行与溢出问题。其常用值如normal(合并空格、自动换行)、nowrap(禁止换行)、pre(保留所有空白)、pre-wrap(保留空白且允许换行)、pre-line(合并空格但保留换行)分别适用于代码展示、用户输入处理、单行标题等场景。常与overflow:hidden和text-overflow:ellipsis配合实现单行省略效果,三者协同可优雅处理文本溢出。选择pre-wrap而非pre在于兼顾格式保留与响应式
- 文章 · 前端 | 7个月前 | 480浏览 收藏
-
- CSS设置元素尺寸:min-widthmax-width教程
- 答案:CSS的min-width、max-width、min-height和max-height属性用于控制元素尺寸范围。1.min-width和max-width确保容器在不同屏幕下自适应且不超出合理宽度,如设置容器最大1200px、最小320px;2.min-height和max-height保证内容区域有足够高度并防止溢出,如卡片最小200px、最大400px并滚动显示超内容;3.实际使用中应避免与固定宽高冲突,配合overflow提升体验,适用于响应式布局中的图片、侧边栏、弹窗等场景。
- 文章 · 前端 | 7个月前 | 480浏览 收藏
-
- Sass模块化开发:构建CSS架构指南
- 本教程旨在指导开发者如何通过Sass的局部文件(Partials)功能,将庞大的样式表拆分成多个逻辑清晰、易于维护的小文件,并通过主文件统一导入并编译成一个单一的CSS文件。这种方法显著提升了代码的可读性、可维护性和团队协作效率,是构建大型前端项目的关键实践。
- 文章 · 前端 | 7个月前 | 480浏览 收藏
-
- CSS卡片3D翻转动画实现教程
- 核心是利用perspective、transform-style和backface-visibility配合@keyframes实现3D翻转。首先构建包含前后两面的卡片结构,设置外层容器的perspective营造3D视觉,添加transform-style:preserve-3d确保子元素处于3D空间,通过backface-visibility:hidden隐藏元素背面。正面初始不旋转,背面使用transform:rotateY(180deg)预设翻转状态。利用@keyframes定义从rotateY(
- 文章 · 前端 | 7个月前 | 480浏览 收藏
-
- JS转换EU日期为时间戳方法
- 本文旨在解决JavaScript中将dd/mm/yyyyhh:mm:ss格式的欧洲时间字符串转换为Unix时间戳时遇到的常见问题。由于JavaScript的Date对象在直接解析此类字符串时,可能将其误解为mm/dd/yyyy格式,导致getTime()方法返回错误的时间戳。文章将详细介绍一种手动解析字符串组件并利用Date构造函数特定重载的解决方案,以确保日期和时间被正确识别并转换为准确的时间戳。
- 文章 · 前端 | 8个月前 | 480浏览 收藏
-
- CSS-in-JS动态样式管理技巧分享
- CSS-in-JS通过将样式写入JavaScript提升组件样式动态性与可维护性,主流方案包括styled-components、emotion和linaria。styled-components使用模板字符串支持props动态样式,emotion提供cssprop和styled两种写法且性能优越,linaria在编译时提取CSS以消除运行时开销。可通过props、state或theme实现样式变化,如styled-components中${props=>props.primary?'blue':'
- 文章 · 前端 | 8个月前 | 480浏览 收藏
-
- WebComponents跨框架复用技巧揭秘
- WebComponents通过CustomElements和ShadowDOM实现跨框架复用,支持属性通信与事件交互,结合ES模块打包可构建稳定通用的企业级组件。
- 文章 · 前端 | 8个月前 | 480浏览 收藏
-
- HTML5WebGL入门:3D开发教程详解
- 答案:使用HTML5的<canvas>结合JavaScript调用WebGLAPI可实现3D图形渲染,需编写GLSL着色器并管理缓冲区绘制几何体,但推荐初学者通过Three.js等高级库快速构建场景以提升开发效率。
- 文章 · 前端 | 8个月前 | HTML5Canvas Three.js WebGL 着色器 3D图形渲染 480浏览 收藏
-
- JS协程实现与调度机制解析
- JavaScript通过生成器函数function*和yield实现协程,调用生成器函数返回生成器对象,执行时遇到yield暂停并返回值,通过next()方法恢复执行且可传参,实现双向通信;生成器保持内部状态,支持惰性求值和分步执行,常用于异步流程控制;为调度生成器协程,需编写执行器函数run,其递归调用next()并处理yield出的Promise,实现类似async/await的异步串行化执行,从而完成合作式多任务调度。
- 文章 · 前端 | 8个月前 | 480浏览 收藏
-
- CSS中max-width和min-width怎么用
- 使用max-width和min-width可控制元素尺寸范围,防止布局错乱。max-width限制最大宽度,避免内容溢出,如图片设置max-width:100%可自适应父容器;min-width确保最小宽度,提升小屏下按钮、输入框的可操作性。两者结合可实现弹性布局,配合box-sizing:border-box防止边距溢出,同时在flexbox或grid中需注意其对子元素尺寸的影响。响应式图片除max-width外,还应结合srcset或picture元素提供多分辨率版本。自适应按钮可通过min-widt
- 文章 · 前端 | 8个月前 | CSS 响应式布局 480浏览 收藏
-
- JavaScript动态元素与状态管理教程
- 本教程探讨了在JavaScript中动态创建DOM元素并有效管理其“活动”状态的策略。通过维护对当前可操作元素的直接引用,并适时更新事件监听目标或使用事件委托,我们可以确保新创建的元素能够响应用户交互,同时保留旧元素的状态,避免程序崩溃,实现灵活的DOM操作。
- 文章 · 前端 | 8个月前 | 480浏览 收藏
-
- JavaScriptconfirm控制元素显示方法
- 本教程详细介绍了如何利用JavaScript的confirm()方法,根据用户的确认选择来动态控制页面元素的显示。通过一个实际案例,演示了如何隐藏一个链接或div元素,直到用户在confirm弹窗中点击‘确定’后才将其显示,从而实现如同意隐私政策等二次确认机制,确保用户意图明确。
- 文章 · 前端 | 8个月前 | 480浏览 收藏
查看更多
课程推荐
-
- 前端进阶之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 工作流和沉淀团队常用智能体能力。
- 4435次使用
-
- MELO音乐
- MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
- 4081次使用
-
- UniScribe
- UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
- 4069次使用
-
- 剧云
- 剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
- 4255次使用
-
- 万象有声
- 万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
- 4226次使用

