仿v2ex过程中的问题记录

最近经常观察各种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,拿纸和笔照着画一下草图,顺便想想各种跳转,培养培养网页设计的基本素养。

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

发表评论

电子邮件地址不会被公开。