好文分享

第 16 讲：带有媒体查询的响应式设计 在今天的讲座中，我们将探索响应式设计以及如何使用媒体查询让您的网站在任何设备上看起来都很棒。在移动浏览时代，创建适应各种屏幕尺寸的布局对于用户体验至关重要。 1.什么是响应式设计？ 响应式设计可确保网站调整其布局、图像和内容以适应不同的屏幕尺寸和方向。这种方法…

Web 应用程序从静态网站到动态网页的演变是由对更具交互性、用户友好性和功能丰富的 Web 体验的需求推动的。以下是这种范式转变的概述： 1. 静态网站（1990 年代） 定义：静态网站由用 HTML 编写的固定内容组成。每个页面都是预先构建并存储在服务器上，并且向每个用户传递相同的内容。技术：HT…

第 17 讲：css 变量 – 简化样式表 在本次讲座中，我们将了解 css 变量（也称为自定义属性）以及它们如何通过允许您在样式表中重用值来帮助简化代码。 1.什么是 css 变量？ css 变量使您能够将颜色、字体大小或间距等值存储在中心位置，并在整个样式表中重复使用它们。这使您的代码更易于维护…

今天，我完成了我的第一个前端项目，这是一张个人资料卡。 这个想法来自前端导师，但我决定加入自己的想法，同时不偏离我所知道的初学者水平太远，我添加了一些动画，有点超出了我的舒适区，比如归因部分的心跳和标题上看到的轻微悬停效果，我觉得看起来棒极了。 我真的为自己感到骄傲，因为在此之前我什至从未自己做过一…

介绍 没有什么比应用一种样式但它没有按预期工作更令人沮丧的了。边距塌陷是一种导致意想不到的造型效果的现象。那么，什么是折叠边距以及它如何影响 css 中的边距？ 利润崩溃 折叠边距源于css属性边距，它控制元素外部的间距。顾名思义，当相邻元素的边距组合或“折叠”为一个而不是相加时，就会发生折叠边距。…

编写 css 的最佳实践 – 干净、可扩展且可维护的代码 在本课程的最后一讲中，我们将重点关注编写高效、可扩展且可维护的 css 的最佳实践。这些原则将帮助您为样式表开发一种干净且专业的方法，使它们随着项目的发展而更易于管理。 1.使用有意义的类名 类名应该具有描述性并表明其用途。避免使用模糊的名称…

使用 css 和视图转换从浅色模式转换为深色模式时添加炫酷效果 复制自 twitter 上的@jhey[！注意]这假设您已经设置了暗光模式，并具有某种功能来更新您的主题 添加css /* angled */ [data-style=’angled’]::view-transition-old(roo…

大家好！ 几天前，我决定迈出一步，开始学习编程。和许多人一样，我从基础知识开始：html 和 css。开始一个简短的 40 分钟课程（来自 deivchoi 的从头开始的基础 html5 和 css3 课程），虽然一开始一切看起来都很简单，但当我到达 css 和样式部分时，我对本地和全局的概念有点迷…

scss 是 css 的扩展，使您的代码更易于管理。借助 scss，您可以使用 mixins 和函数来帮助您避免一次又一次编写相同的代码。在本文中，我将向您展示一些有用的 scss mixin 和函数，它们可以节省您的时间并使您的代码更清晰。 为什么使用 mixins 和函数？ ​​编写 css 时…

编写干净且有组织的 css 很重要，尤其是对于大型项目。构建 css 的最佳方法之一是使用 bem 命名约定。在本文中，我们将解释 bem 是什么、为什么它很重要、它的优点和缺点，并通过两个示例向您展示如何使用它。 什么是边界元法？ bem 代表 块、元素 和 修饰符。它是一个用于编写 css 类名…