在開始使用EasyUI之前，要認清楚一個原則，因為EasyUI是封裝的CSS及JS庫，是以在修改EasyUI元件的樣式和功能時，最好是采用EasyUI封裝後的CSS樣式和JS方法，而不是自己去寫CSS和JS，這樣不容易引起沖突，樣式統一性也得到了保證。别忘了，如果我們自己再去寫很多樣式和方法，還要用前端架構幹啥？
那麼我們怎麼知道啥時候用前端架構提供的樣式和方法，什麼時候沒有提供這樣的樣式和方法，需要我們自己去寫呢，這個就是經驗了，需要我們去學習，當然對于計算機程式設計來說，最好的學習辦法莫過于多寫多練了。
好的，先來看一個表單的示例：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>formDemo.jsp</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<style type="text/css">
.main_form{
margin:32px auto;
width:480px;
}
.input_container{
margin-bottom:32px;
}
</style>
</head>
<body>
<form class="main_form">
<div class="easyui-panel" title="使用者注冊" style="padding:30px 60px;">
<div class="input_container">
<input class="easyui-textbox" label="使用者名：" labelPosition="top" data-options="prompt:'請輸入使用者名',iconCls:'icon-man'" style="width:100%;height:52px">
</div>
<div class="input_container">
<input class="easyui-textbox" label="密碼：" labelPosition="top" data-options="prompt:'請輸入密碼',iconCls:'icon-lock'" style="width:100%;height:52px">
</div>
<div class="input_container">
<input class="easyui-textbox" label="郵箱：" labelPosition="top" data-options="prompt:'請輸入郵箱',validType:'email'" style="width:100%;height:52px">
</div>
<div class="input_container">
<input class="easyui-textbox" label="個人簡介：" labelPosition="top" multiline="true" style="width:100%;height:120px">
</div>
<div>
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">注冊</a>
</div>
</div>
</form>
</body>
</html>
OK，解釋如下：
1，首先注意，這是一個.jsp檔案，是以第一行有<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>，注意中文環境，貓哥建議使用utf-8編碼。還是那句話，不管是網頁、後端、資料庫，統一編碼是非常有必要的。
2，表單的樣式為class=main_form，在上面的樣式編輯區對應.main_form選擇器。再提醒一下，#main_form表示選擇id=main_form的網頁元素，.main_form表示選擇class=main_form的網頁元素，那直接寫的比如body，表示原則網頁中标簽。
此處對應的樣式代碼為：margin:32px auto;width:480px;，表示寬度居中，有點上下邊距，左右邊距是自動，是以實作了整個form部分的寬度控制和居中顯示。
3，現在需要一個标題欄了，提示使用者現在的頁面是用于登入的。此時有一個非常好用且常用的EasyUI元件，也是我們學習的第一個EasyUI元件，我們可以稱之為panel，意思是面闆。前面示意圖中使用者注冊四個字所在的标題欄加上外面的一圈邊框，就是我們使用的panel，仔細觀察代碼會發現其實本身就是一個<div class="easyui-panel" >
那麼如何讓一個普通的div或者其他網頁元素變成EasyUI元件呢，很簡單，通過class就能實作。隻要給網頁元素加上class=“easyui-xxx”，這個元素就按easyui設定好的樣式顯示了。此處代碼為：<div class="easyui-panel" title="使用者注冊" style="padding:30px 60px;">，easyui-panel将div的樣式設定成了面闆，然後title使用者注冊将面闆的标題設定為了使用者注冊，最後還補充了style樣式屬性，設定了内邊距。此處需要注意的是，如果一個網頁元素應用了class=easyui-xxx，如果還想改變其樣式，比如改變内邊距，那就直接在style屬性裡面修改，不要去改動easyui-xxx的樣式，因為那都是EasyUI架構封裝好的，不要動。
4，有了面闆之後，貓哥想往面闆裡面依次添加使用者名、密碼等輸入框，為了使面闆裡面的輸入框有固定的下邊距，更加美觀，在每個輸入框外面設定了div，并編輯樣式為：margin-bottom:32px;，這個比較簡單，不再詳述。
5，然後就是文本輸入框了，使用easyui-textbox樣式即可。需要重點注意data-options，該屬性往往是補充了EasyUI元件的功能，裡面的内容是以逗号分割的鍵值對。例如data-options="prompt:'請輸入使用者名',iconCls:'icon-man'"，意思就是文本框提示為請輸入使用者名，使用圖示是icon-man。
6，要明白圖示是怎麼來的，很簡單，在head區域我們引用了<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">，此時我們打開icon.css代碼，發現：
.icon-man{
background:url('icons/man.png') no-repeat center center;
}
1
2
3
這下，你應該懂得如果要自定義圖示，該往哪個目錄添加圖檔，又該如何定義class的名字跟圖檔産生關聯了吧。
7，注意data-options的功能還是挺強的，比如validType:‘email’，直接就驗證了郵箱輸入框格式是否正确，不正确的話還會自動提示，贊一個。
8，最後，<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">登入</a>，就很好了解了，easyui-linkbutton表示連結按鈕，iconCls表示圖示。
9，如果圖示設計的好看而優雅，更換掉easyui預設圖示後，最後出來的網頁還是蠻有個性的。
最後總結下，學習EasyUI，在具備了較好的CSS和Javascript與jQuery基礎後，其實就是記憶一些元件的名字easyui-xxx，然後記憶一些具體的屬性設定就好了。
![GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)