一、Html结构
<main id='container'>
<header id='header'>
<span>View:</span>
<button class='view-list'>List</button>
<button class='view-grid'>Grid</button>
</header>
<ol class='grid' id='frame'>
<li class='frame'>
<div class='inset'>
<div class='image'></div>
<div class='info'>
<div class='title'>Lorem Ipsum</div>
<div class='description'></div>
<div class='shares'>
<div class='icon-lik likes'></div>
<div class='icon-ask comments'></div>
</div>
</div>
</div>
</li>
</ol>
<main id='container'>
<header id='header'>
<span>View:</span>
<button class='view-list'>List</button>
<button class='view-grid'>Grid</button>
</header>
<ol class='grid' id='frame'>
<li class='frame'>
<div class='inset'>
<div class='image'></div>
<div class='info'>
<div class='title'>Lorem Ipsum</div>
<div class='description'></div>
<div class='shares'>
<div class='icon-lik likes'></div>
<div class='icon-ask comments'></div>
</div>
</div>
</div>
</li>
</ol>