Zen 编码 – 光速的 HTML/CSS(第二部分)

就绪按钮
这就是我们完成按钮的方式。由于我们使用矢量和图层样式,因此我们可以根据需要随时修改按钮。只需更改圆角矩形的颜色及其描边即可。对于文本,只需更改颜色就足够了。我们可以将这样的按钮保存为 PSD 或单独的图层样式。

在最后

您对所提出的技术有何看法?对于按钮设计,您还有其他更好的解决方案吗?与我们分享您的知识!在本系列的下一篇文章中,我们将尝试在 CCS3 中重新创建此按钮。

在本文的第一部分中,我介绍了 Zen Coding 对编码员工作的非凡帮助。我们发现:如何用一行伪代码编写整个 HTML 文档。今天我们来看看可以加快 CSS 工作速度的解决方案。我邀请你来阅读!

作为提醒

Zencoding 是流行笔记 WhatsApp 电话号码数据 本和 IDE 程序的插件,允许您编写缩短的 HTML 代码。在它的帮助下,以下 HTML 文档:我们可以将其呈现为一行,然后使用 Ctrl+E 快捷键展开:

Zen Coding 允许其他操作来改进您的 HTML 工作。其中包括使用任何 HTML 代码包装文本元素列表、配对标签以及对创建的元素进行编号。

WhatsApp 电话号码数据

Zen 编码和 CSS

然而,Zen Coding 的真正威力在使用 CSS 时才 如果内容很好并且与他们的业务相关 显现出来。由于 CSS 代码的平均数量及其重复性,这方面的任何改进都会引起我的注意。使用 Zen Coding 的示例快捷方式:正如您可能猜到的那样,展开(Ctrl+E)给我们:更重要的是,Zen Coding 将光标放置在属性内,以便我们可以立即输入值!有些属性还有默认值,称为+号。

例如,以下缩写:

它们在扩展中采用典型值,熟练的编码员修改这些值的速度比“从手指”输入它们要快很多倍。是不是很漂亮?

快速简单
Zen Coding 的巨大优势 by 列表 在于它的直观性。无需学习命令,因为您可以自己推导出语法。你知道以下缩写的含义吗?你不应该感到惊讶,在扩展中我们得到:Zen Coding 还提供项目值的缩写。让我们看看下面的例子:很容易猜到我们会得到以下代码。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注