拿到 UI 时，前端人该如何思考？

经常有人私信我，小智这个设计图用 CSS 要怎么布局呀，这个按钮要怎么画的。所以今天，在这篇文章我们来介绍一些新的布局的方法，希望对智米们有些用处。

把设计细节放在一边

我通常做的第一件事就是把设计细节放在一边。我想先知道这次设计主要包括哪些部分，然后在关注每个部分的细节。考虑以下UI：

在上面UI中，有以下特点：

• Header/Navigation
• 中间内容 部分
• 底部的 How it works 部分

接着，我们先把这三个主要部分抽象出来：

抽象后，我们可以看到主要的部分，主宋就可以帮助我们考虑如何布局组件，而不用考虑每个组件的细节。

我是这样想的：

• Full-width header：头部的导航栏
• Centered Content：中间内容水平居中，注意，这个一般需要设置最大宽度 max-width。
• How it works：这是一个4列的布局，整个部分都被限制在一个包装器中。

接着，把上面三个部分用代码表示出来：

<header></header> 
 
<section class="hero"> 
  <!-- A div to constraint the content --> 
  <div class="hero__content"></div> 
</section> 
 
<div class="wrapper"> 
  <!-- 4-columns layout --> 
  <section class="grid-4"></section> 
</div> 

 
本文转载自网络，原文链接：https://mp.weixin.qq.com/s/Klb_-k6mw6PJY4rN4QM7MQ
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：9个极其强大的JavaScript技巧 下一篇：没有了