分类
<!--核心样式--> <link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css"> <style> /*网格图片调用*/ .s1{background: url('img/140x140.png');} .s2{background: url('img/300x140.png');} .s3{background: url('img//140x300.png');} .s4{background: url('img//300x300.png');} </style>
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.gridster.min.js"></script> <script> $(function() { $(".gridster ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140] }); }); </script>
<!--主要代码--> <section> <div class="gridster"> <ul> <li class="s1" data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li> <li class="s1" data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li> <li class="s1" data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li> <li class="s2" data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li> <li class="s4" data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li> <li class="s1" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li class="s2" data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li> <li class="s1" data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li> <li class="s1" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li> <li class="s1" data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li> <li class="s1" data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li> <li class="s3" data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li> </ul> </div> </section>
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。