网页前端开发如何写出整洁的css代码和切图到底是个什么意思

Answer 1

网页前端开发如何写出整洁的css代码和切图，所指的是基于web的前端开发流程，制作者需要有一定的制图以及前端代码基础。

使用制图软件中画好效果图。

使用制图软件根据页面制作需求划分切片，输出。

使用代码编写软件编写前端的html、css代码，整合切图写出完整的前端页面。

前端代码除了html和css之外，也可以增加js以满足页面交互需求。

制图软件推荐PS、FW，代码编写软件推荐DW、HBuilder。

Answer 2

第一个问题，想要优化一方面可以通过优化html结构，减少不必要的div标签。另一方面优化css，比如说减少冗余css代码，指定相应的命名规范等方便样式复用，可以考虑学习借鉴类似bootstrap之类的css框架。
第二个问题，切图最终目的还是为了还原设计满足需求，但是一般情况下视觉给出只可能是一种情况下的网页，但是在实际环境中可能会有不同的数据，内容。会有不同浏览器不同分辨率以及设备，这些在页面的制作中都需要考虑到，显然绝对定位不是解决这些问题的好方法。

Answer 3

用蓝湖一键标注，下载不同格式的切图。

还有设计图逻辑连线、交互说明、分状态展示、高保真原型制作预览等功能。

对设计图进行树状连线，清晰展示跳转逻辑。

还可在一旁添加细节说明，方便团队成员的理解。