424 lines
11 KiB
CSS
424 lines
11 KiB
CSS
/*2016.9.24 css重置样式表*/
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box; /*规定两个并排的带边框的框*/
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-o-box-sizing: border-box;
|
|
-ms-box-sizing:border-box;
|
|
}
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
html {
|
|
font-size:62.5%;
|
|
}
|
|
html,body {
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
/*overflow-x: hidden;*/
|
|
}
|
|
body {
|
|
font-size:12px;
|
|
/*font-size: 1.2rem;*/
|
|
font-family: "Microsoft Yahei";
|
|
background:#fff;
|
|
color: #333;
|
|
margin:0 auto;
|
|
position: relative;
|
|
|
|
-moz-user-select: none; /**/
|
|
-webkit-user-select: none; /*webkit*/
|
|
-ms-user-select: none; /*IE10*/
|
|
-khtml-user-select: none; /**/
|
|
user-select: none;
|
|
}
|
|
|
|
div, p, dl, dt, dd, ul, ol, li, h1,h2,h3,h4 {
|
|
display: block;
|
|
}
|
|
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
|
|
display: block;
|
|
}
|
|
textarea {
|
|
resize: none;
|
|
}
|
|
table {
|
|
width:100%;
|
|
empty-cells: show;
|
|
border-collapse: collapse;
|
|
border-spacing:0px;
|
|
border: 0;
|
|
}
|
|
input,button,select,textarea{
|
|
outline:none;
|
|
font-family:"微软雅黑";
|
|
}
|
|
button[disabled], html input[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
button,html input[type="button"],input[type="reset"],input[type="submit"] {
|
|
-webkit-appearance: button;
|
|
cursor: pointer;
|
|
}
|
|
input[type="search"] {
|
|
-webkit-appearance: textfield;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
button {
|
|
overflow: visible;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
button, select {
|
|
text-transform: none;
|
|
}
|
|
button::-moz-focus-inner, input::-moz-focus-inner {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
img {
|
|
border: none;
|
|
}
|
|
ul,ol{
|
|
list-style: none;
|
|
}
|
|
a {
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
color:#666;
|
|
cursor: pointer;
|
|
outline: none;
|
|
blr:expression(this.onFocus=this.blur());
|
|
}
|
|
a:active,a:hover {
|
|
outline: 0;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
u{text-decoration: none;}
|
|
i,em {
|
|
font-style: normal;
|
|
}
|
|
b, strong {
|
|
font-weight: bold;
|
|
}
|
|
hr {
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
}
|
|
h1,h2,h3,h4,h5,h6,h7 {
|
|
font-weight: normal;
|
|
}
|
|
mark {
|
|
background-color: transparent;
|
|
color: #ed7020;
|
|
}
|
|
/* 去除iphone ipad 设备默认按钮样式 */
|
|
input[type="button"],
|
|
input[type="submit"],
|
|
input[type="reset"] {-webkit-appearance: none;}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {-webkit-appearance: none !important;}
|
|
|
|
input::-moz-placeholder,
|
|
textarea::-moz-placeholder {color: #b2b2b2;}
|
|
|
|
input:-ms-input-placeholder,
|
|
textarea:-ms-input-placeholder {color: #b2b2b2;}
|
|
|
|
input::-webkit-input-placeholder,
|
|
textarea::-webkit-input-placeholder {color: #b2b2b2;}
|
|
|
|
|
|
|
|
|
|
|
|
/* 通用的样式*/
|
|
.clear:after{
|
|
content:'';
|
|
display: block;
|
|
clear:both;
|
|
}
|
|
.font12{font-size:12px;}
|
|
.font14{font-size:14px;}
|
|
.font16{font-size:16px;}
|
|
.font18{font-size:18px;}
|
|
.font20{font-size:20px;}
|
|
.font36{font-size:36px;}
|
|
.font24{font-size:24px;}
|
|
.font46{font-size:46px;}
|
|
.font0{font-size:0;}
|
|
|
|
/*字体大小rem样式*/
|
|
.fontRem16{
|
|
font-size: .16rem;
|
|
}
|
|
.fontRem18{
|
|
font-size: .18rem;
|
|
}
|
|
.fontRem20 {
|
|
font-size: .20rem;
|
|
}
|
|
.fontRem22 {
|
|
font-size: .22rem;
|
|
}
|
|
.fontRem24 {
|
|
font-size: .24rem;
|
|
}
|
|
.fontRem26 {
|
|
font-size: .26rem;
|
|
}
|
|
.fontRem28 {
|
|
font-size: .28rem;
|
|
}
|
|
.fontRem29 {
|
|
font-size: .29rem;
|
|
}
|
|
.fontRem30 {
|
|
font-size: .30rem;
|
|
}
|
|
.fontRem32 {
|
|
font-size: .32rem;
|
|
}
|
|
.fontRem34 {
|
|
font-size: .34rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
.indent2{text-indent: 2em;}
|
|
.fontB{font-weight:bold;}
|
|
.tc{text-align:center;}
|
|
.tl{text-align: left;}
|
|
.tr{text-align: right;}
|
|
|
|
.fl{float:left;}
|
|
.fr{float:right;}
|
|
|
|
.radius6{border-radius:6px;}
|
|
.radius50{border-radius: 50%;}
|
|
.radius18{border-radius: 18px;}
|
|
.radius20{border-radius: 20px;}
|
|
.borderR18{border-top-right-radius: 18px;border-bottom-right-radius: 18px;}
|
|
.bfcHidden{overflow: hidden;}
|
|
|
|
.lineHeight30{line-height:30px;}
|
|
.lineHeight35{line-height:35px;}
|
|
.pr{position:relative;}
|
|
.pa{position:absolute;}
|
|
|
|
.widHalf{width:50%;}
|
|
.wid1200{width:1400px;margin:0 auto;}
|
|
.wid6{width:6px;height:6px;}
|
|
.wid12{width:12px;height:12px;}
|
|
.wid16{width:16px;height:16px;}
|
|
.wid20{width:20px;height:20px;}
|
|
.wid22{width:22px;height:22px;}
|
|
.wid26{width:26px;height:26px;}
|
|
.wid30{width:30px;height:30px;}
|
|
.wid39{width:39px;height:39px;}
|
|
.wid50{width:50px;height:50px;}
|
|
.wid74{width:74px;height:74px;}
|
|
.wid94{width:94px;height:94px;}
|
|
.wid100{width:100px;height:100px;}
|
|
.wid150{width:150px;height:150px;}
|
|
.wid275{width:275px;height:180px;}
|
|
|
|
.width2{width:2%;}
|
|
.width5{width:5%;}
|
|
.width10{width:10%;}
|
|
.width12{width:12%;}
|
|
.width15{width:15%;}
|
|
.width20{width:20%;}
|
|
.width28{width:28%;}
|
|
.width50{width:50%;}
|
|
.width70{width:70%;}
|
|
.width93{width:93%;}
|
|
|
|
.wid90{width:90%;margin:0 auto;}
|
|
.wid80{width:80%;margin:0 auto;}
|
|
|
|
|
|
/*主要颜色*/
|
|
.color222{color:#222;}
|
|
.color333{color:#333}
|
|
.color999{color:#999;}
|
|
.colorfff{color:#fff;}
|
|
.colored{color:#ed5241;}
|
|
.color5d{color:#5dc9ea;}
|
|
.colorffc{color:#ffc800;}
|
|
.colorff9{color:#ff98c5;}
|
|
.colorff6{color:#ff6a01;}
|
|
.color87{color:#878787;}
|
|
.coloreb{color:#eb6100;}
|
|
.color666{color:#666;}
|
|
.colorc3{color: #c30d23;}
|
|
.colorff6f{color:#ff6f86;}
|
|
.colorffc0{color: #ffc000;}
|
|
.color15a{color: #15a7f2;}
|
|
.colorf99{color:#f99090;}
|
|
.color76c{color:#76cf30;}
|
|
.color2a{color:#2ab9f6;}
|
|
.color41{color:#41debf;}
|
|
.colorffa{color:#ffae02;}
|
|
|
|
|
|
|
|
.bgColor333{background:#333;}
|
|
.bgColorfff{background:#fff;}
|
|
.bgColor1{background-color: #c30d23;}
|
|
.bgColor2{background-color: #09bb07;}
|
|
.bgColor3{background-color: #158fee;}
|
|
.bgColor4{background-color: #63a6f2;}
|
|
.bgColor5{background-color: #e26e6e;}
|
|
.bgColor6{background-color: #41c1f1;}
|
|
.bgColor7{background-color: #f5f5f5;}
|
|
.bgColor8{background-color: #c30d23;}
|
|
.bgColor3b{background-color:#3b3b3b;}
|
|
.bgColor1a{background-color: #1aa7f8;}
|
|
.bgColore9{background-color:#e9e9e9;}
|
|
.bgColor15{background-color:#15a7f2;}
|
|
.bgColorffc{background:#ffc000;}
|
|
.bgColorf7{background-color:#f79f15;}
|
|
.bgColorf8{background-color:#f8f8f8;}
|
|
.bgColoraaa{background-color:#aaa;}
|
|
.bgColor9e9{background-color:#9e9d9d;}
|
|
|
|
.borderColorff{border-color:#ff6f86;}
|
|
.borderColor99{border-color:#999;}
|
|
|
|
.borderCurrent{border:1px solid currentColor;}
|
|
.bordere9{border:1px solid #e9e9e9;}
|
|
.borderfff{border:1px solid #fff;}
|
|
.borderc3{border:1px solid #c30d23;}
|
|
.border999{border:1px solid #999;}
|
|
.borderd7{border: solid 1px #d7d7d7;}
|
|
.borderBd7{border-bottom: solid 1px #d7d7d7;}
|
|
.borderLe4{border-left:1px solid #e4e4e4;}
|
|
.borderTe{border-top:2px solid #e9e9e9;}
|
|
.borderTc{border-top:2px solid #c30d23;}
|
|
.bordere4{border:1px solid #e4e4e4;}
|
|
.borderBe4{border-bottom:1px solid #e4e4e4;}
|
|
.borderBcc{border-bottom:1px solid #ccc;}
|
|
.borderBca{border-bottom:1px solid #cacaca;}
|
|
.borderBc{border-bottom:2px solid #c30d23;}
|
|
.borderRe4{border-right:1px solid #e4e4e4;}
|
|
.borderTrans{border:1px solid transparent;}
|
|
.borderTnone{border-top:none;}
|
|
|
|
.marginL5{margin-left:5px;}
|
|
.marginL10{margin-left:10px;}
|
|
.marginR10{margin-right:10px;}
|
|
.marginR15{margin-right:15px;}
|
|
.marginR20{margin-right:20px;}
|
|
.marginR30{margin-right:30px;}
|
|
.marginR60{margin-right:60px;}
|
|
.marginR5{margin-right:5px;}
|
|
.marginLR5{margin-left:5px;margin-right:5px;}
|
|
.marginB2{margin-bottom:2px;}
|
|
.marginB5{margin-bottom:5px;}
|
|
.marginB10{margin-bottom:10px;}
|
|
.marginB20{margin-bottom:20px;}
|
|
.marginB30{margin-bottom:30px;}
|
|
.marginB50{margin-bottom:50px;}
|
|
.marginT5{margin-top:5px;}
|
|
.marginT10{margin-top:10px;}
|
|
.marginT30{margin-top:30px;}
|
|
.marginTB8{margin-top: .8rem;margin-bottom: .8rem;}
|
|
|
|
.img000{width: 90px;height: 34px;}
|
|
|
|
|
|
.pad20{padding:20px;}
|
|
.padding10{padding:10px;}
|
|
.padding30{padding:30px;}
|
|
.paddingA10{padding:10px 0;}
|
|
.paddingA12{padding:12px 0;}
|
|
.paddingA15{padding:15px 0;}
|
|
.paddingA20{padding:20px 0;}
|
|
.padingLR25{padding-left:25px;padding-right:25px;}
|
|
.paddingA70{padding:70px 0;}
|
|
.paddingLR10{padding:0 10px;}
|
|
.padding20{padding-left:20px;padding-right:20px;}
|
|
.paddingB10{padding-bottom:10px;}
|
|
.paddingB15{padding-bottom:15px;}
|
|
.paddingB20{padding-bottom:20px;}
|
|
.paddingB30{padding-bottom:30px;}
|
|
.paddingT10{padding-top:10px;}
|
|
.paddingT20{padding-top:20px;}
|
|
.paddingT38{padding-top:38px;}
|
|
.paddingT48{padding-top:48px;}
|
|
.paddingB40{padding-bottom:40px;}
|
|
.paddingL10{padding-left:10px;}
|
|
.paddingL20{padding-left:20px;}
|
|
.paddingL60{padding-left:60px;}
|
|
.padding2010{padding:20px 10px;}
|
|
.padding1030{padding:10px 30px;}
|
|
|
|
.marginT10{margin-top:10px;}
|
|
.marginT20{margin-top:20px;}
|
|
.marginT27{margin-top:27px;}
|
|
.marginT30{margin-top:30px;}
|
|
.margin15{margin:15px 0;}
|
|
.marginLR20{margin-left:20px;margin-right:20px;}
|
|
|
|
.shadow{box-shadow:0 0 5px 3px #ccc;}
|
|
.underLine{text-decoration: underline;}
|
|
|
|
.disIn{display: inline-block;}
|
|
.disNone{display: none;}
|
|
.disB{display:block;}
|
|
.verMid{vertical-align: middle;} /*设置元素的垂直对齐方式 垂直居中*/
|
|
|
|
/*inline-block布局*/
|
|
.inlineBBox{font-size:0;letter-spacing:-5px;}
|
|
.inlineBs{ letter-spacing: 0;display: inline-block;font-size:14px;}
|
|
|
|
/*flex简单布局*/
|
|
.spaceAround{display:flex;justify-content:space-around;}
|
|
|
|
.left20{left:20px;}
|
|
.maxW260{max-width:260px;}
|
|
.minH175{min-height:175px;}
|
|
.minH600{min-height:600px;}
|
|
|
|
.pointers{cursor:pointer;}
|
|
|
|
/*一行文字，超出部分用...表示*/
|
|
.textOverflow{white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;}
|
|
|
|
.img100{width:100%;height:auto;}
|
|
.img110{width:100%;height:auto;border: 0;border-top: 0px; margin-top: -0.1rem;}
|
|
.pCenter{top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); }
|
|
.pLeft{top:50%;left:0;transform:translate(0,-50%);-webkit-transform:translate(0,-50%);}
|
|
.pTop{top:10%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); }
|
|
.pRight{top:50%;right:0;transform:translate(0,-50%);-webkit-transform:translate(0,-50%);}
|
|
|
|
/*排名的小图标*/
|
|
.rankIcon{border-style:solid;border-width: 8px;border-bottom-color:transparent;height:20px;}
|
|
/*单选框重写样式*/
|
|
.checkboxs{ }
|
|
.checkboxs i::after{ content:''; position:absolute; top: 20%; left:10%; width:60%; height:30%; opacity: 0; border:2px solid #c30d23; border-right:none; transform: rotate(-45deg); border-top:none;}
|
|
.checkboxs input{ visibility: hidden; margin:0; position:absolute;top:0; left:0; }
|
|
.checkboxs input:checked +i::after{ opacity: 1; }
|
|
|
|
|
|
.fontWeight700{font-weight:700;}
|
|
|
|
|
|
|
|
|
|
|
|
|