前端技术文章
-
- CSS鼠标指针样式设置教程
- CSS的cursor属性用于定义鼠标指针在元素上的样式，以提供直观反馈或增强体验。1.使用预定义值如pointer、text、wait等可快速设置指针样式；2.通过url()函数可使用自定义图像作为指针，并指定热点位置；3.可结合JavaScript动态改变指针样式；4.自定义指针不显示时需检查路径、格式、权限、缓存及优先级问题；5.优化用户体验应保持一致性、提供反馈、确保清晰度与性能、兼顾可访问性并避免滥用。
- 文章 · 前端 | 1年前 | 用户体验 鼠标指针 CSScursor属性 自定义指针 预定义值 495浏览 收藏
-
- HTML中scale()缩放属性详解
- CSS通过transform:scale()实现元素缩放，1.基本用法是设置x、y轴缩放比例，如scale(2)或scale(0.5,1.5)，单独写一个参数则x和y等比缩放；2.常用于交互反馈如按钮悬停放大并配合transition实现平滑动画，也用于响应式设计中的图标适配；3.相较于width/height修改和zoom属性，scale不触发页面重排且性能更优；4.注意缩放后元素可能超出容器需调整overflow或容器尺寸以避免遮挡问题。
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- BOM本地存储操作技巧详解
- localStorage与sessionStorage的核心差异在于数据生命周期和作用域。1.localStorage存储的数据是持久化的，除非手动清除，否则始终存在；2.sessionStorage则仅在当前浏览器会话期间有效，关闭标签页后数据会被清除；3.两者均遵循同源策略、只能存储字符串，并共享相同的API；4.选择依据为数据是否需要长期保留：长期用localStorage，临时用sessionStorage。此外，使用时需注意：5.存储复杂数据类型时需用JSON.stringify()转换；6.存
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- CSS实现树形结构层级缩进样式，通常通过使用伪元素（如::before或::after）和递增的padding-left或margin-left来模拟层级效果。以下是实现方法和示例代码：一、HTML结构<ulclass="tree"><li>根节点<ul><li>子节点1<ul><li>子节点1-1</li><
- 核心思路是利用盒模型属性结合CSS变量实现动态层级缩进，并通过伪元素和定位技巧增强视觉效果。1.使用padding-left或margin-left控制缩进，配合CSS变量（如--indent-unit和--level）实现动态计算缩进值，提升灵活性；2.通过data-level属性或内联样式传递层级信息，结合calc()函数动态调整缩进量，便于统一配置和维护；3.使用伪元素（::before、::after）和绝对定位添加连接线，增强树形结构的层级关系展示；4.通过伪元素或图标库添加展开/折叠图标，提升
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- CSShover效果详解与实用技巧
- CSS中hover伪类的用法是通过选择器:hover来改变元素在鼠标悬停时的样式。1）基本用法如button:hover{background-color:#ff0000;color:#ffffff;}可改变按钮颜色。2）高级技巧包括使用transition属性实现平滑过渡，如button{transition:background-color0.3sease;}和button:hover{background-color:#ff0000;}。3）还可用于显示隐藏元素，如.container:hover.
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- HTML中height属性详解及百分比设置方法
- height属性在HTML中用于设置元素的高度。1.它可以使用像素（px）或百分比（%）设置。2.百分比高度基于父元素的高度计算。3.若父元素高度未设置，百分比高度可能不起作用。4.使用vh单位、Flexbox或Grid布局可解决此问题。5.避免过度使用百分比高度，使用min-height或max-height，并测试不同设备以优化性能。
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- HTML如何实现悬停效果？hover使用教程
- 实现网页悬浮效果最常用的方法是使用CSS的:hover伪类，它能在鼠标悬停时动态改变元素样式。一、基本用法是在选择器后加:hover并定义悬停样式，如按钮变色；二、结合transition属性可实现平滑过渡，使颜色或大小变化更自然；三、在复杂结构中可通过嵌套选择器实现父元素悬停影响子元素，如卡片布局中的文字显示；四、移动端需注意兼容性问题，因触摸屏无悬停动作，可用JavaScript模拟或采用点击触发替代方案。掌握这些要点能有效提升交互体验。
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- uni-app开发规范与注意事项详解
- uni-app开发需要严格的规范和注意事项，因为它是跨平台框架，需确保代码在不同平台兼容，且规范代码易于维护和扩展。1.遵循ESLint等代码风格规范，确保代码一致性和可读性。2.合理组织项目文件结构，确保每个文件职责明确。3.使用统一的命名规则，如驼峰命名法，帮助团队理解代码结构。
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- ArrayBuffer基础解析：JavaScript数据存储入门
- ArrayBuffer在JavaScript中用于表示固定长度的原始二进制数据缓冲区。1)创建ArrayBuffer并通过视图操作，如Uint8Array。2)应用于图像处理，通过CanvasAPI渲染。3)使用slice方法调整大小。4)注意不同视图间的内存共享，修改会相互影响。
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- CSS外边距内边距设置全解析
- 在CSS中，margin用于控制元素与其他元素之间的距离，padding用于控制元素内容与边框之间的距离。1.margin设置：一个值设置所有方向；两个值设置上下和左右；三个值设置上、左右、下；四个值分别设置上、右、下、左。2.padding设置方式与margin类似。3.避免margin合并问题，可使用padding或BFC。4.使用box-sizing:border-box;使宽高包括padding和border。5.性能优化时，统一使用类名设置margin和padding。合理使用margin和pa
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- HTML导航栏这样搞！手把手教你用nav标签轻松搞定高效导航
- 使用HTML创建导航栏推荐采用ul+li结构包裹在nav标签内，1.基本结构用ul+li搭建更清晰且方便CSS美化；2.nav标签具备语义化优势，提升SEO和可访问性；3.推荐使用flex布局进行样式处理，实现水平排列与悬停效果；4.需添加aria-label属性并考虑响应式设计适配移动端。
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- JS中的map方法怎么用？这些实战案例快收藏！
- <p>JavaScript中的map方法用于对数组每个元素进行处理并返回新数组。map是数组方法，通过传入函数处理每个元素，返回新数组，原数组不变，例如numbers.map(n=>n*2)返回新数组。常见用途包括：1.数据转换，如提取对象字段；2.不推荐直接调用异步函数，应结合Promise.all使用；3.React中配合JSX渲染列表。注意点有：不修改原数组、不能中途break、别滥用做副作用、必须返回值构建新数组。掌握map能提升代码简洁性和可读性。</p>
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- 手把手教你用HTML+CSS轻松打造炫酷标签页（Tabs）
- 做标签页的关键在于结构清晰与逻辑简单。首先，HTML部分通过按钮和内容区域构建基本结构，每个按钮绑定函数openTab并传入对应标签ID。其次，CSS控制显示，用.active类切换内容展示，默认隐藏非激活区域。接着，JavaScript处理切换逻辑，包括清除原有状态并为当前按钮和内容添加激活样式。最后，可通过DOM加载事件默认显示第一个标签。
- 文章 · 前端 | 1年前 | 495浏览 收藏
-
- HTML引入CSS用还是?哪种方式更香？
- <link>标签用于外部引入CSS文件，适合中大型项目，代码分离清晰、复用性强、便于缓存；<style>标签用于内嵌样式，适合简单页面或局部样式控制，不利于复用和维护；行内样式仅建议临时使用。优先推荐<link>标签，其次为<style>标签，行内样式应尽量少用。
- 文章 · 前端 | 1年前 | 495浏览 收藏
查看更多
课程推荐
-
- 前端进阶之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推荐
-
- SuperCLUE
- SuperCLUE是权威的中文大语言模型综合评测基准，涵盖语言理解、知识应用、AI Agent智能体及安全性等12项核心能力。通过多轮对话与客观测试，定期发布榜单与技术报告，为模型研发、优化及行业选型提供科学依据。
- 147次使用
-
- C-Eval
- 深入了解C-Eval中文评估套件，涵盖52个学科与4级难度。本文详解其功能特点、Zero-shot/Few-shot使用方法及代码示例，助您全面评测LLM中文理解与泛化能力。
- 74次使用
-
- ClickPrompt
- ClickPrompt是一款专为AI提示词编写者设计的开源在线工具，支持Stable Diffusion绘图、ChatGPT对话及GitHub Copilot代码辅助。提供Prompt自动生成、一键运行、社区分享及可视化优化功能，帮助用户高效获取精准AI输出。
- 36次使用
-
- PromptHero
- PromptHero是专业的AI提示词搜索引擎与优化平台，支持Stable Diffusion、Midjourney等主流模型。提供海量提示词库、分类搜索、在线课程及社区互动，助力用户高效生成高质量AI图像与文本。
- 19次使用
-
- Stable Diffusion Prompt Book
- 深入解析OpenArt推出的Stable Diffusion Prompt Book，这本免费的开源提示词指南涵盖从基础语法到高级技巧，提供风格化词库与参数建议，助您优化AI绘画生成效果。
- 21次使用
