本文介绍了前端新人在布局官网首页时可能遇到的误区，强调前端开发并不需要具备设计能力，而应依赖于UI设计师。文章列举了获取设计稿的三种方式，并对比了各自的优缺点。拿到设计稿后，重点讲述了如何分析布局，包括梳理层次结构、元素样式和交互。例如，当鼠标悬停在一级菜单上时，背景颜色会加深，同时显示对应的二级菜单。
DIV+CSS布局-实战篇思路梳理
某官网首页布局实战（节选）
前端新人的误区
误区1：前端开发需要有设计细胞，要不然写的页面很难看。
回答：前端开发是俺图施工的，会有专门的ui设计师帮忙设计。
获取设计稿件的三种方式：
方式1：去千库网等ui设计素材平台购买（下载）设计稿，然后使用pxcook、慕客或者蓝湖进行标注信息。
优点：略微复杂，需要了解ui的相关知识
建议：如果没有ui设计师搭伙，不太适合新人。
方式2：随便找一个官网，使用qq浏览器，将网页转成图片并下载，然后使用pxcook进行标注
优点：可还原前端开发的部分流程，相对于方式1更容易，更轻量一些。
缺点：不支持切图
建议：如果没有ui设计师搭伙，推荐使用
（不推荐）方式3：随便找个官网，使用F12审核元素，获取标注信息。
Pxcook，量宽高-尺寸-颜色-间距
拿到设计稿后分析布局：
1.梳理层次结构，梳理元素的层次结构
2.梳理元素的样式
3.梳理元素的交互
例：鼠标移动到一级菜单后：
1.背景颜色加深
2.对应的二级菜单也显示
扫一扫
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
