前端精确还原设计稿，从psd到html

最新推荐文章于 2024-05-18 09:47:22 发布

原创最新推荐文章于 2024-05-18 09:47:22 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

基础必备专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了前端UI设计中，如何根据iPhone6的两倍尺寸视觉稿进行页面结构和布局分析。内容涵盖大体结构、样式文件的分类、HTML页面结构的构建，以及公共头部和尾部的处理。此外，还强调了局部模块开发的工作量评估，为前端开发者提供了清晰的步骤和注意事项。

一、分析设计图

一般UI给的是iPhone6的视觉稿，会比实际的大2倍，比如宽度80需/2=40

1.大体结构，布局（如何排列、比如头、尾）

哪些可变，哪些不可变，

公共部分

列表等

复杂点的在哪，来估工作量

2.样式文件

一般样式分三种：

（1）重置样式reset.css

（2）公共样式，如头部、尾部 common.css

规范：比如calss="public-header"

（3）独立样式

3.html页面结构整理（先写整体布局）

      <div class="public-header">
        <div class="public-container"></div>
      </div>
      <div class="public-container index-banner"></div>
      <div class="public-container index-list"></div>
      <div class="public-container index-panel">
        <div class="index-panel-header"></div>
      </div>
      <div class="public-container index-panel"></div>
      <div class="public-footer">
        <div class="public-container"></div>
      </div>

4.公共头部和尾部

5.局部模块开发