C#遮罩层

最新推荐文章于 2025-06-23 13:45:30 发布

原创最新推荐文章于 2025-06-23 13:45:30 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

C# 同时被 2 个专栏收录

5 篇文章

订阅专栏

遮罩层

1 篇文章

订阅专栏

本文介绍了如何在C#项目中创建一个遮罩层，用于在页面加载时显示等待效果。通过在HTML中添加遮罩层的DOM元素，并结合CSS样式，以及在按钮点击事件中调用jQuery的`$("#loading").show()`来显示遮罩层。同时，展示了相关的CSS样式代码，以实现遮罩层的显示和隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先写一个遮罩层DIV，如下（放在body标签里）

在css里面写好css在aspx页面调用（最下面是我用的css样式）

最关键的就是调用了（在单击事件isSubmit()最后调用show就可以了）

<asp:Button ID="btnSave" class="btn btn-primary" runat="server" Text="保存" OnClientClick="return isSubmit()" OnClick="btnSave_Click" />

$("#loading").show();

css样式：（用到的用，用不到的删除就好了，按照class找一下loagMask）
/* jdf-1.0.0/ ui-base.css Date:2015-09-25 09:37:09*/
   a,address,b,big,blockquote,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,label,legend,li,ol,p,pre,small,span,strong,u,ul,var {
   margin:0;
   padding:0
}
html,body{min-width:1200px;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
   display:block
}
hr {
   -moz-box-sizing:content-box;
   box-sizing:content-box;
   height:0
}
button,html input[type=button],input[type=submit] {
   -webkit-apperance:button;
   cursor:pointer
}
input[type=text] {
padding:3px 2px;
border: solid 1px #d0d0d0;
}
input.itxtmid[type="text"] {
width: 70px;
}
textarea {
border-color:#ccc;}

/*因修改购物车而加，不知是否影响其他*/
input[type=text].itxt {
/*width:30px;text-align:right ; padding:3px 5px*/ }

select {
padding:3px 2px 4px;
border: solid 1px #d0d0d0;
font: 12px/150% "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","宋体",sans-serif;
color: #666;
}
.mt select.seltype {
height:27px;}

button[disabled],html input[disabled] {
cursor:default
}
/*和搜索框一样的高度*/
/*.mod-comm .search input,*/
.mod-comm .search input {
vertical-align:top;}

/*.mod-comm*/
.search input[type=text] {
height: 20px;
line-height: 18px;
padding: 2px 5px 3px;
border: 1px solid #ccc;

}

.mod-comm .mt input[type=text] {
/*height: 20px;*/
}
.extra-r {
float:right;}
.mt .search select {
margin: 0 1px;
height: 27px;
line-height: 27px;
}
.mt .search span {vertical-align:middle; display:inline-block; *margin-bottom:8px;

}
ol,ul {
   list-style:none
}
img {
   border:0;
   vertical-align:middle
}
em,i,u {
   font-style:normal
}

.fl {
   float:left
}
.fr {
   float:right
}
.al {
   text-align:left
}
.ac {
   text-align:center
}
.ac em {
color:#f50

}
.ar {
   text-align:right;
}
.fw {
font-weight:bold;}
.ml5 {
margin-left:5px}
.mr5 {
margin-right:5px;}
.ml10 {
margin-left:10px;}
.mb10 {
margin-bottom:10px;}
.ml20 {
margin-left:20px;}
.mt10 {
margin-top:10px;}
.pd20 {
padding:20px;}
.pd10 {
padding:10px;}
.mr10 {
margin-right:10px;}
.hide {
   display:none
}
/*.clear,.clr {
   display:block;
   overflow:hidden;
   clear:both;
   height:0;
   line-height:0;
   font-size:0
}*/
.clr {
   display:block;
   overflow:hidden;
   clear:both;
}
.clearfix:after {
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden
}
.clearfix {
   *zoom:1
}
.tablehover tr:hover{
background: #f5f5f5;
}
.dorpdown {
   position:relative
}
.dorpdown-layer {
   display:none;
   position:absolute
}
.dorpdown:hover .dorpdown-layer,.hover .dorpdown-layer {
   display:block
}
.cw-icon {
   position:relative;
   cursor:default;
   zoom:1
}
.cw-icon .i,.cw-icon i {
   display:block;
   position:absolute;
   overflow:hidden
}
.w {
   width:990px;
   margin:0 auto
}
.root61 .w {
   width:1210px
}
body,input {
   font:12px/150% "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","宋体",sans-serif;
   color:#666;
   background:#fff
}
table td {
font:12px/150% "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","宋体",sans-serif;
   color:#666;
}
.table {
}
a {
   color:#666;
   text-decoration:none
}
a:hover {
color: #c81623;
}
.m,.mb,.mc,.mt,.p-detail,.p-img,.p-market,.p-name,.p-price,.sm,.smb,.smc,.smt {
   overflow:hidden
}
.img-error {
   background:url(../images/error-img.jpg) no-repeat 50% 50%
}
.btd {
border-top:dashed 1px #ccc;width:100% }

/*警告底色*/
.noteyellow {
background:#ffffac}
/* jdf-1.0.0/ global-header.css Date:2015-11-26 19:49:18*/
   @charset "UTF-8";
   #logo-2014 {
   position:relative;
   z-index:12;
   float:left;
   width:362px;
   height:60px;
   padding:20px 0
}
.borderline {margin:10px 0px;
border-top:dotted 1px #e4393c;}
#logo-2014 .logo {
   display:block;
   width:270px;
   height:60px;

   text-indent:-20000px
}
#logo-2014 .extra {
   position:absolute;
   top:15px;
   left:168px;
   width:180px;
   height:70px;
   padding-left:10px;
   background:#fff
}
#channel {
   float:left;
   margin-right:10px;
   cursor:default;
   font:400 20px/70px "microsoft yahei";
   color:#333
}
#categorys-mini-main {
   display:none;
   border:1px solid #ccc;
   position:absolute;
   width:152px;
   padding:13px;
   margin-top:-1px;
   background:#fff;
   overflow:hidden
}
#categorys-mini-main h3 {
   font-family:"Microsoft YaHei";
   color:#666;
   line-height:24px;
   font-size:14px;
   font-weight:400
}
#categorys-mini-main a {
   color:#666;
   padding:0;
   font-size:12px
}
#categorys-mini {
   float:left;
   color:#666;
   font-size:12px;
   font-weight:400;
   position:relative;
   padding-top:22px;
   height:27px;
   font-family:simsun
}
#categorys-mini .cw-icon {
   color:#ccc;
   position:relative;
   width:63px;
   height:25px;
   border:1px solid #ccc;
   line-height:25px;
   z-index:1;
   background:#fff;
   padding:0 5px
}
#categorys-mini .cw-icon h2 {
   font-family:"Microsoft YaHei";
   color:#666;
   font-size:12px;
   font-weight:400
}
#categorys-mini .cw-icon i {
   top:9px;
   right:5px;
   height:7px;
   font:400 15px/15px consolas
}
#categorys-mini .cw-icon s {
   position:relative;
   top:-7px;
   text-decoration:none
}
#categorys-mini .loading {
   display:block;
   height:50px;
   background:url(../images/loading.gif) no-repeat center center
}
#categorys-mini .dorpdown-layer {
   width:150px;
   border:1px solid #ccc;
   padding:10px;
   background:#fff
}
#categorys-mini .ci-right {
   top:8px;
   right:7px;
   height:7px;
   overflow:hidden;
   font:400 15px/15px consolas;
   color:#6A6A6A;
   transition:transform .1s ease-in 0s;
   -webkit-transition:-webkit-transform .1s ease-in 0s;
   display:block;
   position:absolute
}
#categorys-mini.hover .cw-icon {
   border-bottom:0
}
#categorys-mini.hover .ci-right {
   transform:rotate(180deg);
   -webkit-transform:rotate(180deg)
}

