使用jQuery和CSS3来访问Dribbble的API

日期：2012-7-16  来源：GBin1.com

在线演示   本地下载

Dribbble 是一个非常知名的设计社区 ，和其它大型社区类似，它也可以提供给你开放API来访问它的内容，在今天的这个教程中，我们将使用来自Dribbble的第三方API，生成一个最新设计作品展示页面，希望大家喜欢！

HTML代码

<div class="drib-list clearfix" id="popular">     
    <h1>Popular</h1>    
</div>

首先我们创建一个div，指定class为drib-list。然后当所有的dribbble内容都加载后，传递到预先定义的HTML结构中。

<div class="drib-item">
    <div class="drib-image">
        <a href="{url}"><img src="{image}" alt="{title}" /></a>
    </div>
    <div class="drib-detail">
        <div class="drib-detail-wrapper">
            <a href="#">{title}</a>
            <ul>
                <li class="views">{views}</li>
                <li class="likes">{likes}</li>
                <li class="comments">{comments}</li>
            </ul>
        </div>
    </div>
</div>

CSS代码

以下为CSS代码：

........

来源：使用jQuery和CSS3来访问Dribbble的API