css之个人表单常用样式收藏

引入css

<link rel="stylesheet" type="text/css" href="${ctx}/styles/oms/yjdlbb/widthSplit.css">
<link rel="stylesheet" type="text/css" href="${ctx}/styles/oms/yjdlbb/shade.css">
<link rel="stylesheet" type="text/css" href="${ctx}/styles/oms/yjdlbb/myTable.css">
<link rel="stylesheet" type="text/css" href="${ctx}/styles/oms/yjdlbb/personality.css">

引入图标（shade遮罩层用）

<link rel="stylesheet" type="text/css" href="${ctx}/styles/common/css/font-awesome/font-awesome.min.css"></link>

引入js

<script type="text/javascript" src="${ctx}/js/yjdlbb/shade.js"></script>

 

.widthSplit1 {
    width: 100%;
}

.widthSplit2 {
    width: 50%;
}

.widthSplit3 {
    width: 33.33333%;
}

.widthSplit4 {
    width: 25%;
}

.widthSplit5 {
    width: 20%;
}

.widthSplit6 {
    width: 16.66666%;
}

.widthSplit7 {
    width: 14.28571%;
}

.widthSplit8 {
    width: 12.5%;
}

.widthSplit9 {
    width: 11.11111%;
}

.widthSplit10 {
    width: 10%;
}

.shadeMain {
    position: fixed;
    display: none;
    /* border:1px solid gray; */
}

.shade{
    width: 140px;
    height: 33px;
    border: 0px solid gray;
    position: fixed;
}

.shade>span {
    color: blue;
    font-size: 14px;
    line-height: 35px;
}

.myTable {
    margin: 0 auto;
    width: 100%
}

.myTableTitle { /* 表格合并一行的标题 */
    height: 50px;
/*     font-weight: bold; */
    font-size:16px;
}

.myTable tr td {
    border: 1px solid gray;
    /*     border: 1px solid #b0e2ff; */
}

.table-border {
    border: 1px solid #a3cee0;
}

table,tr,td,th { /* 默认tr td th 格子居中对齐高度30px */
    text-align: center;
    height: 30px;
}

.myTableNoLine {
    border: none;
}

/* 每个模块独有样式personality.css */
#thT {
    height: 25px;
    border-right: 1px soild gray;
}

#title {
    line-height: 35px;
    font-weight: bold;
}

#leftBottomTab td {
    text-align: left;
}

#rightTab tr:nth-child(even) {
    background: #FFF;
}

#rightTab tr:nth-child(odd) {
    background: #F0F1F1;
}

#rightTab tr:hover {
    background: #F0F1F1;
}

.headRow { /* background-color: #F0F1F1; */
    font-size: 20px;
}

.table-border {
    border: 1px solid #a3cee0;
}

.title-color { /* color: #999; */
    
}

.title-bgn-color {
    background-color: #f9f9f9;
}

.input-border {
    border: 1px solid #ddd;
}

.header-bgn-color {
    background-color: #b0e2ff !important;
}

.title-color{
/* color: #999; */
}

 

only设置

//每个引用readonly样式的控件或元素都将隐藏
$(function() {
    $(".readonly").each(function() {
        $(this).css("border", "none");
        $(this).attr("readonly", "readonly");
    });
});

 

引用样例

<table id="myTable" class="myTable">
<tbody>
<tr>
<td colspan="8" class="header-bgn-color widthSplit1 myTableTitle">每日需求内容</td>
</tr>

遮罩层html代码可放于页面任意位置

    <div class="shadeMain">
        <div class="shade">
            <i class="fa fa-2x fa-spinner fa-spin"></i>&nbsp;<span>正在查询,请稍候...</span>
        </div>
    </div>

 

效果图