#hotwords-2014 {
   float:left;
   width:462px;
   height:20px;
   line-height:20px;
   overflow:hidden
}
#hotwords-2014 a {
   float:left;
   white-space:nowrap;
   margin-right:10px
}
#shelper {
   overflow:hidden;
   position:absolute;
   top:36px;
   left:0;
   width:379px;
   border:1px solid #CCC;
   background:#fff
}
#shelper li {
   overflow:hidden;
   padding:1px 6px;
   line-height:22px;
   cursor:pointer
}
#shelper .search-item {
   float:left;
   width:190px;
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden
}
#shelper li.fore1 .search-item {
   width:170px
}
#shelper .search-count {
   overflow:hidden;
   color:#aaa;
   text-align:right;
   *zoom:1
}
#shelper .close {
   border-top:1px solid #efefef;
   text-align:right
}
#shelper .item3 {
   cursor:default
}
#shelper .item3 a {
   float:left;
   margin-right:10px;
   white-space:nowrap
}
#shelper li.fore1 {
   width:100%;
   padding:0;
   border-bottom:1px solid #ddd
}
#shelper li.fore1 .item1 {
   height:22px;
   overflow:hidden;
   zoom:1
}
#shelper li.fore1 div.fore1 {
   padding:0 6px
}
#shelper li.fore1 strong {
   color:#C00
}
#shelper li.fore1 .fore1 strong {
   color:#333
}
#shelper li.fore1 .item1,#shelper li.fore1 .item2 {
   float:none;
   width:auto;
   padding:1px 6px 1px 20px
}
#shelper li.fore1 .item3 {
   float:none;
   width:auto;
   color:#9C9A9C
}
#shelper li.fore1 span {
   float:left
}
#shelper li.close:hover,#shelper li.fore1:hover {
   background:0 0
}
#shelper li.fore1 div:hover {
   background:#f5f5f5!important
}
#shelper li.brand-search {
   border-bottom:1px solid #ddd;
   font-family:Microsoft YaHei
}
#shelper li.brand-search .info {
   color:#e4393c;
   margin-bottom:2px
}
#shelper li.brand-search .bs-item {
   margin-bottom:7px
}
#shelper li.brand-search .bs-item .logo {
   width:90px
}
#shelper li.brand-search .bs-item .logo,#shelper li.brand-search .bs-item .name {
   display:inline-block;
   height:30px;
   font-size:14px;
   vertical-align:middle;
   overflow:hidden
}
#shelper li.brand-search .bs-item .name {
   line-height:30px;
   margin-left:5px;
   white-space:nowrap;
   text-overflow:ellipsis;
   width:265px
}
.root61 #shelper li.brand-search .bs-item .name {
   width:340px
}
.root61 #search-2014,.root61 #search-2014 .form {
   width:auto;
   _width:538px
}
.root61 #search-2014 .text {
   width:446px
}
.root61 #hotwords-2014 {
   width:518px
}
.root61 #shelper {
   width:455px
}
#appdownloadTop {
   display:none
}

