请选择 进入手机版 | 继续访问电脑版

学JAVA网

 找回密码
 立即注册

easyui layout布局使用详解

[复制链接]
发表于 2018-5-13 11:31:56 |显示全部楼层
本篇文章来说一下easyui布局教程

什么是布局

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计

常用的网页后台布局有哪些

1.1:上左中布局(T字形布局)
1.2:左右布局

easyui layout布局
  
   为了让广大开发者更加容易的进行网页布局,easyui 给我们提供了layout组件,容器布局有五个区域 分别是东西南北和中间。并且每个区域都不是必选的。所以我们能够更加灵活的进行布局。

  

easyui 布局

easyui 布局


使用方式:

     1:使用html标签创建布局
  1. <div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
  2.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
  3.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
  4.     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
  5.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
  6.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
  7. </div>
复制代码
2:我们看下面一个例子是如何布局的。
222.jpg



      我们可以比较明显的看出来这个是(上,左,中)布局 也就是对应了layout中的(北 西 中)

     还是老规矩。第一步:我们创建一个layout.html  文件。
  1. <body class="easyui-layout">   
  2.            <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
  3.            <div data-options="region:'west',title:'West',split:true" style="width:200px;"></div>   
  4.            <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
  5. </body>
复制代码
我们在浏览器中打开layout.html即可看到以下效果
    布局完成.PNG


end
您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|学JAVA网

GMT+8, 2018-8-17 08:12 , Processed in 0.165699 second(s), 24 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

Copyright © 2015-2018 xuejava网 / 鲁ICP备17054568号-1
回顶部