DIV+CSS布局-实战篇思路梳理

DIV+CSS布局-实战篇思路梳理

某官网首页布局实战（节选）

前端新人的误区

误区1：前端开发需要有设计细胞，要不然写的页面很难看。
回答：前端开发是俺图施工的，会有专门的ui设计师帮忙设计。

获取设计稿件的三种方式：

方式1：去千库网等ui设计素材平台购买（下载）设计稿，然后使用pxcook、慕客或者蓝湖进行标注信息。

优点：略微复杂，需要了解ui的相关知识
建议：如果没有ui设计师搭伙，不太适合新人。

方式2：随便找一个官网，使用qq浏览器，将网页转成图片并下载，然后使用pxcook进行标注

优点：可还原前端开发的部分流程，相对于方式1更容易，更轻量一些。
缺点：不支持切图
建议：如果没有ui设计师搭伙，推荐使用

（不推荐）方式3：随便找个官网，使用F12审核元素，获取标注信息。

Pxcook，量宽高-尺寸-颜色-间距

拿到设计稿后分析布局：

1.梳理层次结构，梳理元素的层次结构
2.梳理元素的样式
3.梳理元素的交互
例：鼠标移动到一级菜单后：
1.背景颜色加深
2.对应的二级菜单也显示