/* jdf-1.0.0/ nav.css Date:2015-09-15 18:39:10*/
   @charset "UTF-8";
   #nav-2014 {
   height:44px;
   border-bottom:2px solid #B1191A;
   _overflow:hidden
}
#nav-2014 .w {
   position:relative;
   z-index:9;
   height:44px
}
#nav-2014 .w .w-spacer {
   display:none
}
#nav-2014 .w-spacer {
   position:absolute;
   top:-1px;
   z-index:1;
   width:100%;
   height:44px;
   border-top:1px solid #DDD;
   border-bottom:2px solid #B1191A
}
#categorys-2014 {
   float:left;
   position:relative;
   z-index:10;
   width:210px;
   height:44px;
   overflow:visible;
   background:#B1191A
}
#categorys-2014 .dt a {
   display:block;
   width:190px;
   height:44px;
   padding:0 10px;
   background:#B1191A;
   font:400 15px/44px "microsoft yahei";
   color:#fff;
   text-decoration:none
}
#categorys-2014 .dt s {
   position:relative;
   top:-9px;
   text-decoration:none
}
#categorys-2014 .dt .ci-right {
   top:20px;
   right:7px;
   height:7px;
   overflow:hidden;
   font:700 20px/16px simsun;
   color:#fff;
   transition:transform .1s ease-in 0s;
   -webkit-transition:-webkit-transform .1s ease-in 0s;
   display:block;
   position:absolute
}
#categorys-2014 .dd {
   height:466px;
   background:#c81623;
   margin-top:2px
}
#categorys-2014 .dd-inner .item {
   border-left:1px solid #b61d1d;
   position:relative;
   z-index:1;
   height:31px;
   color:#fff
}
#categorys-2014 .dd-inner .item a {
   color:#fff
}
#categorys-2014 .dd-inner h3 {
   position:absolute;
   z-index:2;
   height:31px;
   padding:0 10px;
   line-height:31px;
   font-family:"microsoft yahei";
   font-size:14px;
   font-weight:400
}
#categorys-2014 .dd-inner i {
   position:absolute;
   z-index:1;
   top:9px;
   right:14px;
   width:4px;
   height:14px;
   font:400 9px/14px consolas
}
#categorys-2014 .dd-inner .hover {
   background:#f7f7f7;
   color:#B61D1D
}
#categorys-2014 .dd-inner .hover a {
   color:#B61D1D
}
#categorys-2014 .dd-inner .hover i {
   top:0;
   left:205px;
   width:14px;
   height:31px;
   background:#f7f7f7;
   overflow:hidden;
   line-height:200px
}
#categorys-2014 .dorpdown-layer {
   display:none;
   position:absolute;
   left:209px;
   top:45px;
   width:779px;
   background:#f7f7f7;
   border:1px solid #b61d1d;
   overflow:hidden
}
#categorys-2014 .dorpdown-layer .hover {
   display:block
}
#categorys-2014 .item-sub {
   display:none;
   zoom:1;
   overflow:hidden
}
#categorys-2014 .item-sub:after {
   content:".";
   display:block;
   height:0;
   clear:both
}
#categorys-2014 .item-channels {
   float:left;
   display:inline;
   width:570px;
   height:24px;
   padding:20px 0 0 20px;
   background:#f7f7f7;
   overflow:hidden
}
#categorys-2014 .item-channels a {
   float:left;
   display:inline;
   display:inline-block;
   *display:inline;
   *zoom:1;
   padding:0 0 0 8px;
   margin-right:10px;
   line-height:24px;
   background:#7C7171;
   color:#fff;
   white-space:nowrap
}
#categorys-2014 .item-channels a:hover {
   background:#C81623
}
#categorys-2014 .item-channels a:hover i {
   background:#B1191A
}
#categorys-2014 .item-channels i {
   display:inline-block;
   *zoom:1;
   _display:inline;
   margin-left:8px;
   width:23px;
   height:24px;
   font:400 9px/24px consolas;
   background:#5c5251;
   text-align:center;
   cursor:pointer
}
#categorys-2014 .item-channels .line {
   border-left:1px solid #dbdbdb;
   display:inline;
   float:left;
   height:24px;
   margin-right:7px;
   width:1px;
   overflow:hidden
}
#categorys-2014 .item-channels .img-link {
   background:0 0;
   line-height:normal;
   padding:0
}
#categorys-2014 .item-channels .img-link:hover {
   background:0 0
}
#categorys-2014 .item-channels .style-red {
   background:#c81623
}
#categorys-2014 .item-channels .style-red i {
   background:#b1191a
}
#categorys-2014 .item-channels .style-red:hover {
   background:#961019
}
#categorys-2014 .item-channels .style-red:hover i {
   background:#851313
}
#categorys-2014 .subitems {
   float:left;
   width:570px;
   padding:6px 0 1006px 20px;
   margin-bottom:-1000px;
   background:#f7f7f7;
   min-height:409px;
   _height:409px;
   _overflow:visible
}
#categorys-2014 .subitems dl {
   width:100%;
   overflow:hidden;
   line-height:2em
}
#categorys-2014 .subitems dl.fore1 dd {
   border-top:none
}
#categorys-2014 .subitems dt {
   position:relative;
   float:left;
   width:54px;
   padding:8px 30px 0 0;
   text-align:right;
   font-weight:700
}
#categorys-2014 .subitems dt i {
   position:absolute;
   top:13px;
   right:18px;
   width:4px;
   height:14px;
   font:400 9px/14px consolas
}
#categorys-2014 .subitems dd {
   float:left;
   width:480px;
   padding:6px 0;
   border-top:1px solid #eee
}
#categorys-2014 .subitems dd a {
   float:left;
   padding:0 8px;
   margin:4px 0;
   line-height:16px;
   height:16px;
   border-left:1px solid #e0e0e0;
   white-space:nowrap
}
#categorys-2014 .subitems .style-red {
   color:#c81623
}
#categorys-2014 .item-brands {
   float:right;
   display:inline;
   width:168px;
   overflow:hidden;
   margin:19px 20px 10px 0
}
#categorys-2014 .item-brands a {
   float:left;
   display:inline;
   margin:1px 0 0 1px
}
#categorys-2014 .item-promotions {
   float:right;
   display:inline;
   width:168px;
   margin-right:20px
}
#categorys-2014 .item-promotions a {
   display:block;
   margin-bottom:1px
}
#nav-2014 .hover .dt .ci-right {
   transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   _top:17px
}
#navitems-2014 {
   float:left;
   position:relative;
   z-index:2
}
#navitems-2014 .spacer,#navitems-2014 a,#navitems-2014 li,#navitems-2014 ul {
   float:left
}
#navitems-2014 .spacer {
   display:none
}
#navitems-2014 a {
   height:44px;
   padding:0 20px;
   text-align:center;
   text-decoration:none;
   font:400 15px/44px "microsoft yahei";
   color:#333
}
#navitems-2014 a:hover {
   color:#C81623
}
#navitems-2014 .spacer {
   width:1px;
   height:24px;
   margin:10px 0 0;
   background:#DDD;
   overflow:hidden
}
#treasure {
   float:right
}
.root61 #categorys-2014 .item-channels {
   width:790px
}
.root61 #categorys-2014 .dorpdown-layer {
   width:999px
}
.root61 #categorys-2014 .subitems {
   width:790px
}
.root61 #categorys-2014 .subitems dd {
   width:620px
}
.root61 #categorys-2014 .subitems-main1,.root61 #categorys-2014 .subitems-main2 {
   float:left;
   width:365px;
   padding-right:10px;
   margin-right:10px;
   border-right:1px solid #eee;
   margin-top:8px
}
.root61 #categorys-2014 .subitems-main1 dd,.root61 #categorys-2014 .subitems-main2 dd {
   width:275px
}
.root61 #categorys-2014 .subitems-main1 .fore1,.root61 #categorys-2014 .subitems-main1 .fore8,.root61 #categorys-2014 .subitems-main2 .fore1,.root61 #categorys-2014 .subitems-main2 .fore8 {
   margin-top:-5px
}
.root61 #categorys-2014 .subitems-main1 .fore1 dd,.root61 #categorys-2014 .subitems-main1 .fore8 dd,.root61 #categorys-2014 .subitems-main2 .fore1 dd,.root61 #categorys-2014 .subitems-main2 .fore8 dd {
   border-top:0
}
.root61 #categorys-2014 .subitems-main2 {
   border-right:0
}

