|
阅读：131回复：0
代码挑战#2：在 CSSBattle.dev 中获得更高分数的 4 个技巧
一周多前，您可能已经看到我们发起了第二次代码挑战赛——与CSSBattle.dev的朋友合作。CSS 之战是一个相对较新的概念——该网站于四月份推出——而且它们的工作原理并不总是显而易见。 Backward Skip 10s Play Video Forward Skip 10s CSSbattle 中的默认输出和编辑器面板。 CSSbattle 中的默认输出和编辑器面板。 简单来说： 您的目标是仅使用 HTML 和 CSS 创建“目标”图像的副本 您不能使用外部图像 您不能使用 SVG（甚至是内联 SVG）或特殊字符 所有解决方案都会自动对准确性和效率（字符数）进行评分 重新创建目标图像得分最高的玩家获胜 我必须承认，当我第一次看到这个想法时，我有点难以置信。
到底怎么可能有人使用少于“推文价值”的 HTML 和 CSS 来创建这些设计呢？那是不可能的，当然吗？ 所以我尝试了，但大多失败了——但我也学习并逐渐开始理解你需 黎巴嫩电话号码表 要的一些技巧。如果您好奇，我想我会介绍 4 个技巧来帮助您获得更高的分数。 Learn to Code with JavaScript 让我明确一点：当我写这篇文章时，我在本轮战斗中排名第 24 位。到目前为止我已经完成了所有目标，总排名第26，所以毫无疑问至少有两打左右的玩家有比我更好的解决方案。不过，我很乐意分享我所知道的信息，并听取任何有更好想法的人的建议。 
提示#1：空的输出面板永远不是真正的空 第一次加载任何目标时，您会看到类似上图的内容。您的编辑器总是预先填充示例 HTML 和 CSS，提供基本的起始位置。但是，即使您删除编辑器中的每个字符，从技术上讲，“输出”面板仍然不会是空的。 为什么不？如果您检查“输出”面板的源（提示：暂时关闭“幻灯片和比较”功能），您将发现<iframe>包含两个不可见元素的 an<html>和 a<body>元素。 如下图所示，您可以看到它们带有一行 CSS。当然，您可以完全自由地设置这两个 HTML 元素的样式，而无需花费任何字符来创建它们。 |
|
