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:adient(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="代理费⽤" 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" ></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"/>text align center
</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" id="btnSub">
<span id="subInput"></span></td>
</tr>
</table>
</div>
结果显⽰：
怎么样？布局还算说得过去吧？^_^

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。