1、新建html文档。
2、书写hmtl代码。<div class="page"><h1>Smooth Products</h1><div class="sp-loading"><img src="images/sp-loading.gif"><br> LOADING IMAGES</div><div class="sp-wrap"> <a href="images/1.jpg"><img src="images/1_tb.jpg"></a> <a href="images/2.jpg"><img src="images/2_tb.jpg"></a> <a href="images/3.jpg"><img src="images/3_tb.jpg"></a> <a href="images/4.jpg"><img src="images/4_tb.jpg"></a> <a href="images/5.jpg"><img src="images/5_tb.jpg"></a> <a href="images/6.jpg"><img src="images/6_tb.jpg"></a> </div><ul> <li>Easy to use</li> <li>Easy to style</li> <li>Responsive</li> <li>Handles different image sizes</li> <li>'Quick zoom' on hover with mouse</li> <li>Handles multiple instances on one page</li></ul></div>
3、书写css代码。<style>.page { padding: 5px 30px 30px 30px; max-width: 800px; margin: 0 auto; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; background: #fff; color: #555; }img { border: none; }a:link, a:visited { color: #F0353A; }a:hover { color: #8C0B0E; }ul { overflow: hidden; }pre { background: #333; padding: 10px; overflow: auto; color: #BBB7A9; }.demo { text-align: center; padding: 30px 0 }.clear { clear: both; }</style>
4、书写并添加js代码。<script src="js/jquery.min.js"></script> <script src="js/smoothproducts.min.js"></script>
5、代码整体结构。
6、查看效果。
