前端技术文章

  • CSS图片浮动布局技巧:环绕与间距控制
    CSS图片浮动布局技巧:环绕与间距控制
    使用CSS的float属性可实现图片环绕文本效果,通过设置float:left或right使文字围绕图片排列,并用margin控制间距;为避免布局错乱,需添加clear:both清除浮动影响;在响应式设计中,可通过媒体查询在小屏设备上取消浮动,使图片独占一行,确保排版美观。
    文章 · 前端   |  1个月前  |   221浏览 收藏
  • HTML文章版权标注方法|如何正确标注版权归属
    HTML文章版权标注方法|如何正确标注版权归属
    最稳妥的HTML版权声明写法是用全局<footer>包裹<p>,年份动态生成,©用&copy;实体,多语言页需匹配lang属性并分版本书写。
    文章 · 前端   |  1个月前  |   221浏览 收藏
  • sticky固定头部不遮挡内容方法
    sticky固定头部不遮挡内容方法
    使用position:sticky替代fixed可让页眉随内容自然滚动,同时在视口顶部自动“吸附”,既保持视觉固定效果,又完全避免遮挡滚动区域、阻断鼠标滚轮交互的问题。使用`position:sticky`替代`fixed`可让页眉随内容自然滚动,同时在视口顶部自动“吸附”,既保持视觉固定效果,又完全避免遮挡滚动区域、阻断鼠标滚轮交互的问题。在构建全屏高度(100vh)布局时,开发者常误用position:fixed实现头部固定,
    文章 · 前端   |  1个月前  |   221浏览 收藏
  • JavaScript错误追踪:前端日志系统指南
    JavaScript错误追踪:前端日志系统指南
    前端JavaScript错误追踪需建立闭环机制,首先通过window.onerror捕获运行时错误,获取错误信息、文件、行列号等数据,注意跨域脚本需配置crossorigin和CORS;其次利用window.onunhandledrejection监听未捕获的Promise异常,统一包装拒绝原因并上报;为还原现场,应采集堆栈信息、sourcemap反查源码位置,并附加浏览器、操作系统、URL、网络状态及操作历史等上下文,同时脱敏敏感信息;上报策略采用批量异步、设置采样率、优先级分级,结合本地缓存实现离线补
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • watchEffect监听定时器防卡死方法
    watchEffect监听定时器防卡死方法
    不能直接用watchEffect监听定时器ID,而应监听isActive、intervalMs等响应式状态,每次触发前清除旧定时器,满足条件时新建,并在清理函数中再次清除,避免堆积导致卡死。
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • Vue渲染慢?虚拟DOM优化技巧全解析
    Vue渲染慢?虚拟DOM优化技巧全解析
    Vue页面更新慢的根源在于响应式追踪、虚拟DOMdiff、组件结构和浏览器渲染四层耦合;需通过合理key、计算属性、shallowRef、markRaw、组件拆分、virtualscroll及CSS优化等手段精准优化。
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • CSS导航栏实战:打造响应式菜单
    CSS导航栏实战:打造响应式菜单
    使用类选择器如.menu-toggle和.nav-menu.active控制导航显示状态,结合属性选择器input[type="checkbox"]:checked+.nav-menu实现无JS菜单开关,通过媒体查询与后代选择器@media(max-width:768px)调整移动端垂直布局、隐藏主菜单并优化间距,实现响应式导航。
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • XSS防护全攻略:JavaScript安全指南
    XSS防护全攻略:JavaScript安全指南
    防范XSS攻击需从输入验证、输出编码和CSP策略入手,严格过滤用户输入,使用textContent替代innerHTML,配合DOMPurify处理富文本,启用CSP限制脚本来源,针对存储型、反射型和DOM型XSS采取差异化防护,并利用React、Vue等框架的内置转义机制及WAF等工具实现多层防御。
    文章 · 前端   |  2个月前  |   XSS防护 220浏览 收藏
  • HTML轮播图制作教程:简单实现幻灯片效果
    HTML轮播图制作教程:简单实现幻灯片效果
    纯CSS轮播可用input[type="radio"]配合:checked实现显隐切换,或用transform:translateX()加animation实现滑动效果,需注意容器溢出隐藏、图片尺寸控制及用户交互暂停动画。
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • CSS背景图平滑切换方法详解
    CSS背景图平滑切换方法详解
    答案:CSS中background-image不支持直接过渡,但可通过分层和opacity实现视觉平滑切换。1.使用双层结构配合opacity过渡实现淡入淡出;2.利用伪元素减少HTML标签,保持结构简洁;3.结合JavaScript控制类切换,适用于交互场景;4.注意图片预加载、性能优化及内存管理,确保流畅体验。
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • 阿尔比恩异教徒要塞位置及探索指南
    阿尔比恩异教徒要塞位置及探索指南
    <title>标签是搜索引擎判断页面主题的首要依据,直接决定页面能否被正确识别、收录和排序;其语义权重远超title属性、h1等,且必须真实存在于HTML源码中、长度适配、语言匹配、动态更新及时。
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • css 内边距和外边距混乱怎么办_box-sizing 与 padding margin 检查
    css 内边距和外边距混乱怎么办_box-sizing 与 padding margin 检查
    元素尺寸异常主因是box-sizing未统一为border-box,导致content-box下padding/border额外增加;其次margin合并、单位混用、定位基准缺失及Flex/Grid中margin行为变化共同引发布局混乱。
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • CSS2与CSS3伪元素对比解析
    CSS2与CSS3伪元素对比解析
    伪元素可用:before,但推荐::before;CSS2旧伪元素单双冒号等效,CSS3新伪元素如::selection、::placeholder必须用双冒号,单冒号会静默失效。
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • CSSTransition为何无法实现列表排序动画?FLIP+Grid解决方案
    CSSTransition为何无法实现列表排序动画?FLIP+Grid解决方案
    order不可动画因其不在CSS可动画属性列表中,浏览器不监听也不插值;应改用grid-column/grid-row等可插值属性配合transform或FLIP模式实现平滑过渡。
    文章 · 前端   |  2个月前  |   220浏览 收藏
  • HTML中dir属性控制文字方向的三个取值是:ltr、rtl 和 inherit。
    HTML中dir属性控制文字方向的三个取值是:ltr、rtl 和 inherit。
    dir属性仅支持ltr、rtl、auto三个值:ltr为默认值,用于英语等左到右语言;rtl用于阿拉伯语等右到左语言,影响标点、光标、剪贴板等底层行为;auto依赖首字符判断方向但极易误判,线上项目不推荐使用。
    文章 · 前端   |  2个月前  |   220浏览 收藏
查看更多
课程推荐
  • 前端进阶之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 工作流和沉淀团队常用智能体能力。
    4497次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    4177次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    4146次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    4372次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    4314次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码