5分钟搞定开发沟通，解锁设计落地新姿势-虎课网

但是！由于工种本身的性质，我们和开发之间的沟通是个棘手又麻烦的历史遗留难题。

我们一方面厌恶那些“div”“margin”类的开发术语，另一方面又渴望开发能够意会我们的稿子，像复刻机一样完美得把它实现出来，但排除那些极少数本身有很好审美的开发外，这件事本身就是个可遇不可求的幻想。因此，理解一些开发术语和开发的工作流，对于设计-开发的协作效率的提升无疑是极为有效的。

想一想，从“这个和那个能不能分开一点“这种开发眼里极富乡土气息的白话到“两个字段的margin增加到20”这种专业的逻辑语言，中间可以省下多少宝贵的时间啊让我们去充（xiao）电（sa）啊。

我知道你们不想去W3school吭哧吭哧学代码，所以我花了大量时间研究了它们，并主动请教了几位开发，再用极具想象力的方法带各位熟悉代码的世界、以及开发小哥的日常~各位读完之后，基本有能力解决90%因为沟通产生的难题！

欧克，废话不多说，雷斯够！

Html、Css和JavaScript

Html是最基本的“骨架”代码，术语叫超文本标记语言。形象点儿说，这玩意儿主要是用来贴名牌的。我们的浏览器其实是个眼神和脾气都不太好的门卫大爷（原谅这个蹩脚的比喻），元素们只有添上他们独有的名牌，才能被它认出来并允许进入，大部分还得正反都贴。

比如，<a>、<p>和<img>就分别代表了链接、段落和图片的名牌。一旦有个家伙没贴，就立刻OUT出局。但是，他们懒啊，自己不想动，这时就轮到我们的正义使者——开发小哥闪亮登场了！

辛勤的开发小哥用神奇的Html语言，为每个懒货贴上属于他们自己的名牌，进入浏览器大闸的行为也就变得名正言顺。

左下图就是用Html贴上名牌（标签）的链接、段落和图片，右下图就是他们在浏览器中的反映。

但是，问题来了——

这些倒霉孩子实在是太杂太多了，成天四处乱跑杂乱无章，为了将他们进行管理和约束，开发小哥们就用div这类标签建立了一个个班级，按照设计师给出的视觉稿，把关系更相近、密切的元素们划分到一个班级去，从而实现对元素们的高效管理、收纳。

然后，开发小哥再根据视觉稿中的具体样式，用css（层叠样式表）来装扮这些元素。

首先在代码中加入<style>这个标签来提前定义一个样式表，然后在花括号{ }写入元素的属性和对应的值（比如一个字号14px的段落，用css语法表示就是p { font-size:14px }）。下图就分别为div中的三个元素进行了样式声明。

这时，我们再返回刚刚的div，略微修改下图片及文字内容，就变为了站酷作品坑位的基本样式——

最后，开发小哥根据页面交互以及动效，用JavaScript给元素们下达指令，命令哪些元素会随着用户的触发产生交互动作，哪些元素可以跳街舞来展现酷炫的动画！