input與textarea樣式修飾，easyui-button的按鈕樣式，table的樣式

相信很多碼農對于html的樣式編寫很頭痛，其實心裡隻想要一個最起碼看的過去的、簡潔、規整的樣式，可是就是弄不出來呀，煩死了！

下面簡短的記錄了一些簡潔，通用的樣式，作備忘用

input與textarea樣式修飾：

input标簽（textarea也可以用）：

.reg_input{background-color:#FFF; border:1px solid #d5cfc2;  font-size:14px; padding-left:5px; vertical-align:milile; width:300px;}
.reg_input:hover{border:1px solid #005cb1;background-color:#F2FAFF;}
.reg_input{-moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; height:25px; margin-bottom:6px;}

easyui按鈕樣式重寫：

.l-btn {
  text-decoration: none;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 0px 5px;
  cursor: pointer;
  outline: none;
  text-align: center;
  vertical-align: middle;
}

.l-btn {
  color: #444;
  background: #fafafa;
  background-repeat: repeat-x;
  border: 1px solid #bbb;
  height:24px;
  background: -webkit-linear-gradient(top,#ffffff 0,#eeeeee 100%);
  background: -moz-linear-gradient(top,#ffffff 0,#eeeeee 100%);
  background: -o-linear-gradient(top,#ffffff 0,#eeeeee 100%);
  background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#eeeeee,GradientType=0);
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

    .l-btn:hover {
        background: #e2e3ff;
        color: #3a23b9;
        border: 1px solid #a5a7ee;
        filter: none;
    }

easyui按鈕樣式UI層：

<input class="easyui-button width_80 l-btn l-btn-small" type=\'button\' value="查詢" id="queryFilter" />

table的通用樣式：

.tbl_zi th {
    background-color: #ededff;
    border-bottom: 1px solid #CCC;
    border-right: 1px dotted #CCC;
    padding: 6px 10px;
    font-family: "微軟雅黑";
    font-size: 14px;
    line-height: 16px;
}

.width_80 {
    width: 60px;
}

.tbl_zi td {
    border-bottom: 1px dotted #CCC;
    border-right: 1px dotted #CCC;
    padding: 5px 10px;
    font-family: "微軟雅黑";
    font-size: 14px;
    line-height: 16px;
}

    .tbl_zi td .width_260 {
        width: 260px;
        text-align: right;
    }
    .tbl_zi td .width_150 {
        width: 200px;
        text-align: right;
    }

table通用樣式的UI層（隻需在table标簽加上class=“tbl_zi”即可）：

<div id="CommissionWin" class="easyui-window" title="代理費用" style="width: 530px; height: auto" data-options="iconCls:\'icon-save\',modal:true,closed:true">
                <table id="addCommissionTbl" class="tbl_zi">
                    <tr>
                        <td align="right">目的：<input type="hidden" id="ContractId" value="<%=Controler.ContractID %>" /><input type="hidden" id="pindex" value="<%=Request["pindex"] %>" /></td>
                        <td>
                            <input id="cbo_Purpose" class="easyui-combobox width_260" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">備注：</td>
                        <td>
                            <textarea id="txtarea_Remark" style="width: 385px; height: 100px;"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">對公金額：</td>
                        <td>
                            <input id="nn_Money_Public" type="text" class="width_260" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">開戶行：</td>
                        <td>
                            <input type="text" id="txt_Bank" class="width_260" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">賬号：</td>
                        <td>
                            <input id="txt_Account" type="text" class="width_260" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">開戶名稱：</td>
                        <td>
                            <input id="txt_AccountName" type="text" class="width_260" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">注：如果填寫了對公金額，那麼必須填寫開戶行、賬号、開戶名稱。</td>
                    </tr>
                    <tr>
                        <td align="right">對私金額：</td>
                        <td>
                            <input type="text" id="nn_Money_Private" class="width_260" /><a id="tip_validmoney" href="javascript:void(0)"></a>
                            如果沒有可以不填寫!</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center" id="btnSub">
                            <span id="subInput"></span></td>
                    </tr>
                </table>
            </div>

結果顯示：

input與textarea樣式修飾，easyui-button的按鈕樣式，table的樣式 - 悲淚滿衣襟deliberate lies - interactive DHTML

怎麼樣？布局還算說得過去吧？^_^