/* ================================ */
/* 全局初始化		                */
/* ================================ */
/* ===============
 * 重新定义Html元素
 * =============== */
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, table, th, td { font-size: 1em; font-style: normal; font-weight: normal; }
strong { font-weight: bold; }
ul, ol { list-style: none outside none; }
fieldset, img { border: medium none; vertical-align: middle; }
caption, th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
body { font: 12px/20px "Hiragino Sans GB", "Microsoft Yahei", arial, 宋体, "Helvetica Neue", Helvetica, STHeiTi, sans-serif; color: #666; background: #FFF none repeat scroll 0 0; min-width: 1200px; }
input, select, textarea { font: 12px/20px Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; }
i, cite, em { font-style: normal; }
input, button, select, textarea { outline:none }
html { min-height:101%; }
/* 链接 */
a { color: #333; text-decoration: none; outline: medium none; -webkit-transition-property:color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; }
a:link, a:visited, a:active { text-decoration: none; }
a:hover { color: #C81623; text-decoration: none; }
/* 超出隐藏(需要再设置宽高) */
.over_hidden { display: block; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* input放大by input_max.js */
.parentCls { display: inline-block; *display: inline/*IE7*/;
*zoom: 1;
}
.js-max-input { font-size: 20px; color: #F40; background: #FFFAE5; white-space: nowrap; padding: 7px; border: solid 1px #FFD2B2; }
/* Clearfix,避免因子元素浮动而导致的父元素高度缺失能问题 */
	.clearfix:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
*html .clearfix { height:1%; }
*+html .clearfix { height:1%; }
time { color: #777; }
/* ==========================
 * 为旧版本浏览器格式化Html5元素
 * ========================== */
article, aside, dialog, footer, header, section, footer, nav, figure, menu { display:block; }
/*文字排版
******************************/
.f12 { font-size:12px; }
.f13 { font-size:13px; }
.f14 { font-size:14px; }
.f16 { font-size:16px; }
.f20 { font-size:20px; }
.fb { font-weight:bold; }
.fn { font-weight:normal; }
.t2 { text-indent:2em; }
.lh150 { line-height:150% }
.lh180 { line-height:180% }
.lh200 { line-height:200% }
.unl { text-decoration:underline; }
.no_unl { text-decoration:none; }
.noborder { border-style:none!important; border-width: 0!important; }
/*定位
******************************/
.tl { text-align:left !important; }
.tc { text-align:center !important; }
.tr { text-align:right !important; }
.bc { margin-right:auto; margin-left:auto; }
.fl { float:left; display:inline; }
.fr { float:right !important; display:inline; }
.cb { clear:both; }
.cl { clear:left; }
.cr { clear:right; }
.vm { vertical-align: middle; }
.vt { vertical-align: top; }
.pr { position:relative; }
.pa { position:absolute; }
.abs-right { position:absolute; right:0; }
.zoom { zoom:1 }
/*.hidden { visibility:hidden;*/}
.none { display:none; }
.clear { clear: both; height: 0; font-size: 0; line-height:0; }
/*长度高度
******************************/
.w10 { width:10px; }
.w20 { width:20px; }
.w30 { width:30px; }
.w40 { width:40px !important; }
.w50 { width:50px !important; }
.w60 { width:60px !important; }
.w65 { width:65px !important; }
.w70 { width:70px !important; }
.w80 { width:80px !important; }
.w90 { width:90px; }
.w96 { width: 96px; }
.w100 { width:100px !important; }
.w110 { width:110px !important; }
.w120 { width:120px !important; }
.w130 { width:130px !important; }
.w150 { width:150px !important; }
.w160 { width:160px; }
.w180 { width:180px; }
.w200 { width:200px !important; }
.w210 { width:210px !important; }
.w230 { width:230px; }
.w240 { width:240px; }
.w250 { width:250px !important; }
.w270 { width:270px; }
.w300 { width:300px !important; }
.w340 { width:340px; }
.w380 { width:380px; }
.w400 { width:400px!important; }
.w450 { width:450px!important; }
.w500 { width:500px; }
.w530 { width:530px; }
.w600 { width:600px !important; }
.w700 { width:700px; }
.w780 { width: 780px; }
.w800 { width:800px; }
.w208 { width: 208px; }
.w { width:100%; }
.h20 { height: 20px !important; }
.h30 { height: 30px !important; }
.h40 { height: 40px !important; }
.h50 { height: 50px !important; }
.h80 { height: 80px; }
.h100 { height:100px !important; }
.h200 { height:200px; }
.h500 { height:500px !important; }
.h { height:100% }
.size30 { width: 30px; height: 30px; }
.size32 { width: 32px; height:32px; }
.size40 { width: 40px; height:40px; }
.size60 { width: 60px; height:60px; }
.size70 { width: 70px; height: 70px; }
.size72 { width: 72px; height: 72px; }
.size75 { width: 75px; height: 75px; }
.size80 { width: 80px; height:80px; }
.size90 { width: 90px; height:90px; }
.size100 { width: 100px; height: 100px; }
.size110 { width: 110px; height: 110px; }
.size120 { width: 120px; height: 120px; }
.size128 { width: 128px; height: 128px; }
.size160 { width: 160px; height: 160px; }
.size160-48 { width: 160px; height: 48px; }
.size160 { width: 160px; height: 160px; }
.size184 { width: 184px; height: 114px; }
.size190 { width: 190px; height: 190px; }
.size196 { width: 196px; height: 196px; }
.size233 { width: 233px; }
/*边距
******************************/
.m0 { margin: 0!important; }
.m10 { margin:10px; }
.m15 { margin:15px !important; }
.m30 { margin:30px; }
.mt5 { margin-top:5px; }
.mt10 { margin-top:10px !important; }
.mt15 { margin-top:15px; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }
.mt50 { margin-top:50px !important; }
.mt100 { margin-top:100px; }
.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px !important; }
.mb50 { margin-bottom:50px; }
.mb100 { margin-bottom:100px; }
.ml5 { margin-left:5px!important; }
.ml10 { margin-left:10px!important; }
.ml15 { margin-left:15px; }
.ml20 { margin-left:20px; }
.ml30 { margin-left:30px; }
.ml50 { margin-left:50px; }
.ml100 { margin-left:100px !important; }
.ml200 { margin-left:200px !important; }
.mr5 { margin-right:5px !important; }
.mr10 { margin-right:10px !important; }
.mr15 { margin-right:15px !important; }
.mr20 { margin-right:20px; }
.mr30 { margin-right:30px !important; }
.mr50 { margin-right:50px !important; }
.mr100 { margin-right:100px; }
/*边距
******************************/
.p10 { padding:10px; }
.p15 { padding:15px; }
.p30 { padding:30px; }
.pt5 { padding-top:5px; }
.pt10 { padding-top:10px; }
.pt15 { padding-top:15px; }
.pt20 { padding-top:20px; }
.pt30 { padding-top:30px; }
.pt50 { padding-top:50px; }
.pt100 { padding-top:100px; }
.pb5 { padding-bottom:5px; }
.pb10 { padding-bottom:10px; }
.pb15 { padding-bottom:15px; }
.pb20 { padding-bottom:20px !important; }
.pb30 { padding-bottom:30px; }
.pb50 { padding-bottom:50px; }
.pb100 { padding-bottom:100px; }
.pl5 { padding-left:5px; }
.pl10 { padding-left:10px; }
.pl15 { padding-left:15px; }
.pl20 { padding-left:20px; }
.pl30 { padding-left:30px; }
.pl50 { padding-left:50px; }
.pl100 { padding-left:100px; }
.pr5 { padding-right:5px; }
.pr10 { padding-right:10px; }
.pr15 { padding-right:15px; }
.pr20 { padding-right:20px; }
.pr30 { padding-right:30px; }
.pr50 { padding-right:50px; }
.pr100 { padding-right:100px; }
.hr { font-size: 1px; display: block; height: 0; margin: 12px 0; border-top: 1px solid #E3E3E3; overflow: hidden; }
.hr-double { height: 1px; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; }
.hr8 { margin: 8px 0 !important; }
.hr12 { margin: 12px 0 !important; }
.hr16 { margin: 16px 0 !important; }
.hr18 { margin: 18px 0 !important; }
.hr24 { margin: 24px 0 !important; }
.hr32 { margin: 32px 0 !important; }
.hr.dotted { border-top-style: dotted; }
.hr-double.dotted { border-bottom-style: dotted; }
/* =====================
 * 表单元素格式化及伪类效果
 * ===================== */
input[type="text"], input[type="password"], input.text, input.password { font: 12px/20px Arial; color: #777; background-color: #FFF; vertical-align: top; display: inline-block; height: 20px; padding: 6px 8px; border: solid 1px #E6E9EE; outline: 0 none; }
input[type="text"]:focus, input[type="password"]:focus, input.text:focus, input.password:focus, textarea:focus { color: #333; border-color: #CCD0D9; outline: 0 none; }
input[type="text"].error, input[type="password"].error, textarea.error { border: dashed 1px #ED5564; outline: 0 none; }
textarea, .textarea { font: 12px/18px Arial; color: #777; background-color: #FFF; vertical-align: top; display: inline-block; height: 54px; padding: 6px 8px; border: solid 1px #CCD0D9; outline: 0 none; }
select, .select { color: #777; background-color: #FFF; height: 34px; vertical-align: middle; *display: inline;
padding: 8px 8px; border: solid 1px #E6E9EE; *zoom:1;
}
select option, .select option { line-height: 22px; display: block; height: 22px; padding: 8px 8px; }
/* input[type="radio"], .radio { vertical-align: middle; display: inline-block; margin-right: 5px; } */
.submit-border { vertical-align: middle; display: inline-block; *display: inline/*IE6,7*/;
*zoom: 1;
}
input[type="submit"], input.submit, a.submit { font-size: 12px; line-height: 30px; font-weight: bold; color: #FFF; background-color: #48CFAE; display: block; height: 30px; padding: 0 20px; border-radius: 3px; border: none 0; cursor: pointer; }
input[type="submit"]:hover, input.submit:hover, a.submit:hover { text-decoration: none; color: #FFF; background-color: #36BC9B; }
input[type="file"] { line-height:20px; background-color:#FBFBFB; height: 20px; border: solid 1px #D8D8D8; cursor: default; }
.add-on { line-height: 28px; background-color: #F6F7Fb; vertical-align: top; display: inline-block; text-align: center; width: 28px; height: 28px; border: solid #E6E9EE; border-width: 1px 1px 1px 0; }
.add-on {
*display: inline/*IE6,7*/; zoom:1; }
.add-on i { font-size: 14px; color: #434A54; *margin-top: 8px/*IE7*/;
margin-right: 0!important; }
/*表单验证错误提示文字*/
label.error { font-size: 12px; color: #ED5564 !important; margin-left: 8px; }
label.error i { margin-right: 4px; }
/* 常用标准按钮样式定义
-------------------------------------------*/
a.ncbtn-mini, a.ncbtn { font: normal 12px/20px "microsoft yahei", arial; color: #FFF; background-color: #CCD0D9; text-align: center; vertical-align: middle; display: inline-block; *display: inline;
height: 20px; padding: 5px 10px; border-radius: 3px; cursor: pointer; *zoom: 1;
}
a.ncbtn-mini { line-height: 16px; height: 16px; padding: 3px 7px; border-radius: 2px; }
a.ncbtn { height: 20px; padding: 5px 10px; border-radius: 3px; }
a:hover.ncbtn-mini, a:hover.ncbtn { text-decoration: none; color: #FFF; background-color: #AAB2BD; }
a.ncbtn-mini i, a.ncbtn i { font-size: 14px !important; vertical-align: middle; margin: 0 4px 0 0 !important; }
/*葡萄柚红*/
a.ncbtn-grapefruit { background-color: #ED5564; }
a:hover.btn-grapefruit, a:hover.ncbtn-grapefruit { background-color: #DB4453; }
/*白英橘*/
a.ncbtn-bittersweet { background-color: #FB6E52; }
a:hover.btn-bittersweet, a:hover.ncbtn-bittersweet { background-color: #E9573E; }
/*向日葵黄*/
a.ncbtn-sunflower { color: #000; background-color: #FFCE55; }
a:hover.btn-sunflower, a:hover.ncbtn-sunflower { color: #000; background-color: #F6BB43; }
/*青草绿*/
a.ncbtn-grass { background-color: #A0D468; }
a:hover.btn-grass, a:hover.ncbtn-grass { background-color: #8CC051; }
/*薄荷绿*/
a.ncbtn-mint { background-color: #48CFAE; }
a:hover.btn-mint, a:hover.ncbtn-mint { background-color: #36BC9B; }
/*水绿*/
a.ncbtn-aqua { background-color: #4FC0E8; }
a:hover.btn-aqua, a:hover.ncbtn-aqua { background-color: #3BAEDA; }
/*牛仔蓝*/
a.ncbtn-bluejeansjeans { background-color: #5D9CEC; }
a:hover.btn-bluejeans, a:hover.ncbtn-bluejeansjeans { background-color: #4B89DC; }
/*薰衣草紫*/
a.ncbtn-lavander { background-color: #AC92ED; }
a:hover.btn-lavander, a:hover.ncbtn-lavander { background-color: #967BDC; }
/*玫瑰粉*/
a.ncbtn-lavander { background-color: #EC87BF; }
a:hover.btn-lavander, a:hover.ncbtn-lavander { background-color: #D870AD; }
/*浅灰色*/
a.ncbtn-lightgray { color: #656D78; background-color: #F6F7FB; }
a:hover.btn-lightgray, a:hover.ncbtn-lightgray { color: #434A54; background-color: #E6E9EE; }
/*中灰色*/
a.ncbtn-mediumgray { background-color: #CCD0D9; }
a:hover.btn-mediumgray, a:hover.ncbtn-mediumgray { background-color: #AAB2BD; }
/*灰黑*/
a.ncbtn-darkgray { background-color: #656D78; }
a:hover.btn-darkgray, a:hover.ncbtn-darkgray { background-color: #434A54; }
/* 全局布局 */
.container_page {
  width: 1200px;
  margin: 0 auto;
}
.ignore {
  overflow:hidden; /*超出的部分隐藏起来*/
  white-space:nowrap; /*不显示的地方用省略号...代替*/
  text-overflow:ellipsis; /* 支持 IE */
  word-wrap:break-word;
  word-break:break-all;
}
._bottom {
  user-select: none !important; 
  background: #1466d2 !important; 
  color: #fff !important; 
  cursor: pointer;
  padding: 7px 14px; 
  border-radius: 4px;
}
._bottom:hover {
  color: #ffefef !important;
  background: #1d70de !important;
}
/* checkbox */
input[type="checkbox"]{
  width:20px;
  height:20px;
  display: inline-block;
  text-align: center;
  vertical-align: middle; 
  line-height: 18px;
  position: relative;
}
input[type="checkbox"]::before{
  content: "";
  position: absolute;
  top: 0;left: 0;
  background: #fff;
  width: 100%;height: 100%;
  border: 1px solid #d9d9d9
}
.divCheckbox:checked::before{
  content: "\2713";
  background-color:#fff;
  position: absolute;top: 0;
  left: 0;width:100%;
  border: 1px solid #1868D2;
  color:#1868D2;
  font-size: 20px;
  font-weight: bold;
} 
/* 
/*取紧邻input的下一个label  radio*/
input[type="radio"]+label{
  width: 14px;height: 14px;
  display: inline-block;
  border: 1px solid #189cfb;
  border-radius: 50%;
  text-align: center;
  line-height: 14px;
  margin-right: 5px;
}
input[type="radio"]{
  display: none;
}
input[type="radio"]+label:after{
  transition: 0.3s;
  transform: scale(0.8);
  content: '';
  display: inline-block;
  width: 10px;height: 10px;border-radius: 50%;
  background-color: #fff;
}

input[type="radio"]:checked+label:after{
  background-color: #189cfb;transform: scale(1);
}

/*不可选中*/
input[type="radio"]:disabled+label{
  border-color: #aaa;
}
input[type="radio"]:disabled+label+label{
  color: #aaa;text-decoration: line-through;
}

  

posted on 2020-05-12 17:55  前端入门菜鸟  阅读(150)  评论(0编辑  收藏  举报