#settleup-content {
   position:relative;
   z-index:2;
   width:100%;
   background:#fff
}
#settleup-content .loading {
   display:block;
   height:50px;
   background:url(../images/loading.gif) no-repeat center center
}
#settleup-content .smt {
   height:25px;
   padding:6px 8px;
   line-height:25px
}
#settleup-content .smc {
   background:#fff;
   height:auto!important;
   height:344px;
   max-height:344px;
   overflow-y:auto
}
#settleup-content .smb {
   padding:8px;
   background:#F5F5F5;
   _height:45px;
   _padding-top:15px;
   _padding-bottom:0
}
#settleup-content .smb .p-total {
   float:left;
   line-height:29px
}
#settleup-content .smb span {
   color:#c81623
}
#settleup-content .smb a {
   float:right;
   height:29px;
   padding:0 10px;
   background:#E4393C;
   color:#fff;
   text-align:center;
   font-weight:700;
   line-height:29px;
   border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px
}
#settleup-content ul {
   margin-top:-1px
}
#settleup-content li {
   padding:8px 10px;
   border-top:1px dotted #ccc;
   overflow:hidden;
   line-height:17px;
   vertical-align:bottom;
   *zoom:1
}
#settleup-content li.hover,#settleup-content li:hover {
   background:#F5F5F5
}
#settleup-content li .gift {
   height:17px;
   width:282px;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap
}
#settleup-content li .gift a {
   color:#999
}
#settleup-content li .gift-jq {
   color:#999;
   clear:both
}
#settleup-content .p-img {
   float:left;
   width:50px;
   height:50px;
   border:1px solid #ddd;
   padding:0;
   margin-right:10px;
   font-size:0
}
#settleup-content .p-name {
   float:left;
   width:120px;
   height:52px
}
#settleup-content .p-detail {
   float:right;
   text-align:right
}
#settleup-content .p-price {
   font-weight:700
}
#settleup-iframe {
   position:absolute;
   left:0;
   top:0;
   z-index:1;
   width:100%;
   background:#fff
}
#settleup-2014 .dt-mz {
   color:#999;
   width:310px;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap
}
#settleup-2014 .dt-mz a {
   color:#999
}
#settleup-2014 .dt-mz:hover {
   background:#fff
}
#mcart-suit .dt,#mcart-suit .dt:hover {
   background:#d3ebff
}
#mcart-mj .dt,#mcart-mj .dt:hover,#mcart-mz .dt,#mcart-mz .dt:hover {
   background:#bffab1
}
#settleup-content .fr .hl-green,#settleup-content .fr .hl-orange {
   margin-right:0
}
#settleup-content .hl-green,#settleup-content .hl-orange {
   margin-right:5px;
   color:#fff;
   display:inline-block;
   *zoom:1;
   padding:0 2px;
   font:12px/16px simsun
}
#settleup-content .hl-green {
   background:#3b0
}
#settleup-content .hl-orange {
   background:#f60
}
.root61 #settleup-2014 {
   margin-right:65px
}
#settleup-2014.hover .ci-left {
   _background:url(../images/jd2015img.png) 0 -116px no-repeat
}
/* jdf-1.0.0/ global-footer.css Date:2015-09-15 18:39:12*/
   #footer-2014 {
   border-top:1px solid #E5E5E5;
   padding:20px 0 30px;
   text-align:center
}
#footer-2014 .links a {
   margin:0 10px
}
#footer-2014 .copyright {
   margin:10px 0
}
#footer-2014 .authentication a {
   margin:0 5px;
   text-decoration:none
}
/* jdf-1.0.0/ service.css Date:2015-09-25 09:37:10*/
   #service-2014 {
   margin-bottom:20px
}
#service-2014 dl {
   float:left;
   width:222px
}
#service-2014 dl.fore5 {
   width:100px
}
#service-2014 dt {
   padding:6px 0;
   font:400 16px/24px "microsoft yahei"
}
#service-2014 dd {
   line-height:20px
}

