卡片式設(shè)計做為一種有效的信息展示方式在web中隨處可見，起實現(xiàn)方式依人依環(huán)境各有不同今天先來扒一扒我看見的幾個事例。

• 百度的產(chǎn)品大全頁面

如上圖紅色遮罩內(nèi)是我們的目標(biāo)單元。
先來開一看這一部分的html結(jié)構(gòu)：
<div class="con"><div><a class="abg attr_873" target="_blank"></a></div><div><a target="_blank">百度春華APP推廣</a><br><span>app一站式推廣平臺</span></div></div>
class為con的div包裹這兩個div，他們分別包裹著class為abg的a鏈接和class為con的a鏈接及一個span元素。但并沒有樣式。

和定位有關(guān)的css屬性如下圖

從css樣式可以看出左側(cè)是一個24x24px外邊距為0 8px 4px 0的浮動a標(biāo)簽，右側(cè)是兩個用<br>換行的行內(nèi)元素。代碼量很少，卻很簡單高效的完成了布局。

總結(jié)：靈活利用元素自身屬性去布局，減少不必要的定位。

• 站酷首頁
  未完待續(xù)……