这些小卡片是怎么实现的？

卡片式设计做为一种有效的信息展示方式在web中随处可见，起实现方式依人依环境各有不同今天先来扒一扒我看见的几个事例。

• 百度的产品大全页面

如上图红色遮罩内是我们的目标单元。
先来开一看这一部分的html结构：
<div class="con"><div><a href="http://appads.baidu.com/brand/sem/index.html" class="abg attr_873" target="_blank"></a></div><div><a href="http://appads.baidu.com/brand/sem/index.html" target="_blank">百度春华APP推广</a><br><span>app一站式推广平台</span></div></div>
class为con的div包裹这两个div，他们分别包裹着class为abg的a链接和class为con的a链接及一个span元素。但并没有样式。

和定位有关的css属性如下图

从css样式可以看出左侧是一个24x24px外边距为0 8px 4px 0的浮动a标签，右侧是两个用<br>换行的行内元素。代码量很少，却很简单高效的完成了布局。

总结：灵活利用元素自身属性去布局，减少不必要的定位。

• 站酷首页
  未完待续……