数据脱敏项目中遇见的问题

1 PS:input属性有很多,所以大家在设置样式的时候一定要区分类型来设置样式(楼主真的吃了很多亏(^^)铭记在心一辈子)

   .table input[type=text]{
    width: 80px;
    border-radius: 3px;
   }

2 PS :遮罩层问题 ,想遮住谁就放在谁的下面,这个放的位置真的很重要啊
<div class="loading"></div>
/*加载中*/
.loading{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 600px;
z-index: 20000;
background-image:url("../images/loading.gif");
background-position:center center;
background-repeat: no-repeat;
}
3 PS :Thead固定 tbody滑动 (如果上下不对齐 只要上下都给上宽度就好了)
/*表格thead固定*/
.fixThead>table>thead{
    overflow-x: auto;
}
.fixThead>table>tbody{
    display: block;
    height: 340px; //height高度必须设定 可以动态获取
    overflow-y: auto;
    overflow-x: auto;
}
.fixThead>table>thead {
    display:table; 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
    width:99%; //为什么是百分之九十九呢 因为下面出滚动条的时候会占一个位置
    table-layout:fixed;
}
.fixThead>table>thead>tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
.fixThead>table>tbody>tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
.fixThead>table>thead>th, .fixThead>table>tbody>tr>td{
    text-align: left !important;
    overflow-x:hidden;
    overflow-x: hidden;
    white-space:nowrap;
}
4 boxshadow四周加阴影
box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;

  基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

  对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

  ps(参数详解 此样式有兼容想问题)

  阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;

  X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

  Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;

  阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

  阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

  阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。

 ps(兼容性问题详解)【火狐3.5+  IE9+】

         -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;  

         -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; 

         box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; 

 


 


 

posted @ 2017-04-13 22:07  前端小超人  阅读(1003)  评论(0编辑  收藏  举报