白背景、黑背景网页设计、制作的不同点

作者:vkvi 来源:ITPOW(原创) 日期:2020-10-31

网页内容区通常是白色的,而 body 背景(内容区两侧)可以设计成白的,也可以设计成黑的,不过这点小小的变化对网页设计和制作还是有点影响的。

1、左右边距的设计

白色背景时,页面各段的左边、右边通常是对齐的,比如上面的广告条左边与下面文字段落的左边,是对齐的

但是黑色背景时,这样做,效果不一定好,特别是文字紧挨着黑色背景非常不合乎常理,通常有两种解决方法:一、将某些不适合贴边的节,做点间距。二、不论图片、还是文字,统一在黑色背景与各节之间加上一点间距。

这点很重要,有时候我们设计师拿过来的样式很好看,但是实际制作出来就很难看,就是因为设计时效果图的背景和制作时的背景不一样。所以设计师应该考虑实际需要的背景颜色,而不是为了酷,使用黑色背景。

还有:电脑版网页设计稿就使用电脑看效果图,最好还是宽屏电脑,不要用手机看。而且还不缩放图片地看,要 100% 大小看。

2、节间间距制作

白色背景时,上一节与下一节之间,可以使用 margin-top 来作间距.

但是黑色背景时,margin 会透露出黑色背景,不好看。所以可以改为 padding-top 来作为节与节之间的间距,但是有时候节内部有其他颜色的背景,此时使用 padding-top 会扩大这个颜色的区域,所以可以改为 border-top。如果 border 也被占用了,可以考虑在节与节之间增加一个 div


相关文章