所需CDN:
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
第一篇 布局
边框布局(border layout)提供五个区域:east、west、north、south、center。以下是一些通常用法:
- north 区域可以用来显示网站的标语。
- south 区域可以用来显示版权以及一些说明。
- west 区域可以用来显示导航菜单。
- east 区域可以用来显示一些推广的项目。
- center 区域可以用来显示主要的内容。
1.1 为网页创建边框布局
![2789632-70afba9fbe0292f0.gif](https://i-blog.csdnimg.cn/blog_migrate/b0011ff454b4e8fae1acf8492b3ee1b8.webp?x-image-process=image/format,png)
html代码:
<%--确定一个容器--%>
<div class="easyui-layout box">
<div region="west" class="test" split="true" title="Navigator" style="width:150px;background-color:Red;">
<p>Select language</p>
<ul>
<li><a href="javascript:void(0)" onclick="showcontent('java')">java</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('csharp')">C#</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('php')">php</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('python')">python</a></li>
</ul>
</div>
<div class="test" id="content" region="center" title="Language" style="padding:5px;background-color:blue;"></div>
</div>
css代码:
<style type="text/css">
.easyui-layout.box{width:400px;height:200p