HTML / CSSAI大前端
前端设计与布局常用术语中英对照速查表
文章目录 🧭 前端设计与布局常用术语速通指南 🧱 一、基础结构类术语 1️⃣ 容器（Container） 2️⃣ 布局（Layout） 3️⃣ 侧栏 / 顶栏 / 底栏 🎨 二、视觉与层次类术语 4️⃣ 卡片 / 面板（Card / Panel） 5️⃣ 模态框 / 弹窗（Modal / Dialog） 6️⃣ 层级（Z-index / Layer） 7️⃣ 阴影（Shadow） 8️⃣ 圆…
分类：编程语言 · HTML / CSS
HTML / CSS大前端
前端如何实现记住密码功能
我们在访问网站的时候，发现很多的登录页面都是有记住密码的功能的。 如 gitee 码云 的登录页面： ![前端实现 [记住密码] 功能](https://qiniu.meowparty.cn/coder.2023/2026-04-06/f92810a0891242169364d1be2408ebff.png) 一、核心实现原理：不是记住，而是'提示填充' 首先要澄清一个常见的误解：**前端的'记住…
HTML / CSS大前端
CSS 基础语法与常见样式详解
CSS 的介绍 CSS(Cascading Style Sheet)，层叠样式表，用于控制页面的样式。CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。简单理解，CSS 就是类似于对页面进行"化妆"，让页面变得更加好看。 基本语法规范 选择器+{一条/N 条声明} 1、选择器决定针对谁修改 (找谁)；2、声明决定修改啥 (干啥)；3、声明的属性…
HTML / CSS大前端
CSS 样式基础与界面布局实战指南
!请添加图片描述 前言 在网页开发领域，**CSS（层叠样式表，Cascading Style Sheets）** 是让网页从'单调结构'走向'美观交互'的关键技术：如果把 HTML 比作搭建网页骨架的'砖瓦'，CSS 就是定义'外观风格'与'空间布局'的'设计师'——它能为网页赋予色彩、字体、间距、动画等视觉表现，让页面从'能用'真正升级为'好看且易用'。 对于想要入门前端开发，或是希望系统提升…
HTML / CSS大前端
前端图片加载失败与裂图原因深度解析
在前端开发过程中，我们几乎都遇到过这种情况： 页面中某张图片加载不出来，显示成一个小小的'裂图'图标。 这看似简单的问题，实际上可能由多种原因造成，尤其是在 HTTPS 环境下，**混合内容机制（Mixed Content）** 是最常见、也最容易被误解的根源之一。 将带你系统梳理裂图的各种原因、排查思路，并重点讲清楚混合内容的原理与浏览器行为。 一、什么是'裂图'？ '裂图'（broken…
HTML / CSS大前端
前端三剑客：HTML、CSS、JavaScript 关系详解
综述由AI生成HTML、CSS、JavaScript 是前端开发的三兄弟。我们可以用'网页的三层架构'来通俗理解，三者分工明确、协同工作，共同构建出完整且交互丰富的网页。 精美的网页如果比作是一栋功能完备的房屋，那么 HTML 就是这栋房子坚实的砖混框架与墙体结构，它划定了房间的格局、门窗的位置，是房屋能立起来的基础骨架；CSS 是房屋的装修装饰 —— 从墙面的乳胶漆、地板的材质，到家具的风格、软装的搭配，让房…
HTML / CSSAI大前端
使用 Figma-MCP 与 Claude Code 还原 UI 设计图
本轮目标 本轮目标是制作数字化大屏的一个前端组件，要求和 UI 设计图还原度达到 1:1。  本轮目标需要我们提前准备好 Figma 客户端，且登录帐号具有开发模式的权限。 具体实践 一、开启 Figma 的 MCP 服…
HTML / CSS大前端
Web 安全：robots.txt 协议原理、利用与防御实战
练习题目：Training-WWW-Robots  练习靶场：https://adworld.xctf.org.cn/ 解题步骤 打开题目场景 
HTML / CSSAI大前端
AI 工具导航网站源码：纯前端实现与 SEO 优化
源码核心功能详解 这款静态网页基于 HTML+Tailwind CSS+JavaScript 开发，聚焦「AI 工具导航」场景，功能覆盖用户使用全流程，具体如下： 完整的工具分类与筛选体系 预设 9 大 AI 工具核心分类：对话生成、图像生成、视频生成、音频音乐、编程开发、智能搜索、3D 建模、办公效率、全部工具，覆盖当前主流 AI 工具场景。 支持分类一键切换：点击侧边栏分类按钮，快速筛选对应品…
HTML / CSSNode.js大前端
PostCSS px-to-viewport 移动端适配配置教程
综述由AI生成如何使用 postcss-px-to-viewport 解决移动端开发中的 px 单位适配问题。文章详细讲解了安装依赖、配置 postcss.config.js 文件的方法，列出了核心配置参数如 viewportWidth 和 unitPrecision。同时提供了常见问题排查方案，如转换不生效或样式错乱的解决办法，以及进阶使用技巧。通过简单配置即可实现 px 到 vw 的自动转换，提升开发效率。
HTML / CSSAI大前端
基于 Qwen3Guard-Gen-WEB 构建评论审核工具
综述由AI生成介绍如何利用阿里开源的 Qwen3Guard-Gen-WEB 模型构建评论安全审核工具。内容包括环境部署、前后端集成及音效反馈机制实现。通过三级风险判定和多语言支持，结合 Web Audio API 提供视觉与听觉双重感知，提升审核效率。同时涵盖并发控制、缓存优化及安全加固措施，提供了一套可落地的技术方案。
HTML / CSSAI大前端算法
HTML5 结合 AI 实现智能场景渲染与交互
综述由AI生成探讨了 HTML5 与 AI 技术的融合应用。内容包括 HTML5 核心特性、AI 推理与辅助开发概念、技术架构及数据交互机制。通过 Canvas 绘图识别、智能表单验证、天气应用等案例，展示了 AI 接口调用封装与性能优化策略。文章提供了实施步骤、最佳实践及常见问题解答，旨在帮助开发者掌握智能化前端开发能力，提升用户体验与开发效率。
HTML / CSS大前端java
CSS 元素显示模式详解：块级、行内及转换
综述由AI生成CSS 中元素的三种核心显示模式：块级（Block）、行内（Inline）和行内块（Inline-Block）。详细阐述了它们的特性差异，如独占一行、宽高控制、边距生效范围及嵌套规则。通过 display 属性可实现模式间的转换，并结合小米侧边栏案例演示了实际应用场景。最后提供了完整的综合代码示例，帮助读者理解不同模式下标签的表现及布局技巧。
HTML / CSSRNReact Native大前端
如何自定义 Subway 图标：源文件编辑与颜色调整
Subway 是一款包含 306 个像素级完美图标的开源项目，适用于 iOS、Apple Watch 等多个平台。如何获取项目源文件，并根据需求选择 Adobe Illustrator、Photoshop 或 Sketch 等工具进行编辑。内容涵盖基础颜色调整（通过图层面板或 SVG 属性修改）及高级形状定制（路径调整），最后提供针对不同平台的导出格式建议，帮助用户实现应用界面的个性化设计。
HTML / CSS大前端
从后端视角理解前端基础：HTML、CSS 与 JavaScript
面向后端开发者，系统梳理前端开发的基础知识。内容涵盖 HTML 作为页面骨架的结构定义，CSS 作为皮肤的美化与布局方式（含选择器与引入方法），以及 JavaScript 的交互逻辑。通过对比后端数据流转，帮助后端人员理解前端可视化与交互的实现原理，并提供登录页面等协同工作案例，助力前后端协作。
HTML / CSSAI大前端
使用 Frontend-Design Skill 提升大模型前端审美能力
如何使用 Anthropic 官方提供的 Frontend-Design Skill 提升大模型的前端设计审美。通过安装该技能包，可以显著改善生成界面的字体层次、动画效果、质感及排版一致性。支持 Claude Code、Codex 及 Cursor 等工具，只需简单命令即可启用，并可根据项目需求自定义优化。
HTML / CSS大前端
Home Assistant 智能家居界面美化：lovelace-soft-ui 安装与配置
介绍如何使用 lovelace-soft-ui 美化 Home Assistant 界面。通过安装 card-mod 插件、克隆项目配置及应用样式方案三个步骤，实现从默认单调布局到现代美感的转变。文章涵盖全局与个体样式设置、场景落地建议及常见误区解析，帮助用户打造美观实用的智能家居控制中心。
HTML / CSS大前端
前端开发基础：HTML/CSS/JavaScript 核心与开发环境入门
综述由AI生成系统介绍了前端开发的三大基石：HTML5 语义化标签与可访问性、CSS3 布局与响应式设计、JavaScript 核心语法及开发环境搭建。内容涵盖常用语义标签、Flex/Grid 布局实战、变量提升与作用域、VS Code 插件配置及 Chrome 调试工具使用，旨在帮助初学者夯实基础并建立高效开发流程。
HTML / CSS大前端java
CSS 背景样式详解：颜色、图片与属性复合写法
详细讲解 CSS 背景样式属性。涵盖背景颜色 background-color、背景图片 background-image、平铺方式 background-repeat、位置定位 background-position 及图像固定 background-attachment。介绍背景属性复合简写写法 background，以及使用 rgba 实现背景色半透明的方法。提供完整 HTML 代码示例演示各属性应用效果，并列出 MDN 等权威参…
HTML / CSS大前端
思源黑体 NotoSansSC-Regular.otf 字体介绍与核心特性
开源字体 NotoSansSC-Regular.otf（思源黑体简体中文常规版）。该字体由 Adobe 与 Google 合作开发，采用 SIL Open Font License 协议免费商用。其特点包括无衬线设计、字符覆盖广（支持 GB 18030）、多语言混排支持及高可读性。适用于 UI 界面、屏幕显示、正文排版及商业印刷等多种场景，是现代数字时代中文排版的基础型字体之一。