江苏龙网

  1. 主页 > 生活百科 > >

卡片式布局的优点有哪些，html如何实现卡片布局( 二 )


比如下面 。图1显示了最初的设计，其中仅使用了非横幅卡，而另外两个仅签到卡使用了非横幅卡 。可以看出，在图1中，从视觉上看，三个模块是统一的整体，而在图2中，图3中的三个模块被拆分成两部分，这样人们的目光会更多地被值机模块所吸引，而较少关注下面的模块 。
1 。具有相似重要性级别的模块应该尽量采用相同的形式，即使它们的内容不同 。
下图左边是盒马鲜生的个人中心页面，采用了非横幅卡和横幅卡混合的形式 。虽然突出了个人信息，但视觉上不够统一 。试试右图，全部调整为非横幅卡，不会太弱化个人信息，反而会让整个界面更加统一 。
当然，如果模块类型完全不同，也没必要统一成卡片，比如大众点评的个人中心页，底部的列表功能不适合转换成卡片 。
2 。如果整个页面采用分割线空白色/分割线的样式来区分模块，那么可以在其中插入装饰卡作为辅助
下图是马蜂窝的页面 。可以看到，主要模块由头条+空白色隔开，而“推荐景点”(图中金鸡湖卡)和“游玩热榜”则是以卡片的形式出现 。在架构层面上，明显表现出隶属关系，但在性能层面上，适当突出了营销内容 。
【卡片式布局的优点有哪些，html如何实现卡片布局】——END——


推荐阅读


上一篇：创业选什么项目比较好，5个小本创业项目推荐

下一篇：发布外链的平台有哪些，外链在线发布教程