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>

结果显示：

 

怎么样？布局还算说得过去吧？^_^