#coverage {
   float:right;
   width:310px;
   height:168px;
   background:url(../images/20130330B_1.png) no-repeat 60px -131px
}
#coverage .dt {
   padding:6px 40px 15px 80px;
   font:400 16px/24px "microsoft yahei"
}
#coverage .dd {
   padding:0 40px 15px 80px
}
.root61 #service-2014 dl {
   width:275px
}
.root61 #service-2014 dl.fore5 {
   width:100px
}
.root61 #service-2014 .slogen .item {
   width:302px
}
.root61 #service-2014 .slogen .fore1 {
   margin-left:-604px
}
.root61 #service-2014 .slogen .fore2 {
   margin-left:-304px
}
.root61 #service-2014 .slogen .fore3 {
   margin-left:0
}
.root61 #service-2014 .slogen .fore4 {
   margin-left:304px
}
/* jdf-1.0.0/ basePatch.css Date:2015-09-15 18:39:12*/
   .m,.mb,.mc,.mt,.sm,.smb,.smc,.smt {
   overflow:hidden;
   /*zoom:1*/
}
.m,.sm {
   margin-bottom:10px
}
.mt h2,.smt h3 {
   font-family:"microsoft yahei"
}
.slide-controls span {
   display:inline-block;
   color:#fff
}
.pagin>a,.pagin>span {
   cursor: pointer;
   float:left;
   height:20px;
   padding:3px 10px;
   border:1px solid #ccc;
   margin-left:2px;
   font-family:arial;
   line-height:20px;
   font-size:14px;
   overflow:hidden;
   -moz-border-radius:5px;
   -webkit-border-radius:5px
}
.pagin > em {padding-top:5px;margin-right:10px;
}
.pagin .current,.pagin .text {
   border:none;
   padding:4px 11px
}
.pagin a:link,.pagin a:visited {
   color:#005aa0
}
.pagin a:active,.pagin a:hover {
   background:#005aa0;
   color:#fff;
   text-decoration:none
}
.pagin .current,.pagin .current:link,.pagin .current:visited {
   color:#f60;
   font-weight:700
}
.pagin b {
   display:block;
   position:absolute;
   top:9px;
   width:5px;
   height:9px;
   background-image:url(../images/bg_hotsale.gif);
   background-repeat:no-repeat;
   overflow:hidden
}
.pagin .next,.pagin .next-disabled,.pagin .prev,.pagin .prev-disabled {
   position:relative;
   padding-top:5px;
   height:18px;
   line-height:18px
}
.pagin .next-disabled,.pagin .prev-disabled {
   color:#ccc;
   cursor:default
}
.pagin .prev,.pagin .prev-disabled {
   padding-left:12px
}
.pagin .prev b {
   left:3px;
   background-position:-68px -608px
}
.pagin .prev-disabled b {
   left:3px;
   background-position:-80px -608px
}
.pagin .next,.pagin .next-disabled {
   padding-right:12px
}
.pagin .next b {
   right:3px;
   background-position:-62px -608px
}
.pagin .next-disabled b {
   right:3px;
   background-position:-74px -608px
}
.pagin-m a,.pagin-m span {
   height:14px;
   line-height:14px;
   font-size:12px
}
.pagin-m b {
   top:5px
}
.pagin-m .next,.pagin-m .next-disabled,.pagin-m .prev,.pagin-m .prev-disabled {
   padding-top:3px;
   height:14px;
   line-height:14px;
   *line-height:16px
}
.thickframe {
   position:fixed;
   top:0;
   left:0;
   z-index:10000000;
   width:100%;
   height:100%;
   background:#000;
   border:0;
   filter:alpha(opacity=0);
   opacity:0
}
.thickdiv {
   position:fixed;
   top:0;
   left:0;
   z-index:10000001;
   width:100%;
   height:100%;
   background:#000;
   border:0;
   filter:alpha(opacity=15);
   opacity:.15
}
.thickbox {
   position:absolute;
   z-index:10000002;
   overflow:hidden;
   padding:0;
   border:4px solid rgba(0,0,0,.1);
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px
}
.thicktitle {
   height:27px;
   padding:0 10px;
   border:solid #C4C4C4;
   border-width:1px 1px 0;
   background:#F3F3F3;
   line-height:27px;
   font-family:arial,"\5b8b\4f53";
   font-size:14px;
   font-weight:700;
   color:#333
}
.thickclose:link,.thickclose:visited {
   display:block;
   position:absolute;
   z-index:100000;
   top:7px;
   right:12px;
   overflow:hidden;
   width:15px;
   height:15px;
   background:url(../images/bg_thickbox.gif) no-repeat 0 -18px;
   font-size:0;
   line-height:100px
}
.thickcon {
   overflow:auto;
   background:#fff;
   border:solid #C4C4C4;
   border-width:1px;
   padding:10px
}
.thickloading {
   background:url(../images/loading.gif) #fff no-repeat center center
}
.thickcountdown {
   height:20px;
   padding-right:6px;
   margin-top:-20px;
   text-align:right;
   color:#999
}
*html .thickdiv,*html .thickframe {
   position:absolute
}
#thicktitler {
   padding:0 11px;
   background:#8DB7DC;
   border:none;
   color:#fff
}
#thickcloser:link,#thickcloser:visited {
   top:6px;
   right:9px;
   width:16px;
   height:17px;
   background-position:0 0
}
#thickconr {
   border:solid #8DB7DC;
   border-width:1px
}

.btn-1 {
background: #86d52c none repeat scroll 0 0;
border-radius: 2px;
color: #ffffff;
display: inline-block;
/* height: 18px; */
line-height: 20px;
padding: 2px 12px;
border: none;
}
.btn-1:hover{
background:#10c24a;
color:#ffffff;

}

