绅士灬杨
<!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字
上传中....
