1. 引入CSS
<link rel="stylesheet" type="text/css" href="styles.css" />
2. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://ajax.51qianduan.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.flip.min.js"></script> <script type="text/javascript" src="js/script.js"></script>
3. HTML代码
<div id="main">
<div class="sponsorListHolder">
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/facebook.png" alt="More about facebook" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The biggest social network in the world.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/hp.png" alt="More about hp" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
One of the biggest computer manufacturers.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/sony.png" alt="More about sony" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
A global multibillion electronics and entertainment company
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/cisco.png" alt="More about cisco" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The biggest networking and communications technology manufacturer.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/ea.png" alt="More about ea" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The biggest computer game manufacturer.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/mysql.png" alt="More about mysql" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The most popular open source database engine.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/canon.png" alt="More about canon" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
Imaging and optical technology manufacturer.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/digg.png" alt="More about digg" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
One of the most popular web 2.0 social networks.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/microsoft.png" alt="More about microsoft" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
One of the top software companies of the world.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/yahoo.png" alt="More about yahoo" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The most popular network of social media portals and services.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/vimeo.png" alt="More about vimeo" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
A popular video-centric social networking site.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/ebay.png" alt="More about ebay" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The biggest online auction and shopping websites.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/adobe.png" alt="More about adobe" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The leading software developer targeted at web designers and developers.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/dell.png" alt="More about dell" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
One of the biggest computer developers and assemblers.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/google.png" alt="More about google" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The company that redefined web search.
</div>
<div class="sponsorURL">
<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