.btn-10, .btn-11, .btn-12, .btn-9 {
background-color: #f7f7f7;
background-image: linear-gradient(to bottom, #f7f7f7 0px, #f3f2f2 100%);
border: 1px solid #ddd;
border-radius: 2px;
color: #323333;
display: inline-block;
/*height: 18px;*/
line-height: 18px;
padding: 2px 12px 3px;
}
/*绿底*/
button.btn-2 {
line-height: 22px;
}

.btn-2 {
background: #86d52c none repeat scroll 0 0;
border-radius: 2px;
color: #ffffff;
display: inline-block;
/*height: 18px;*/
line-height: 20px;
padding: 2px 12px ;
border:none;
}
.btn-2:hover {
background:#038d41 ;
}
/*绿边*/
.btn-21{
background: #fff none repeat scroll 0 0;
border: 1px solid #05c82d ;
border-radius: 2px;
color: #05c82d;
display: inline-block;
font-weight: 700;
/*height: 18px;*/
line-height: 18px;
padding: 2px 12px 3px;
margin:3px;
text-align: center;

}
.btn-21:hover {
background: #05c82d none repeat scroll 0 0;
color:#ffffff;
}
/*红*/
a.btn-31{
background: #fff none repeat scroll 0 0;
border: 1px solid #e4393c;
border-radius: 2px;
color: #e4393c;
display: inline-block;
font-weight: 700;
height: 18px;
line-height: 18px;
padding: 2px 12px 3px;
text-align: center;
margin:3px;

}
/*/灰/*/
.btn4 {
color:#aaa
}
/*橙色*/
.btn5 {
color:#f2890e;display:block;
line-height:28px;
}

.btn-31:hover {
background: #e4393c none repeat scroll 0 0;
color:#ffffff;
}
.mb10 {
margin-bottom: 10px;
}

input[type="reset"].btn-9 { height:auto;
}
/*没有订单*/
.nocont-box {
   color:#999;
   text-align:center
}
.nocont-box b {
   display:inline-block;
   *display:inline;
   *zoom:1;
   vertical-align:middle;
   background:url(../images/nocont-icons.png) no-repeat;
   overflow:hidden;
   margin-right:20px
}
.nocont-box b.icon-order {
   width:70px;
   height:70px;
   background-position:0 0
}
.nocont-order {
   margin:60px 0 90px
}
/*.btn { background-position: 0% 0%;
border: 1px solid #ccc;
line-height:20px; padding: 2px 16px 3px;
background-image: linear-gradient(to bottom,#f7f7f7 0,#f2f2f2 100%)!important;
background-repeat: repeat-x !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7',endColorstr='#f2f2f2',GradientType=0)!important;
background-color: #ededed !important;
background-attachment: scroll !important;
display:inline-block;
}*/
.btn-31 {
}
.btn-5 ,.btn-6,.btn-61, .btn-7, .btn-8 {

border: 1px solid #bfd6af;
border-radius: 1px;
color: #323333;
display: inline-block;
height: 18px;
line-height: 18px;
padding: 2px 14px 3px;
margin: 3px;
}
/*确定，红色*/
.btn-ok {

border: 1px solid #ffb0b0;
background:#ffdcdc !important;
color:#e4393c;
background-image:none !important;
display:inline-block;
}
.btn-ok:hover {
color: #ff0303;
}
/*确定，灰*/
.btn-com {
border: 1px solid #ddd;
background:#ddd !important;

background-image:none !important;
display:inline-block;
}
.btn-com:hover {
background:#f7f7f7 !important;
color: #ff0303;
}
/*蓝色报备按钮*/
.btn6 {
color:#1531b6
}
.btn-6{color:#ffffff;
border: 1px solid #296ecd ;
background-color:#2747dd;
   background-image:-moz-linear-gradient(top,#296ecd,#1531b6 );
   background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#296ecd),color-stop(1,#296ecd));
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#296ecd', endColorstr='#1531b6', GradientType='0');
   -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#296ecd', endColorstr='#1531b6');
   background-image:linear-gradient(to bottom,#296ecd 0,#2161ba 100%)

}
.btn-6:hover {
background-color:#296ecd;
background-image:linear-gradient(to bottom,#296ecd 0,#296ecd 90%);
color:#f7f7f7;
}
.btn-61 {
color: #296ecd;
border: 1px solid #296ecd;

}
a.btn-combine, a.btn-pay {
background: #fff none repeat scroll 0 0;
border: 1px solid #e4393c;
border-radius: 2px;
color: #e4393c;
display: inline-block;
font-weight: 700;
height: 18px;
line-height: 18px;
margin: 3px 0;
padding: 2px 0;
text-align: center;
width: 85px;
}
a.btn-combine:hover, a.btn-pay:hover {
background: #e4393c none repeat scroll 0 0;
color: #fff;
font-weight: 400;
}
a.btn-5 {
background-color: #fff;
border: 1px solid #71b247;
border-radius: 2px;
color: #71b247;
font-weight: 700;
margin: 3px 0;
padding: 2px 0 3px;
text-align: center;
width: 85px;
   display: inline-block;
}
/*取消按钮*/
a.btn-0 {
background-color:#f2f2f2;
border: 1px solid #ccc;
border-radius: 2px;
color: #999;
font-weight: 700;
margin: 3px 0;
padding: 2px 0 3px;
text-align: center;
width: 85px;
   display: inline-block;
}
/*新加*/
a.btn-5:hover{
background-image: linear-gradient(to bottom, #f5fbef 0px, #d5fbaf 100%);
}
.remind-box {
background: #fffdee none repeat scroll 0 0;
border: 1px solid #edd28b;
padding: 10px;
}
.remind-box .smt {
display: block;
}
.remind-box .smt::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
* html .remind-box .smt {
height: 1%;
}
* + html .remind-box .smt {
min-height: 1%;
}
.remind-box .info-list li {
float: left;
margin-right: 20px;
}
.remind-box .info-list strong {
font-size: 14px;
}
.remind-box .smc {
border-top: 1px solid #f2f2f2;
line-height: 22px;
margin-top: 10px;
padding-top: 10px;
}
.mod-main .mt h3 {
float: left;
font-family: "Microsoft YaHei";
font-size: 16px;
color: #333;
line-height: 20px;
}
.mod-main .mt .extra-r {
float: right;
}
.mod-main {
background-color: #fff;
margin-bottom: 20px;
padding: 10px;

}

.mod-main img { max-width:100%; /*使底部广告不出界*/
}
.mod-main .mt {
display: block;
padding: 10px;
}
.mod-main .mt::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
* html .mod-main .mt {
height: 1%;
}
* + html .mod-main .mt {
min-height: 1%;
}

.mod-main .mt .extra-l {
float: left;
}
.mod-main .mt .extra-l li {
float: left;
padding-left: 20px;
line-height:27px;
}
.mod-main .mt .extra-l li a {
color: #999;
display: inline-block;
padding-bottom: 2px;
}
.mod-main .mt .extra-l li a:hover, .mod-main .mt .extra-l li a:hover em {
color: #e4393c;
}
.mod-main .mt .extra-l li a.curr {
border-bottom: 2px solid #e4393c;
color: #e4393c;
cursor: pointer;
font-weight: 700;
padding-bottom: 0;
text-decoration: none;
}
.mod-main .mt .extra-l li.fore-last {
border-right: 0 none;
}
.mod-main .mt .extra-l em {
margin-left: 5px;
}
.mod-main .mt .extra-r {
float: right;
}
.mod-main .mc {
overflow: visible;
}
.ftx-01, .ftx01 {
color: #e4393c;
}
.ftx-02, .ftx02 {
color: #71b247;
}
/*绿色*/
.tgreen {
color:#2fc205;
color:#296ecd;
}
.tblue {
}

.tip-box h3 {
font-family: "Microsoft YaHei";
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
.icon-box .m-icon {
background: rgba(0, 0, 0, 0) url("../images/icon48.png") no-repeat scroll 0 0;
display: inline-block;
height: 48px;
left: 0;
position: absolute;
top: 0;
width: 48px;
}
.icon-box .succ-icon {
background-position: 0 0;
}
.ftx-02, .ftx02 {
color: #71b247;
}
.tip-box h3 {
font-family: "Microsoft YaHei";
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
.icon-box {
position: relative;
}
.icon-box .item-fore {
margin-left: 58px;
}

/*.tb-void a {
color: #c81623;
}*/

#waitforcallback { display:none;
position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;
z-index: 200; background: none 0% 0% repeat scroll rgba(0, 0, 0, 0.5);
}
#waitforcallback div {
position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;
background:url(/https/blog.csdn.net/images/callbackloading.gif) no-repeat center center;
}

/*处理中遮罩*/
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0);
}

100% {
-webkit-transform: rotate(360deg);
}
}
.loagMask {
display:none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9998;
background: rgba(0,0,0,.28);
background-color:#373737;
opacity:0.5;
   filter:alpha(opacity=50);
/*alpha(opacity=“50");*/
}
.sn-mask-loading:after {
   content:"";
   position:absolute;
   height:36px;
width:36px;
/*旋转背景为何去掉了*/
   background:url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkBAMAAAATLoWrAAAAAG5wVGOkIJ/OAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAbUExURQAAAP///////////////////////////////+tNPsIAAAAJdFJOUwD+ELHdi00wbfD3fpAAAADbSURBVCjPY2CgDLBnBBtHFCCLsIWGGgNBE5Ka1tBgoIiJcwJcqKI1NF2BqcLExQOuraMDbAybiUsAVKisA6pB1cUVwmBKS4epb3GBSLKnwW1ndXEC0+rlcHuYoBaUFyGckygClilHcjWLIMgwJiUFhBCHYABYCNlnggboQkyCDiBSATkABAUwQglTCKIRBUCMRwGsggHoQhCnooBEQQzTHUXRhZgFhdCFAlGMUgZhQWR97I4gR6G4qlGQKdURRZGyIBggm2QIFgliQFPliubwRkHM1OSImcKU4SwAH1UgWePsA0wAAAAASUVORK5CYII=);
   background-size:36px ;
background-size:contain;
   top:50%;
   left:50%;
   margin:-18px 0 0 -18px
}
.sn-mask-loading:after {

   -webkit-animation:rotate .7s infinite;
   -webkit-animation-timing-function:linear
}
.sn-mask-loading.fixedLoading {
position: fixed;
left: 50%;
top: 50%;
margin: -.36rem 0 0 -.36rem;
z-index: 9999;
}
.sn-mask-loading {
width: 40px;
height: 40px;
background: rgba(0,0,0,.3);
border-radius: 3px;

}

.mc {
margin-bottom: 15px;
}

.form .item {
   /*display:inline-block;*/
   margin-bottom:15px;
   line-height:25px;
width:100%;
}
.form .item span.label {
   float:left;
   height:18px;
   line-height:18px;
   padding:4px 0 3px;
   width:120px;
   text-align:right
}
.form .itxt { line-height:30px;
height: 30px;
width: 155px;
padding:0 5px;
}
.form .itxt04 {
width: 314px;
}
.form em {
color: #e4393c;
}
.form .item:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.form select {
height:30px; line-height:30px;}
/*浮动的块*/
.form .itembox { text-align:left; float:left; width:500px;line-height:20px;
display:-webkit-box}

.style-red {
color:#e4393c;}
.bigprice {
font-size:14px; color:#e4393c;}
.price {color:#e4393c;
}
.Calculation {
margin:0 10px;
color:#088f13;
}
.green,.green a {
color:green
}
.blue ,.blue a {
color:#0086dc}
.red ,.red a{
color: #c81623;
}
.gray {
color:#aaa}

.bgtip {
border:dotted 1px #febfbf; background: #fdffee;
}
.ftx-04, .ftx04 {
color: #ff6c00;
}
/*灰色*/
.ftx-13 {
color: #aaa;
}

/*状态图*/
#process .dot {
background:#9bcf00;
border-radius:8px;
display:inline-block;
height:12px;
width:12px;
line-height:11px;
text-align:center;
margin-top:5px;
color:#ffffff;
}
#process .dot.nodo {
background:#ccc;
border-radius:8px;
display:inline-block;
height:12px;
width:12px;
line-height:11px;
text-align:center;
margin-top:5px;
color:#ffffff;
}
#process {
margin: 0 auto;
/*padding: 20px 0 0 20px;*/
}
#process .node, #process .proce {
float: left;
position: relative;
height: 13px;
background-image: url(../images/sping_bj.jpg) ;

background-repeat: no-repeat;
}
.node.ready {
background-position: -45px 0;
}
.node.wait {
background-position: -45px -40px;
}
.proce.wait {
background-position: 0 -40px;
}
#process .node {
width: 13px;
}
#process .proce {
width: 45px;
border: solid #fff;
border-width: 0 5px;

}
#process .node ul {
z-index: 1;
width: 40px;
margin-left: -18px;
}
#process ul {
position: absolute;
margin-top: -38px;
text-align: center;
}
table.no_border {
border:none;}
table.no_border th {
text-align:right;
font-weight:normal;
padding:3px 5px;
}
table.no_border td {
text-align:left;}

