EasyUI(1)：快速搭建系统界面

　　使用EasyUI搭建系统界面真是easy，简单而且快！

　　1、到EasyUI的官网下载免费的包到本地，解压，安排好目录，建立空的html文件YQCYNDI.HTML。

　　2、加入引用，即css和js部分的代码。

　　3、官网上拷贝代码，地址：EasyUI 基础布局(Basic Layout)_easyui demo，拷贝布局->全屏布局，里面有现成的代码，加入到文件中。

　　4、根据需要进行调整，代码和样式最好放到单独的文件中。

　　5、完成界面搭建。

　　完整代码：

    
    
    
    网络设备信息
    
    
    
    
    
    
    
        .maintitle{
            width: 290px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 29px;
            font-weight: bold;
            float:left;
            padding:0 0 0 0;
            color:#fff;
        }
        .logOut{
            text-align: center;
            width: 180px;
            height: 50px;
            float:right;
            padding:20px 15px 0 0;
            color:#fff;
        }
        a{
            color: #ccc;
            text-decoration: none;
        }
        a:hover{
            text-decoration: none;
        }
    
    
        var _menus = {"menus":[
                            {"menuid":"1","icon":"icon-edit","menuname":"系统配置",
                                "menus":[
                                    {"menuid":"11","menuname":"系统日志","icon":"icon-edit","url":"实际链接地址"},
                                    {"menuid":"12","menuname":"用户管理","icon":"icon-edit","url":"实际链接地址"},
                                    {"menuid":"13","menuname":"系统设置","icon":"icon-edit","url":"实际链接地址"},
                                    ]
                            },{"menuid":"2","icon":"icon-help","menuname":"设备操作",
                                "menus":[{"menuid":"21","menuname":"信息采集","icon":"icon-help","url":"实际链接地址"},
                                    {"menuid":"22","menuname":"设备管理","icon":"icon-help","url":"实际链接地址"}
                                    ]
                            },
                    ]};

    


	

        
网络设备信息
        
[用户名称]　|　退出系统
    
	

        

            			
        
    
	

        

            

                
欢迎使用网络设备信息
            
    
        
    
	
欢迎使用网络设备信息系统　2021年10月13日

    
        $('#tabs').tabs({
            fit:true,
            border:false,
        });
    >

　　完成的界面：

 　　后面就可以完成具体的实现了。