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>