html,input,select,textarea,button,a{font: 14px/1 PingFangSC, "Arial",Helvetica,"microsoft yahei",sans-serif;}
|
body{color: #333;}
|
body,p,ul,dl,dt,dd,form,ol{margin:0;}
|
h1,h2,h3,h4,h5,h6,strong,b,em{margin: 0;font-weight: normal;font-style: normal;}
|
ul,ol{list-style:none;padding:0;}
|
i {font-style: normal;}
|
a{text-decoration:none;color:#333;outline: none;}
|
a:focus {outline:none}
|
|
img {border: none;}
|
.text-red{
|
color: #ca2424;
|
}
|
.text-gray{
|
color: #c2c2c2;
|
}
|
input,button {outline: none;border: none;padding: 0;margin: 0;}
|
input::-ms-clear, input::-ms-reveal{display: none;}
|
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
color: #c2c2c2;
|
}
|
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
color: #c2c2c2;
|
}
|
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
color: #c2c2c2;
|
}
|
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
color: #c2c2c2;
|
}
|
/* 文本 */
|
.ac{text-align: center;}
|
.al{text-align: left;}
|
.ar{text-align: right;}
|
.fwb,.bold,.fw{font-weight: bold;}
|
|
.w1{width: 1rpx;}
|
|
|
/* 隐藏 */
|
.hide {display: none!important;}
|
|
|
|
|
/* 显示 */
|
.show {display: block!important;}
|
|
|
.tb {display: table-cell;}
|
|
|
/* 盒模型 */
|
.flex {
|
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
display: -ms-flexbox; /* TWEENER - IE 10 */
|
display: -webkit-flex; /* NEW - Chrome */
|
display: -moz-flex;
|
display: -ms-flex;
|
display: -o-flex;
|
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
|
}
|
|
/* 垂直布局 */
|
.flex-col{
|
flex-flow: column;
|
-webkit-flex-flow: column;
|
}
|
|
|
/* 宽度随屏幕改变变化(使用元素自身) */
|
/*https://www.jianshu.com/p/57a94430dcbe*/
|
.flex_auto {
|
flex: auto;
|
-webkit-flex: auto;
|
-webkit-box-flex: 1;
|
-ms-flex: auto;
|
-ms-box-flex: 1;
|
}
|
|
.flex-1 {
|
flex: 1;
|
-webkit-flex: 1;
|
-webkit-box-flex: 1;
|
-ms-flex: 1;
|
-ms-box-flex: 1;
|
}
|
.flex-2 {
|
flex: 2;
|
-webkit-flex: 2;
|
-webkit-box-flex: 2;
|
-ms-flex: 2;
|
-ms-box-flex: 2;
|
}
|
|
|
/* 垂直 水平 居中(使内部元素居中) */
|
.flex-center {
|
justify-content: center;
|
-webkit-justify-content: center;
|
flex-direction: column;
|
-webkit-flex-direction: column;
|
align-items: center;
|
-webkit-align-items: center;
|
}
|
|
/* 水平居中 */
|
.flex-align-center{
|
justify-content: center;
|
-webkit-justify-content: center;
|
}
|
|
|
/* 垂直 居中(使内部元素居中) */
|
.flex-ver {
|
align-items: center;
|
-webkit-align-items: center;
|
}
|
.flex-end {
|
align-items: flex-end;
|
-webkit-align-items: flex-end;
|
}
|
|
/* flex 换行 */
|
.flex-wrap {
|
flex-wrap: wrap;
|
-webkit-flex-wrap: wrap;
|
}
|
|
/* flex 容器（设置为flex）内子元素向两边顶齐平分 */
|
.flex-sb {
|
justify-content: space-between;
|
-webkit-justify-content: space-between;
|
}
|
|
/* 容器（设置为flex）内子元素靠最后对齐（水平时比较像右浮动） */
|
.flex-jcfe {
|
justify-content: flex-end;
|
-webkit-justify-content: flex-end;
|
}
|
|
/* 容器（设置为flex）内子元素靠最前对齐（水平时比较像左浮动） */
|
.flex-jcfs {
|
justify-content: flex-start;
|
-webkit-justify-content: flex-start;
|
}
|
|
/* 容器（设置为flex）内子元素等高 */
|
.flex-ais {
|
align-items: stretch;
|
-webkit-align-items: stretch;
|
}
|
|
/* 容器（设置为flex）内子元素置底 */
|
.flex-aife {
|
align-items: flex-end;
|
-webkit-align-items: flex-end;
|
}
|
|
/* css 箭头 */
|
.arrow{
|
border: solid #bbb;
|
border-width: 1px 1px 0 0;
|
}
|
.ar-h24{width: 18px;height: 18px;}
|
.ar-h20{width: 14px;height: 14px;}
|
.arrow-right{-webkit-transform: rotate(45deg);transform: rotate(45deg);}
|
.arrow-down{-webkit-transform: rotate(135deg) translate(-2px,2px);transform: rotate(135deg) translate(-2px,2px);}
|
.arrow-up{-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
|
.rotate90{
|
transform:rotate(90deg);
|
}
|
.rotate270{
|
transform:rotate(270deg);
|
}
|
|
/* 动画的渐变过渡 */
|
.trs {
|
-webkit-transition: all .7s ease;
|
-moz-transition: all .7s ease;
|
-ms-transition: all .7s ease;
|
-o-transition: all .7s ease;
|
transition: all .7s ease;
|
}
|
|
|
/* 非盒模型居中 */
|
/* 非flex垂直居中（在要居中的元素外加上一层.wm-vcrl的block） */
|
.wm-vcrl {
|
height: 100%;
|
margin: auto;
|
writing-mode: tb-rl;
|
writing-mode: vertical-rl;
|
-webkit-writing-mode: vertical-rl;
|
}
|
|
/* 非flex水平居中（使用了非flex垂直居中后在要居中的元素上加上class）（要居中的元素有确定的大小） */
|
.wm-vctb{
|
margin: auto 0;
|
writing-mode: lr-tb;
|
writing-mode: horizontal-tb;
|
-webkit-writing-mode: horizontal-tb;
|
}
|
|
|
/* writing-mode 垂直流 （文字垂直排版）*/
|
.verticle-mode {
|
writing-mode: tb-rl;
|
-webkit-writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
}
|
|
|
/* 浮动 */
|
.pull-left {float: left;}
|
.pull-right {float: right;}
|
|
|
/* 清除浮动 */
|
.ourter {zoom: 1;}
|
.ourter:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
|
|
|
/* fixed */
|
.fixed--top {position: fixed;top: 0;bottom: auto;z-index: 5;width: 100%;}
|
.fixed--bottom {position: fixed;top: auto;bottom: 0;z-index: 5;width: 100%;}
|
|
|
/* 表单验证错误提示 */
|
.error {color: #fb8372;}
|
|
|
/* 省略号 */
|
.ell {
|
display:block;
|
white-space:nowrap;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
}
|
|
/* 多行省略 */
|
/* 需要设定相应行数的高度 */
|
.line-clamp-2 {
|
overflow : hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
}
|
|
/* 显示2行 */
|
.line--2 {-webkit-line-clamp: 2;}
|
/* 显示3行 */
|
.line--3 {-webkit-line-clamp: 3;}
|
/* 显示4行 */
|
.line--4 {-webkit-line-clamp: 4;}
|
/* 显示5行 */
|
.line--5 {-webkit-line-clamp: 5;}
|
|
/* 阴影 */
|
.shadow {box-shadow: 0 2px 2px rgba(66,66,66,.2);position: relative;z-index: 2;}
|
|
/*元素在浏览器中的外貌
|
*appearance: none; 去除元素在浏览器中的外貌
|
*所有主流浏览器都不支持 appearance 属性。
|
*Firefox 支持替代的 -moz-appearance 属性。
|
*Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
|
*appearance: normal|icon|window|button|menu|field;
|
*/
|
.ap-none {
|
-webkit-appearance: none;
|
-moz-appearance: none;
|
appearance: none;
|
}
|
|
/* textarea--resize-none */
|
.res-none {resize: none;}
|
|
|
/*=========================== 滤镜 ===============================*/
|
|
/* 模糊 */
|
/*.filter {
|
filter: url(blur.svg#blur);
|
-webkit-filter: blur(10px);
|
-moz-filter: blur(10px);
|
-ms-filter: blur(10px);
|
filter: blur(10px);
|
|
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
|
}*/
|
|
/*=========================== 滤镜 -- end ===============================*/
|
