卡片式設(shè)計(jì)做為一種有效的信息展示方式在web中隨處可見，起實(shí)現(xiàn)方式依人依環(huán)境各有不同今天先來扒一扒我看見的幾個(gè)事例囱持。
如上圖紅色遮罩內(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一站式推廣平臺(tái)</span></div></div>
class為con的div包裹這兩個(gè)div，他們分別包裹著class為abg的a鏈接和class為con的a鏈接及一個(gè)span元素洪唐。但并沒有樣式钻蹬。
和定位有關(guān)的css屬性如下圖
從css樣式可以看出左側(cè)是一個(gè)24x24px外邊距為0 8px 4px 0的浮動(dòng)a標(biāo)簽，右側(cè)是兩個(gè)用<br>換行的行內(nèi)元素凭需。代碼量很少问欠，卻很簡(jiǎn)單高效的完成了布局。
總結(jié)：靈活利用元素自身屬性去布局粒蜈，減少不必要的定位顺献。
-
站酷首頁
未完待續(xù)……