ul.list {
margin-top:10px;}
ul.list li { float:left;
width:50%;
line-height:30px;
}
ul.list li label {
width:106px;
display:inline-block;
text-align:right
}
i.caigou {
display:inline-block;
background:url(../images/caigou.png) no-repeat; width:16px; height:16px;margin-top:2px;
}
.search .btn i {
background-size:contain; }
i.redbag {
display:inline-block;
background:url(../images/iredbag.png) no-repeat 0 0; width:15px; height:15px;
margin-left: 5px;
vertical-align:middle;
}
i.vidio {
display:inline-block;
background:url(../images/ividio.png) no-repeat 0 0; width:15px; height:15px; margin-left: 5px;
vertical-align:middle;
}

/*弹框*/
.tm-dialog-body {
/*height: auto;*/
padding:10px;
background: #ffffff;
text-align:left;
overflow-y:auto;
}
.tm-dialog-body .form .item,
.dialog-body .form .item {
margin-bottom: 6px;
}
.tm-dialog-body .ButtonRow {
border-top: 1px solid #DADEE5;
padding: 10px 20px;
text-align: right;
background-color: #f6f6f6;
}
.tm-dialog-body .item-list {
max-height: 370px;
overflow-y: auto;
/*width:876px;*/
}
.tm-dialog-body input[type=text] {
/*height:17px;*/

}
/*new*/
.dialog-body{ padding:10px; height:550px;
background: #ffffff; overflow-y:auto;
}
/*全职兼职授权*/
.Part-time, .Full-time,.authorization {
display:inline-block; width:16px;height:16px;

}
.Part-time { background:url(../images/iPart.png) no-repeat content-box ; background-size:cover;
}
.Full-time { background:url(../images/ifull.png) no-repeat ;background-size:cover;
}
.authorization {
background:url(../images/i-givep.png) no-repeat ;background-size:cover;
}
.order-tb td i {display:inline-block;
}
i.delete {
background:url(../images/close.png) ; background-size: contain;display:inline-block;width:11px;height:11px;margin-right:5px; }
i.ibill {position:relative;top:10px;
background:url(/https/blog.csdn.net/html/images/ibill.png) no-repeat;display:inline-block; height:30px; width:30px; background-size:contain; }
i.icontract {position:relative;top:10px;
background:url(/https/blog.csdn.net/html/images/icontract.png) no-repeat;display:inline-block; height:30px; width:30px; background-size:contain; }

i.seller{
background: url(/https/blog.csdn.net/html/images/iseller.png) no-repeat;
height: 16px;
width: 16px;position:relative; top:3px;margin-right:3px;
}

