清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
<!doctype html> <html> <head> <title>jquery-ui</title> <meta html-equiv="content-type" content="text/html,charset=utf-8"></meta> </head> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="css/nav.css"> <script> $(function(){ $("#menu").menu(); <!---菜单样式--> $("#menu" ).draggable(); <!---可拖动--> $("#menu").resizable(); <!--放大/缩小--> $("#tabs").tabs(); $("#accordion").accordion(); $( "#sortable" ).sortable(); <!--排序--> $( "#sortable" ).disableSelection(); }); </script> <style> body{ width:90%; background:url(image/bg0.jpg); margin:0 auto; } .ui-menu { width:100px; text-align:center; margin:0 auto; } .ui-tabs{ border:1px solid green; } #accordion{ width:100%; height:200px; } .content{ height:1000px; width:100%; border:5px solid #87CEFA; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; } .cdown{ margin:0 auto; width:100%; } .ctop{ margin:0 auto; width:100%; height:500px; } #tabs-1{ background:url(image/p-bg1.jpg) no-repeat; } #tabs-2{ background:url(image/p-bg2.jpg) no-repeat; } #tabs-3{ background:url(image/p-bg3.jpg) no-repeat; } #tabs ul li{ background:#76EEC6; } .c{ height:250px; } #sortable image{ width:155px; margin-left:10px; } </style> <body> <nav> <ul> <li><a href="#" >首页</a></li> <li><a href="#" >第一</a></li> <li><a href="#" >第二</a></li> <li><a href="#" >第三</a></li> <li><a href="#" >第四</a></li> <li><a href="#" >关于我们</a></li> </ul> </nav> <div class="content"> <div class="ctop"> <div id="accordion"> <h3>图片可重新排序</h3> <div class="c" id="sortable"><image src="image/pic1.jpg"/><image src="image/pic2.jpg"/><image src="image/pic3.jpg"/><image src="image/pic4.jpg"/><image src="image/pic5.jpg"/></div> <h3>Second</h3> <div class="c">Second Second Second Second Second Second Second Second Second Second Second</div> <h3>Third</h3> <div class="c">Third Third Third Third Third Third Third Third Third Third Third Third Third</div> </div> </div> <div class="cdown"> <div id="tabs"> <ul> <li><a href="#tabs-1" class="one">First</a></li> <li><a href="#tabs-2" >Second</a></li> <li><a href="#tabs-3" >Third</a></li> </ul> <div id="tabs-1" class="c">First First First First First First First First First First First First First</div> <div id="tabs-2" class="c">Second Second Second Second Second Second Second Second Second Second Second</div> <div id="tabs-3" class="c">Third Third Third Third Third Third Third Third Third Third Third Third Third</div> </div> </div> </div> <ul id="menu" class="ui-widget-content"> <li class="ui-state-disabled" style="font-size:10px;text-align:center">菜单(可拖动)</li> <li><a href="#">abcd</a> <ul> <li><a href="#">aaa</a></li> <li><a href="#">bbb</a></li> <li><a href="#">ccc</a></li> <li><a href="#">ddd</a></li> </ul> </li> <li><a href="#">efg</a> <ul> <li><a href="#">eee</a></li> <li><a href="#">fff</a></li> <li><a href="#">ggg</a></li> </ul> </li> </ul> </div> </body> </html>