<!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://www.51sjk.com/Upload/Articles/1/0/330/330276_20220921171850766.js"></script> <script src="http://www.51sjk.com/Upload/Articles/1/0/330/330276_20220921171850938.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 > <div > <div id="accordion"> <h3>图片可重新排序</h3> <div 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 >Second Second Second Second Second Second Second Second Second Second Second</div> <h3>Third</h3> <div >Third Third Third Third Third Third Third Third Third Third Third Third Third</div> </div> </div> <div > <div id="tabs"> <ul> <li><a href="#tabs-1" >First</a></li> <li><a href="#tabs-2" >Second</a></li> <li><a href="#tabs-3" >Third</a></li> </ul> <div id="tabs-1" >First First First First First First First First First First First First First</div> <div id="tabs-2" >Second Second Second Second Second Second Second Second Second Second Second</div> <div id="tabs-3" >Third Third Third Third Third Third Third Third Third Third Third Third Third</div> </div> </div> </div> <ul id="menu" > <li >菜单(可拖动)</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>
XHTMT|
HTML5|
CSS|
HTML DOM|
jQuery|
JSON|
AJAX|
LESS|
HTML|
Bootstrap|
Foundation|
AngularJS|
Ember.js|
TypeScript|
AngularJS2|
React|
jQuery UI|
jQuery EasyUI|
Node.js|
Highcharts|
Echarts|
Vue.js|
CoffeeScript|
Ext.js|
Meteor|
SASS|
Omi|
Markdown|
前端开发规范|
浏览器|
webpack|
JavaScript|
CSS3|
用户登录
还没有账号?立即注册
用户注册
投稿取消
文章分类: |
|
还能输入300字
上传中....