i.Customer{background:url(/https/blog.csdn.net/html/images/iCustomer.png) no-repeat;height:16px; width:16px; position:relative; top:3px;margin-right:3px;
background-size:contain;
}
/*数量增减框*/
.quantity-form {
margin:auto;}
.quantity-form .decrement {
   float:left
}
.quantity-form {
   height:22px;
position: relative;
width: 80px;
}
.quantity-form .decrement,
.quantity-form .increment {
   border:1px solid #cacbcb;
   border-right:0;
   height:18px;
   line-height:18px;
   padding:1px 0;
   width:16px;
   text-align:center;
   color:#666;
   margin:0;
   background:#fff
}
.quantity-form span.promo-num {
   width:80px;
   display:inline-block;
   text-align:center
}
.quantity-form .increment {
   float:right;
   border:1px solid #cacbcb;
   border-left:0;
   color:#666
}

.quantity-form .itxt {
border: 1px solid #cacbcb;
color: #333;
font-family: verdana;
font-size: 12px;
height: 18px;
left: 17px;
line-height: 18px;
margin: 0;
padding: 1px;
position: absolute;
text-align: center;
top: 0;
width: 42px;
}
.wbox {
display: -webkit-flex!important;
display: -webkit-box;
}
.wbox-flex {
-webkit-flex: 1!important;
-webkit-box-flex: 1;
word-wrap: break-word;
word-break: break-all;
}
i.reddot {display:inline-block;width:12px;height:12px;background:url(/https/blog.csdn.net/images/order-icon20150916.png)0 -111px;
}
i.flag{display:inline-block;margin:0 5px;
height:20px; width:20px;
background:url(/https/blog.csdn.net/html/images/iCABS.png) no-repeat center; }

/*鎼滅储鍟嗗搧涓虹┖鏃讹紝鎻愮ず杩涘叆鐩撮€氳溅*/
.notice-search{padding: 10px 0 20px 0;width: 675px;margin: 0 auto;}
.notice-search .ns-wrap{padding: 10px 0}
.notice-search .ns-icon{float: left;display: block;width: 32px;height: 32px;background: url(/https/blog.csdn.net/html/images/search.notice.png) no-repeat 0 2px}
.notice-search .ns-content{margin-left: 32px;line-height: 32px;padding-left: 10px;font-size: 14px;font-weight: 700;color: #f60}
.notice-search .ns-content span em{color: #333}
.Al{border: 1px solid #ccc;padding: 30px 10px;margin: 0 auto;}
.Al .zhitongche{padding-bottom:20px;font-size:24px;text-align:center;color:#ea5513;}
.Al .Full_form{width: 556px; margin:0 auto;}
.Al .Full_form .oneAlertForm{padding:10px 0;}
.Al .Full_form .oneAlertForm label{font-size:14px;color:#5c5c5c;text-align:left;width: 140px;display: inline-block;padding-right:7px;}
.Al .Full_form .oneAlertForm label em{color:#ff0000;}
.Al .Full_form .oneAlertForm input{width:351px;padding:5px;height:20px;line-height:20px;border:#ccc solid 1px;}
.Al .Full_form .oneAlertForm textarea{width:351px;padding:5px;height:70px;border:#ccc solid 1px;}
.Al .tip{padding:20px 0 20px 0;text-align:center;font-size:14px;color:#ccc;clear:both;}
.Al .button{display:block;width: 100%;text-align: center; margin-top:10px;}
.Al .button a{padding:10px 50px; text-align:center;color:#fff;font-size:14px;border-radius:5px;display:inline-block;margin:6px 10px; }
.Al .button .btn-submit{background:#ea5513;}
.Al .button .btn-cancel{background:#ccc;}

i.ipurchase, i.iarrival, i.icancel,i.inotice
{display:inline-block;height:16px;width:16px; margin:0 2px;margin-bottom: -3px; background-size:contain;
}
i.ipurchase {
background-image:url(/https/blog.csdn.net/html/images/ipurchase.png) ;}
i.iarrival {
background-image:url(/https/blog.csdn.net/html/images/iarrival.png) ;}
i.icancel {
background-image:url(/https/blog.csdn.net/html/images/icancel.png) }
i.inotice {
background-image:url(/https/blog.csdn.net/html/images/inotice.png) }
i.iclose {
background:url(/https/blog.csdn.net/html/images/sprite-operate.png) 3px -15px no-repeat;display:inline-block;height:16px;width:16px; margin: 0 2px;}
i.iallnotice{background:url(/https/blog.csdn.net/html/images/itx.png) no-repeat;display:inline-block;height:20px;width:20px; margin: 0 2px;}

.loagMask {
display:none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9998;
background: rgba(0,0,0,.28);
background:#000;
filter:alpha(opacity=28);
-moz-opacity:0.28;
-khtml-opacity: 0.28;
opacity: 0.28;
}
.sn-mask-loading:after {
   content:"";
   position:absolute;
   height:36px;
width:36px;
   background:url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkBAMAAAATLoWrAAAAAG5wVGOkIJ/OAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAbUExURQAAAP///////////////////////////////+tNPsIAAAAJdFJOUwD+ELHdi00wbfD3fpAAAADbSURBVCjPY2CgDLBnBBtHFCCLsIWGGgNBE5Ka1tBgoIiJcwJcqKI1NF2BqcLExQOuraMDbAybiUsAVKisA6pB1cUVwmBKS4epb3GBSLKnwW1ndXEC0+rlcHuYoBaUFyGckygClilHcjWLIMgwJiUFhBCHYABYCNlnggboQkyCDiBSATkABAUwQglTCKIRBUCMRwGsggHoQhCnooBEQQzTHUXRhZgFhdCFAlGMUgZhQWR97I4gR6G4qlGQKdURRZGyIBggm2QIFgliQFPliubwRkHM1OSImcKU4SwAH1UgWePsA0wAAAAASUVORK5CYII=);
   background-size:36px ;
background-size:contain;
   top:50%;
   left:50%;
   margin:-18px 0 0 -18px
}
.sn-mask-loading:after {

   -webkit-animation:rotate .7s infinite;
   -webkit-animation-timing-function:linear
}
.sn-mask-loading.fixedLoading {
position: fixed;
left: 50%;
top: 50%;
margin: -.36rem 0 0 -.36rem;
z-index: 9999;
}
.sn-mask-loading {
width: 40px;
height: 40px;
background: rgba(0,0,0,.3);
border-radius: 3px;
background:#000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;

}