easyui框架快速布局模板

最新推荐文章于 2025-07-14 09:46:44 发布

原创最新推荐文章于 2025-07-14 09:46:44 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

这是一个使用EasyUI框架实现的快速布局模板，包括了north、south、east、west四个区域，以及一个center区域。north区域用于放置Banner，south区域用于显示开发信息，east区域展示版本或更新信息，west区域作为导航菜单，而center区域则是主要内容的承载部分。

<html>
    <head>	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4eddcf6ea26ae0b7503f9c9031757ce8"></script>

	<link rel="stylesheet" type="text/css" href="jquery1.3.6/themes/icon.css"> 
	<link rel="stylesheet" type="text/css"  href="jquery1.3.6/themes/default/easyui.css"> 
	<script type="text/javascript" src="jquery1.3.6/jquery-1.9.1.min.js"></script> 
	<script type="text/javascript" src="jquery1.3.6/jquery.easyui.min.js"></script> 
        <style type="text/css">
            #layout_demo{width:100%;height:100%;}
            .north_south{height:100px}
            #west{width:120px;}
            #main_center{padding:5px;background:#fafafa;}
            #east{width:100px;}
        </style>
                                     
    </head>
    <body>
                                        
        <div id="layout_demo" class="easyui-layout">
            <div data-options="region:'north',title:'north标题',split:true" class="north_south">可以放置Bannner</div>
            <div data-options="region:'south',title:'south标题',split:true" class="north_south">放置开发信息</div>
            <div data-options="region:'east',title:'east标题',split:'true'" id="east">放置版本或者更新信息</div>
            <div data-options="region:'west',title:'west标题',split:'true'" id="west">放置导航菜单</div>
            <div data-options="region:'center',title:'center标题',iconCls:'icon-ok'" id="main_center">主体内容放置</div>
        </div>
                                     
    </body>
</html>