前端技术文章

  • BOM操控浏览器地址栏方法详解
    BOM操控浏览器地址栏方法详解
    操作浏览器地址栏的核心在于window.location对象及HistoryAPI。1.window.location提供了读取和修改URL的功能,其属性如href、protocol、host等可获取或设置URL各部分,方法如assign()、replace()、reload()能实现页面跳转或重载;2.修改URL参数而不刷新页面可通过history.pushState()和history.replaceState()实现,前者添加新历史记录条目,后者替换当前条目;3.URLSearchParams用于安
    文章 · 前端   |  8个月前  |   498浏览 收藏
  • CSS定位元素导致父元素高度塌陷怎么解决
    CSS定位元素导致父元素高度塌陷怎么解决
    子元素使用position:absolute或float脱离文档流后,父元素无法感知其尺寸,导致高度塌陷。例如,当.child设置为absolute时,.parent因无其他常规流内容而高度为0。解决方法包括:1.为父元素设置min-height并配合relative定位;2.使用padding或占位元素撑高父容器;3.利用伪元素模拟子元素空间,如.parent::before添加不可见块级元素;4.改用transform实现偏移,避免脱离文档流。核心是通过结构或样式手段恢复父元素对子元素尺寸的感知。
    文章 · 前端   |  8个月前  |   解决方案 CSS定位 文档流 position:absolute 父元素高度塌陷 498浏览 收藏
  • HTML设置占位文字样式方法详解
    HTML设置占位文字样式方法详解
    要设置HTML占位文本样式,需使用CSS的::placeholder伪元素;1.使用input::placeholder或textarea::placeholder选择器定义颜色、字体、字号等文本样式;2.注意该伪元素仅支持文本相关CSS属性,不支持背景、边框、内边距等盒模型属性;3.为确保兼容性,现代项目通常无需添加-webkit-、-moz-等旧前缀,但需考虑老旧浏览器时可保留;4.避免将占位符用作唯一提示信息,应配合label标签提升可访问性;5.保持占位符文本简洁、对比度足够,并避免复杂动画或过度
    文章 · 前端   |  8个月前  |   498浏览 收藏
  • ASP.NETCoreMVC:视图传数据到控制器方法
    ASP.NETCoreMVC:视图传数据到控制器方法
    本文介绍了在ASP.NETCoreMVC应用中,如何通过HTML链接(<a>标签)将数据从视图传递到控制器。我们将演示如何使用asp-route-{parameter}属性在链接中附加数据,并在控制器操作方法中接收这些数据。通过清晰的代码示例和详细的解释,帮助开发者掌握这一常用的数据传递技巧。
    文章 · 前端   |  8个月前  |   498浏览 收藏
  • CSSflex-flow简化写法解析
    CSSflex-flow简化写法解析
    flex-flow是flex-direction与flex-wrap的简写属性,用于合并设置主轴方向和换行方式,默认值为rownowrap;例如flex-flow:rowwrap可实现横向排列并换行,比单独设置更简洁,适用于响应式布局。
    文章 · 前端   |  8个月前  |   498浏览 收藏
  • 事件循环与回调函数如何协作?
    事件循环与回调函数如何协作?
    JavaScript需要事件循环来处理回调函数,因为它是单线程语言,必须在不阻塞主线程的前提下调度异步任务。1.回调函数定义了异步操作完成后要执行的代码;2.事件循环作为调度员,确保回调在主线程空闲时有序执行;3.宏任务(如setTimeout)和微任务(如Promise.then)有不同优先级,微任务优先执行;4.事件循环流程为:执行同步代码→清空微任务队列→执行一个宏任务→重复循环;5.Promise和async/await是对回调的封装,提升可读性与维护性,但底层仍依赖事件循环机制。
    文章 · 前端   |  8个月前  |   498浏览 收藏
  • 如何获取CSS类data属性值
    如何获取CSS类data属性值
    本教程将指导您如何使用纯JavaScript,从一个同时拥有特定CSS类(如active)的HTML元素中,准确地提取其自定义数据属性(data-*)。我们将通过document.querySelector()选择符合条件的元素,并利用getAttribute()方法获取所需的数据。
    文章 · 前端   |  9个月前  |   498浏览 收藏
  • CSS响应式导航栏制作教程
    CSS响应式导航栏制作教程
    响应式导航栏通过Flexbox和媒体查询实现多设备适配,小屏显示汉堡菜单,大屏横向布局。1.HTML用nav、ul和div构建结构;2.CSS设flex布局与隐藏/显示切换;3.媒体查询在768px以下触发移动端样式;4.JavaScript控制菜单点击展开收起;5.注意定位、过渡与可访问性细节优化体验。
    文章 · 前端   |  9个月前  |   498浏览 收藏
  • 响应式弹窗CSS实现教程
    响应式弹窗CSS实现教程
    答案:响应式提示框需结合CSS定位与媒体查询。通过position:absolute和transform实现居中,用max-width、white-space处理内容溢出,::after伪元素创建箭头,不同屏幕下调整top/bottom及边框色改变箭头方向;小屏适配时可改用fixed定位或全宽布局,增强可读性与体验一致性。
    文章 · 前端   |  9个月前  |   CSS JavaScript 响应式 媒体查询 提示框 498浏览 收藏
  • CSS百分比padding实现等比布局方法
    CSS百分比padding实现等比布局方法
    利用CSS百分比padding实现等比例元素,核心是padding的百分比基于父容器宽度计算,通过设置padding-bottom与width配合创建固定宽高比盒子,如16:9对应56.25%、4:3对应75%、1:1对应100%,结构上外层容器relative定位并设padding-bottom,内层absolute定位填充,适用于响应式图片、视频嵌入等场景,兼容性好,虽有aspect-ratio新属性但仍为旧浏览器可靠方案。
    文章 · 前端   |  9个月前  |   498浏览 收藏
  • JavaScript防抖技巧:事件循环实战解析
    JavaScript防抖技巧:事件循环实战解析
    防抖通过setTimeout延迟执行函数,并在每次触发时清除前一定时器,确保函数在指定时间无新触发后执行。核心是利用事件循环的宏任务调度机制,不断取消和重新安排任务。实现上需闭包保存定时器ID,每次调用先清除旧定时器,再设置新定时器,最终执行函数时保持正确的this上下文和参数传递。应用场景包括搜索建议、表单验证、窗口resize等高频事件,解决性能压力和用户体验问题。与节流不同,防抖关注最后一次触发,适用于“等待停止”场景;节流则按固定频率执行,适用于“持续触发”场景。实现时需注意this上下文绑定、立
    文章 · 前端   |  9个月前  |   498浏览 收藏
  • Proxy实现不可变数据存储方法
    Proxy实现不可变数据存储方法
    通过Proxy拦截操作并返回新对象实现不可变性,结合Reflect确保行为一致,提供update方法安全更新状态,原始数据始终不被修改。
    文章 · 前端   |  9个月前  |   498浏览 收藏
  • CSStransition实现宽高动画技巧
    CSStransition实现宽高动画技巧
    通过设置CSStransition属性可实现宽高平滑动画,需指定width和height的过渡时间与缓动函数。1.基础语法中,在:hover等状态变化时触发transition,使尺寸变化流畅。2.可同时过渡多个属性,推荐使用all或分别定义,配合JavaScript类切换触发动画。3.注意初始和目标值必须为具体数值,避免auto或display:none导致过渡失效。4.实用技巧包括结合overflow:hidden与opacity实现自然展开收起效果,常用于下拉菜单或折叠面板。正确配置后浏览器自动渲染
    文章 · 前端   |  9个月前  |   498浏览 收藏
  • JavaScript垃圾回收机制与内存泄漏防范技巧
    JavaScript垃圾回收机制与内存泄漏防范技巧
    JavaScript垃圾回收依赖标记-清除算法,从根对象遍历并标记活跃对象,清除不可达对象。引用计数因循环引用问题已少用。内存泄漏常见原因包括:1.意外的全局变量,应使用严格模式避免;2.未清理的事件监听器,需显式解绑;3.闭包长期持有外部变量,应避免引用大型对象;4.定时器未清除,组件销毁时应清理;5.缓存无限制增长,宜用WeakMap/WeakSet。通过ChromeDevTools的Memory和Performance面板可检测泄漏,保持最小引用与及时清理可有效预防问题。
    文章 · 前端   |  9个月前  |   498浏览 收藏
  • CSS制作圆形椭圆教程详解
    CSS制作圆形椭圆教程详解
    创建圆形需元素为正方形且border-radius设为50%;创建椭圆则元素为长方形并同样设置border-radius:50%,百分比分别基于宽高计算,形成闭合曲线。
    文章 · 前端   |  9个月前  |   498浏览 收藏
查看更多
课程推荐
  • 前端进阶之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 工作流和沉淀团队常用智能体能力。
    4393次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    4064次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    4045次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    4229次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    4201次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码