效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jq/jquery.min.js"></script>
<script src="../jq/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="../themes/default/easyui.css" />
<link rel="stylesheet" href="../themes/icon.css" />
<script src="../jq/easyui-lang-zh_CN.js"></script>
<style>
/* 改变一些面板样式 */
.panel-body {
background: #f0f0f0;
}
.panel-header {
background: #fff url('../images/17.jpg') no-repeat top right;
}
.panel-tool-collapse {
background: url('../images/15.jpg') no-repeat 0px -3px;
}
.panel-tool-expand {
background: url('../images/16.jpg') no-repeat 0px -3px;
}
</style>
</head>
<body>
<div style="width:200px;height:auto;background:pink;padding:5px;">
<div class="easyui-panel" title="Picture Tasks" collapsible="true"
style="width:200px;height:auto;padding:10px;">
View as a slide show<br />
Order prints online<br />
Print pictures
</div>
<br />
<div class="easyui-panel" title="File and Folder Tasks" collapsible="true"
style="width:200px;height:auto;padding:10px;">
Make a new folder<br />
Publish this folder to the Web<br />
Share this folder
</div>
<br />
<div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true"
style="width:200px;height:auto;padding:10px;">
New York<br />
My Pictures<br />
My Computer<br />
My Network Places
</div>
<br />
<div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;">
My documents<br />
File folder<br /><br />
Date modified: Oct.3rd 2010
</div>
</div>
</body>
</html>
