最近经常观察各种APP的设计、配色之类的，今天没事决定仿一下V2EX的首页，动手更能加深印象。

代码地址：https://github.com/owenliang/v2ex-clone

体验地址：https://owenliang.github.io/v2ex-clone/

这里主要记录一下心得。

配色

一般整个底色都会选择一个浅灰，比如：#e2e2e2。

阴影或者分割线，可以采用rgba颜色。它支持透明度控制，类似于：background-color: rgba(0,0,0,0.22)这样的颜色，其实就是黑色在不同透明度下的效果，最后一个值越小颜色越浅，效果特别好。

字体颜色同样很重要，貌似很少使用纯黑色字体，因为有点刺眼。可以采用一些淡化一些的颜色，如果是白底可以用#555、#666、#ccc这样的颜色，如果是灰底那么采用白色字体就可以。

浮动还是行块

我一开始做多个div横向布局，想用inline-block比较省事，即便inline-block的height高度，line-height行高，font-size字体大小相同，inline-block的顶部与父元素顶部之间总有一个微小的距离。

如果你对这种像素差距要求很高，那么就可以使用block，让它们float浮动，这样只需要为block设置height，line-height，font-size统一，就可以保证字体顶到父元素的边界。

垂直居中

评论数DIV没有固定宽度和高度，需要垂直居中，水平不居中，这是我之前没遇到过的一个场景。

之前有写过垂直+水平居中，只要元素是定宽定高，那么就可以absolute并top,bottom,left,right=0即可实现双方向居中。

对于不定宽，不定高的元素，单方向居中怎么做呢？查了一个方案，挺巧的：

top:50%可以将元素的顶部对齐到父元素的中间位置，transform: translateY(-50%)可以将元素向上偏移自己高度的1/2。

其实关键就在于top的百分比是按父元素计算的，而translateY的百分比是按自身计算的，这就给我们一个机会把位置修正到父元素的正中央。

最后

最近没事会打开各种APP，拿纸和笔照着画一下草图，顺便想想各种跳转，培养培养网页设计的基本素养。

不过，我并没有什么审美能力，只是工程化的记录一些常用技巧，也算是对自己有些提升。

如果文章帮助您解决了工作难题，您可以帮我点击屏幕上的任意广告，或者赞助少量费用来支持我的持续创作，谢谢~