豆瓣列表 html 结构及语义化分析

　　　　　　

　　　　

<div class="ck-list-unit" data-style="menu" data-cfg-plainhd="true" data-source="ckdDoulists">
　　<header class="ck-hd-wrap">
　　　　<span class="ck-hd">
　　　　<span>热门豆列</span>
　　　　</span>
　　</header>
　　<article class="ck-unit-wrap">
　　　　<div class="ck-list-wrap">
　　　　　　<div class="ck-list">
　　　　　　　　<div class="ck-item blank">
　　　　　　　　　　<div class="ck-initem">目前还没有内容</div>
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　</article>
</div>

豆瓣列表 html 结构及语义化分析

结构

div.ck-list-unit      margin10

　　header.ck-hd-wrap    mr-t-b 10  mr-l-r 0

　　　　span.ck-hd　　span-l 5  span-r 15   color

　　　　　　span 文本

　　article.ck-unit-wrap    border  box-shadow  border-radius 

　　　　div.ck-list-wrap

　　　　　　div.ck-list　　

　　　　　　　　div.ck-item

　　　　　　　　　　ck-initem    margin-l-r 15   padding-t-b 10