css

Lee川3 小时前
前端·css
现代Web开发中的CSS继承、Flexbox布局与LocalStorage交互:从文档解析到实践应用本文深入探讨了现代Web开发中三个核心主题:CSS继承特性、Flexbox弹性布局系统以及浏览器LocalStorage的数据持久化机制。文档通过生动的示例代码和详细的注释,呈现了从基础CSS概念到实际交互式应用开发的完整知识链。本文将对这些文档内容进行系统性分析,特别关注注释中强调的关键概念,展示它们在实际项目中的协同应用。
helloweilei20 小时前
css
CSS进阶: background-clipbackground-clip 是 CSS 中一个用于控制背景(背景颜色或背景图片)的显示范围的属性。简单来说,它可以决定背景是铺满整个盒子(包括边框)、只铺到边框内部,还是只铺到文字下方。
DeathGhost1 天前
前端·css
CSS container容器查询@container规则是CSS 根据指定容器尺寸发生变化时,在满足条件的情况下设置其内部元素样式。如同@media一般,不同的是@container针对容器元素,而@media针对的是浏览器窗口。
不会敲代码12 天前
css·vue.js·react.js
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比在现代前端开发中,组件化已成为构建用户界面的主流方式。我们将页面拆分为独立、可复用的组件,每个组件管理自己的 HTML、CSS 和 JavaScript。然而,CSS 的设计初衷是全局作用域的 —— 样式一旦定义,就会影响整个页面,这给组件化带来了严峻挑战。
Sailing2 天前
前端·css·面试
🚀 别再乱写 16px 了!CSS 单位体系已经进入“计算时代”,真正的响应式布局如果你的项目里还充满 px + media query —— 那说明你在“维护样式”,而不是“设计系统”。
球球pick小樱花3 天前
前端·javascript·css
游戏官网前端工具库:海内外案例解析在游戏行业竞争日趋激烈的当下,游戏官网早已不再是单纯的信息展示页,而是承载品牌叙事、玩家沉浸体验、内容传播的核心载体。本篇文章,基于海内外游戏官网案例(GTA VI、崩:星穹铁道、Elden Ring 等等),从 动画交互、实用工具、性能优化 和 UI 组件 等多个维度,对各类工具进行梳理和分析,希望能为游戏官网开发者提供参考思路。
AAA阿giao4 天前
前端·css·react.js
从零构建一个现代登录页:深入解析 Tailwind CSS + Vite + Lucide React 的完整技术栈在当今前端开发的快节奏世界中,开发者们不再满足于“能用”的界面,而是追求高效、美观、可维护且体验流畅的 UI。而要实现这一目标,一套现代化的技术组合至关重要。
掘金安东尼4 天前
前端·css
用 CSS 打造完美的饼图原文:Trying to Make the Perfect Pie Chart in CSS翻译:TUARAN
掘金安东尼5 天前
前端·css
纯 CSS 实现弹性文字效果原文:How to Create a CSS-only Elastic Text Effect翻译:TUARAN
前端Hardy5 天前
前端·javascript·css
HTML&CSS&JS:打造丝滑的3D彩纸飘落特效这个 HTML 页面实现了一个动态、立体、色彩缤纷的彩纸(Confetti)飘落动画效果,常用于庆祝、成功提示或节日氛围营造。
前端Hardy5 天前
javascript·css·html
HTML&CSS&JS:丝滑无卡顿的明暗主题切换这个 HTML 页面实现了一个现代化、丝滑过渡的白天/夜间主题切换功能,完全基于 CSS 自定义属性(CSS 变量)、light-dark() 函数和少量 JavaScript 实现持久化。
parade岁月6 天前
前端·css
Tailwind CSS v4 — 当框架猜不透你的心思你在项目里写下 text-(--brand-color),满心期待文字变成品牌色,刷新页面——字号变了。
前端Hardy6 天前
javascript·css·html
HTML&CSS&JS:基于定位的实时天气卡片这个 HTML 页面实现了一个基于用户地理位置的实时天气信息卡片,界面美观、交互流畅。页面加载自动定位→请求天气数据→渲染卡片,支持手动刷新,全流程有加载 / 错误状态提示,动效过渡自然。赶快收藏学习吧。
程序员阿耶6 天前
css
5 个让 CSS 起飞的新特性,设计师看了直呼内行有大佬说: "CSS 而已,能玩出什么花?"今天我就用 5 个原生 CSS 新特性告诉你——现在的 CSS,已经不是当年的 CSS 了。它不再是那个只会改背景颜色的"样式表",而是进化成了能处理逻辑、响应状态、甚至做动画的系统级设计工具。
前端Hardy6 天前
css·html
HTML&CSS:纯CSS实现随机转盘抽奖机——无JS,全靠现代CSS黑科技!这个 HTML 页面实现了一个交互式转盘抽奖效果,使用了现代 CSS 的一些实验性特性 (如 random() 函数、@layer、sibling-index() 等),并结合 SVG 图标和渐变背景,营造出一个视觉吸引、功能完整的“幸运大转盘”界面。
漂流瓶jz7 天前
前端·css·代码规范
BEM、OOCSS、SMACSS、ITCSS、AMCSS、SUITCSS:CSS命名规范简介本来是希望讲一下CSS组件化发展历史上的技术,但所有内容放到一个文章中描述太长了,因此对各类技术分开写一下。这篇文章讲一下CSS命名规范。
前端Hardy7 天前
css·html
HTML&CSS:高颜值产品卡片页面,支持主题切换这是一个产品卡片页面,无 JS 实现图片切换、主题切换、全设备响应式适配,兼顾美观与实用性,值得大家学习。
Never_Satisfied7 天前
前端·css·html
在HTML & CSS中,nth-child、nth-of-type详解:nth-child() 是 CSS 中非常实用的一个伪类,它允许你根据元素在其父元素中的位置(第几个子元素)来精准地选择元素。下面我将从基础语法开始,逐步深入,并通过大量示例帮你掌握它的用法。
光影少年7 天前
前端·javascript·css
前端css如何实现水平垂直居中?一、已知宽高元素的水平垂直居中原理:⚠️ 缺点:必须知道宽高。原理:✅ 不需要知道宽高 ✅ 兼容性好 ✅ 面试常用答案
Purgatory0017 天前
服务器·前端·css
CSS 访问服务器偶然发现后台日志文件中多了些奇怪的访问你要是本地有这个文件还好,问题是没有,直接就访问到了自编的控制器中