-
你应该知道的 Vanilla CSS 基础知识
CSS 基础知识（层叠样式表） CSS 允许我们精准定位网页元素并进行样式调整。 CSS 工作原理 CSS 主要由两部分构成： 选择器：用于指定目标元素。 声明：包含属性和值，定义元素的样式。 CSS 的三个级别 内联 CSS: 直接在 HTML 元素内定义样式，优先级最高。例如： 这是内联 CSS 内部 CSS: 在 HTML 文件的 部分使用 标签定义样式。 外部 CSS: 将样式定义在单独的 CSS 文件中，通过链接引入 HTML 文件。外部 C...
作者：wufei123 日期：2025.01.26 分类：CSS 4 -
新的 CSS 可以让您的生活更轻松
本文将带您探索 CSS 最新引入的一系列强大功能，它们将显著提升您的 Web 开发效率。我们将简要介绍这些功能的语法和应用场景，并指引您深入研究相关细节。 1. 容器查询（基于尺寸） 容器查询（基于尺寸）允许您根据父容器的尺寸，而不是视口尺寸，来为子元素应用样式。 <div class="container"> <div class="child"></div> </div> .c...
作者：wufei123 日期：2025.01.26 分类：CSS 7 -
冬至庆祝活动 - 节日登陆页面
这是前端挑战赛 - 12 月版的提交，glam up my markup：冬至 我建造了什么 这个项目是一个视觉上迷人的登陆页面，致力于庆祝冬至。该设计具有发光动画、粒子效果和平滑的滚动过渡。它旨在提供身临其境的用户体验，同时突出这一天文事件的美丽和传统。 演示 点击下面的链接查看实时项目： 实时预览 点击下面的链接查看GitHub仓库： 在 GitHub 上查看代码 旅行 这个项目是一个探索创...
作者：wufei123 日期：2025.01.26 分类：CSS 3 -
掌握 CSS：现代网站样式完整指南
css，即层叠样式表，是现代网页设计的基石。它是一种用于描述 html 文档表示的样式表语言。 html 定义了网页的结构，而 css 定义了其视觉外观，使开发人员能够创建美观、动态和响应式的设计。 使用 css 时，您可以将其内联包含在 html 元素中，将其嵌入 html 文档的 部分的 标记中，或者链接外部样式表。其中，使用外部样式表是最具可扩展性和推荐的方法，因为它可以保持 html 整洁并将内容与设计分开。 例如，考虑一个使用外部 css 样式表的简单 ht...
作者：wufei123 日期：2025.01.26 分类：CSS 2 -
Tailwind CSS 备忘单
页面布局 实用类名 描述 container 居中内容。 block / inline-block 块级或内联块级元素。 flex / grid Flexbox 或 Grid 布局。 flex-col / flex-row Flex 布局方向：列/行。 items-center 垂直居中对齐项目。 justify-center 水平居中对齐项目。 gap-1 - gap-12 项目间距。 --- 间距与填充 实用类名 描述...
作者：wufei123 日期：2025.01.26 分类：CSS 5 -
-
CSS如何去除a标签的下划线？
如何去除 a 标签下划线？１．使用 text-decoration: none; 移除所有文本装饰；２．使用选择器（如类名）精准定位特定 a 标签；３．使用伪类（如 :hover）在不同状态下修改样式；４．检查是否被浏览器默认样式或其他 CSS 覆盖；５．考虑使用 CSS 预处理器，如 Sass 或 Less，提高可维护性和效率。 CSS如何去除a标签的下划线？这个问题看似简单，实则暗藏玄机，不少新手都会掉进坑里。 表面上看，一行代码text-decoration: no...
作者：wufei123 日期：2025.01.26 分类：CSS 5 -
如何去除超链接默认的下划线样式？
去除超链接下划线的方法：使用 CSS 的 text-decoration: none; 覆盖浏览器默认样式。使用 CSS 选择器，如 nav a { text-decoration: none; }，针对特定区域或类型去除下划线。结合 hover 伪类，如 a:hover { text-decoration: underline; }，在鼠标悬停时显示下划线。 如何去除超链接默认的下划线样式？ 你肯定遇到过，网页上的超链接，底下总有一条碍眼的蓝色下划线。 这玩意儿，有...
作者：wufei123 日期：2025.01.26 分类：CSS 2 -
需要在 4 年内消亡的 rontend 开发神话
在过去的十年中，前端开发取得了长足的进步。然而，关于我们作为前端开发人员所做的事情的一些长期的神话却始终没有消失。这些神话不仅让新手感到困惑，而且还歪曲了构建面向用户的软件的工作和挑战。让我分享一些我个人遇到的神话，以及为什么是时候一劳永逸地打破它们了！ 误区 1：CSS 很简单！ 让我们从大家最喜欢的替罪羊——CSS开始。当然，乍一看很简单：选择器、属性、值。这有多难？好吧，尝试在不使用谷歌搜索的情况下将 div 居中。或者更好的是，解释一下为什么...
作者：wufei123 日期：2025.01.26 分类：CSS 5 -
前端挑战赛的简单 HTML/CSS 版本
这是前端挑战赛 - 12 月版的提交内容，css 艺术：12 月。 灵感 使用 HTML/CSS 的简单版本。我错过了很多次，没有完成，但我发布了。 演示 可在 GitHub 存储库上获取！ 托马斯本特 / 开发挑战-2024 年 12 月 参见https://dev.to/chall...
作者：wufei123 日期：2025.01.26 分类：CSS 6
热门文章
-
华为 Mate 70 性能重回第一梯队 iPhone 16 最后一块遮羞布被掀
华为 mate 70 或将首发麒麟新款处理器，并将此前有博主爆料其性能跑分将突破110万，这意味着 mate 70 性能将重新夺回第一梯队。也因此，苹果 iphone 16 唯一能有一战之力的性能，也要被 mate 70 拉近不少了。 据悉，华为 Mate 70 性能会大幅提升，并且销量相比 Mate 60 预计增长40% - 50%，且备货充足。如果 iPhone 16 发售日期与 Mate 70 重合，销量很可能被瞬间抢购。 不过，iPhone 16 还有一个阵地暂时难... -
酷凛 ID-COOLING 推出霜界 240/360 一体水冷散热器，239/279 元
本站 5 月 16 日消息，酷凛 id-cooling 近日推出霜界 240/360 一体式水冷散热器，采用黑色无光低调设计，分别定价 239/279 元。 本站整理霜界 240/360 散热器规格如下： 酷凛宣称这两款水冷散热器搭载“自研新 V7 水泵”，采用三相六极马达和改进的铜底方案，缩短了水流路径，相较上代水泵进一步提升解热能力。 霜界 240/360 散热器的水泵为定速 2800 RPM 设计，噪声 28db (A)。 两款一体式水冷散热器采用 27mm 厚冷排，... -
惠普新款战 99 笔记本 5 月 20 日开售：酷睿 Ultra / 锐龙 8040，4999 元起
本站 5 月 14 日消息，继上线官网后，新款惠普战 99 商用笔记本现已上架，搭载酷睿 ultra / 锐龙 8040处理器，最高可选英伟达rtx 3000 ada 独立显卡，售价 4999 元起。 战 99 锐龙版 R7-8845HS / 16GB / 1TB：4999 元 R7-8845HS / 32GB / 1TB：5299 元 R7-8845HS / RTX 4050 / 32GB / 1TB：7299 元 R7 Pro-8845HS / RTX 2000 Ada... -
python中def什么意思
python 中，def 关键字用于定义函数，这些函数是代码块，执行特定任务。函数语法为 def (参数列表)。函数可以通过其名字和圆括号调用。函数可以接受参数作为输入，并在函数体中使用参数名访问。函数可以使用 return 语句返回一个值，它将成为函数调用的结果。 Python 中 def 关键字 在 Python 中，def 关键字用于定义函数。函数是代码块，旨在执行特定任务。 语法 def 函数定义的语法如下： def (参数列表): # 函数体 示例 定义... -
python中int函数的用法
int() 函数将值转换为整数，支持多种类型（字符串、字节、浮点数），默认进制为 10。可以指定进制数范围在 2-36。int() 返回 int 类型的转换结果，丢弃小数点。例如，将字符串 "42" 转换为整数为 42，将浮点数 3.14 转换为整数为 3。 Python 中的 int() 函数 int() 函数用于将各种类型的值转换为整数。它接受任何可以解释为整数的值作为输入，包括字符串、字节、浮点数和十六进制表示。 用法 int(object, base=10) 其中...