| 提交 | 用户 | age | ||
| 2a61f6 | 1 | html,input,select,textarea,button,a{font: 14px/1 PingFangSC, "Arial",Helvetica,"microsoft yahei",sans-serif;} |
| L | 2 | body{color: #333;} |
| 3 | body,p,ul,dl,dt,dd,form,ol{margin:0;} | |
| 4 | h1,h2,h3,h4,h5,h6,strong,b,em{margin: 0;font-weight: normal;font-style: normal;} | |
| 5 | ul,ol{list-style:none;padding:0;} | |
| 6 | i {font-style: normal;} | |
| 7 | a{text-decoration:none;color:#333;outline: none;} | |
| 8 | a:focus {outline:none} | |
| 9 | ||
| 10 | img {border: none;} | |
| 11 | .text-red{ | |
| 12 | color: #ca2424; | |
| 13 | } | |
| 14 | .text-gray{ | |
| 15 | color: #c2c2c2; | |
| 16 | } | |
| 17 | input,button {outline: none;border: none;padding: 0;margin: 0;} | |
| 18 | input::-ms-clear, input::-ms-reveal{display: none;} | |
| 19 | ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ | |
| 20 | color: #c2c2c2; | |
| 21 | } | |
| 22 | :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ | |
| 23 | color: #c2c2c2; | |
| 24 | } | |
| 25 | ::-moz-placeholder { /* Mozilla Firefox 19+ */ | |
| 26 | color: #c2c2c2; | |
| 27 | } | |
| 28 | :-ms-input-placeholder { /* Internet Explorer 10-11 */ | |
| 29 | color: #c2c2c2; | |
| 30 | } | |
| 31 | /* 文本 */ | |
| 32 | .ac{text-align: center;} | |
| 33 | .al{text-align: left;} | |
| 34 | .ar{text-align: right;} | |
| 35 | .fwb,.bold,.fw{font-weight: bold;} | |
| 36 | ||
| 37 | .w1{width: 1rpx;} | |
| 38 | ||
| 39 | ||
| 40 | /* 隐藏 */ | |
| 41 | .hide {display: none!important;} | |
| 42 | ||
| 43 | ||
| 44 | ||
| 45 | ||
| 46 | /* 显示 */ | |
| 47 | .show {display: block!important;} | |
| 48 | ||
| 49 | ||
| 50 | .tb {display: table-cell;} | |
| 51 | ||
| 52 | ||
| 53 | /* 盒模型 */ | |
| 54 | .flex { | |
| 55 | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | |
| 56 | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | |
| 57 | display: -ms-flexbox; /* TWEENER - IE 10 */ | |
| 58 | display: -webkit-flex; /* NEW - Chrome */ | |
| 59 | display: -moz-flex; | |
| 60 | display: -ms-flex; | |
| 61 | display: -o-flex; | |
| 62 | display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
| 63 | } | |
| 64 | ||
| 65 | /* 垂直布局 */ | |
| 66 | .flex-col{ | |
| 67 | flex-flow: column; | |
| 68 | -webkit-flex-flow: column; | |
| 69 | } | |
| 70 | ||
| 71 | ||
| 72 | /* 宽度随屏幕改变变化(使用元素自身) */ | |
| 73 | /*https://www.jianshu.com/p/57a94430dcbe*/ | |
| 74 | .flex_auto { | |
| 75 | flex: auto; | |
| 76 | -webkit-flex: auto; | |
| 77 | -webkit-box-flex: 1; | |
| 78 | -ms-flex: auto; | |
| 79 | -ms-box-flex: 1; | |
| 80 | } | |
| 81 | ||
| 82 | .flex-1 { | |
| 83 | flex: 1; | |
| 84 | -webkit-flex: 1; | |
| 85 | -webkit-box-flex: 1; | |
| 86 | -ms-flex: 1; | |
| 87 | -ms-box-flex: 1; | |
| 88 | } | |
| 89 | .flex-2 { | |
| 90 | flex: 2; | |
| 91 | -webkit-flex: 2; | |
| 92 | -webkit-box-flex: 2; | |
| 93 | -ms-flex: 2; | |
| 94 | -ms-box-flex: 2; | |
| 95 | } | |
| 96 | ||
| 97 | ||
| 98 | /* 垂直 水平 居中(使内部元素居中) */ | |
| 99 | .flex-center { | |
| 100 | justify-content: center; | |
| 101 | -webkit-justify-content: center; | |
| 102 | flex-direction: column; | |
| 103 | -webkit-flex-direction: column; | |
| 104 | align-items: center; | |
| 105 | -webkit-align-items: center; | |
| 106 | } | |
| 107 | ||
| 108 | /* 水平居中 */ | |
| 109 | .flex-align-center{ | |
| 110 | justify-content: center; | |
| 111 | -webkit-justify-content: center; | |
| 112 | } | |
| 113 | ||
| 114 | ||
| 115 | /* 垂直 居中(使内部元素居中) */ | |
| 116 | .flex-ver { | |
| 117 | align-items: center; | |
| 118 | -webkit-align-items: center; | |
| 119 | } | |
| 120 | .flex-end { | |
| 121 | align-items: flex-end; | |
| 122 | -webkit-align-items: flex-end; | |
| 123 | } | |
| 124 | ||
| 125 | /* flex 换行 */ | |
| 126 | .flex-wrap { | |
| 127 | flex-wrap: wrap; | |
| 128 | -webkit-flex-wrap: wrap; | |
| 129 | } | |
| 130 | ||
| 131 | /* flex 容器（设置为flex）内子元素向两边顶齐平分 */ | |
| 132 | .flex-sb { | |
| 133 | justify-content: space-between; | |
| 134 | -webkit-justify-content: space-between; | |
| 135 | } | |
| 136 | ||
| 137 | /* 容器（设置为flex）内子元素靠最后对齐（水平时比较像右浮动） */ | |
| 138 | .flex-jcfe { | |
| 139 | justify-content: flex-end; | |
| 140 | -webkit-justify-content: flex-end; | |
| 141 | } | |
| 142 | ||
| 143 | /* 容器（设置为flex）内子元素靠最前对齐（水平时比较像左浮动） */ | |
| 144 | .flex-jcfs { | |
| 145 | justify-content: flex-start; | |
| 146 | -webkit-justify-content: flex-start; | |
| 147 | } | |
| 148 | ||
| 149 | /* 容器（设置为flex）内子元素等高 */ | |
| 150 | .flex-ais { | |
| 151 | align-items: stretch; | |
| 152 | -webkit-align-items: stretch; | |
| 153 | } | |
| 154 | ||
| 155 | /* 容器（设置为flex）内子元素置底 */ | |
| 156 | .flex-aife { | |
| 157 | align-items: flex-end; | |
| 158 | -webkit-align-items: flex-end; | |
| 159 | } | |
| 160 | ||
| 161 | /* css 箭头 */ | |
| 162 | .arrow{ | |
| 163 | border: solid #bbb; | |
| 164 | border-width: 1px 1px 0 0; | |
| 165 | } | |
| 166 | .ar-h24{width: 18px;height: 18px;} | |
| 167 | .ar-h20{width: 14px;height: 14px;} | |
| 168 | .arrow-right{-webkit-transform: rotate(45deg);transform: rotate(45deg);} | |
| 169 | .arrow-down{-webkit-transform: rotate(135deg) translate(-2px,2px);transform: rotate(135deg) translate(-2px,2px);} | |
| 170 | .arrow-up{-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} | |
| 171 | .rotate90{ | |
| 172 | transform:rotate(90deg); | |
| 173 | } | |
| 174 | .rotate270{ | |
| 175 | transform:rotate(270deg); | |
| 176 | } | |
| 177 | ||
| 178 | /* 动画的渐变过渡 */ | |
| 179 | .trs { | |
| 180 | -webkit-transition: all .7s ease; | |
| 181 | -moz-transition: all .7s ease; | |
| 182 | -ms-transition: all .7s ease; | |
| 183 | -o-transition: all .7s ease; | |
| 184 | transition: all .7s ease; | |
| 185 | } | |
| 186 | ||
| 187 | ||
| 188 | /* 非盒模型居中 */ | |
| 189 | /* 非flex垂直居中（在要居中的元素外加上一层.wm-vcrl的block） */ | |
| 190 | .wm-vcrl { | |
| 191 | height: 100%; | |
| 192 | margin: auto; | |
| 193 | writing-mode: tb-rl; | |
| 194 | writing-mode: vertical-rl; | |
| 195 | -webkit-writing-mode: vertical-rl; | |
| 196 | } | |
| 197 | ||
| 198 | /* 非flex水平居中（使用了非flex垂直居中后在要居中的元素上加上class）（要居中的元素有确定的大小） */ | |
| 199 | .wm-vctb{ | |
| 200 | margin: auto 0; | |
| 201 | writing-mode: lr-tb; | |
| 202 | writing-mode: horizontal-tb; | |
| 203 | -webkit-writing-mode: horizontal-tb; | |
| 204 | } | |
| 205 | ||
| 206 | ||
| 207 | /* writing-mode 垂直流 （文字垂直排版）*/ | |
| 208 | .verticle-mode { | |
| 209 | writing-mode: tb-rl; | |
| 210 | -webkit-writing-mode: vertical-rl; | |
| 211 | writing-mode: vertical-rl; | |
| 212 | } | |
| 213 | ||
| 214 | ||
| 215 | /* 浮动 */ | |
| 216 | .pull-left {float: left;} | |
| 217 | .pull-right {float: right;} | |
| 218 | ||
| 219 | ||
| 220 | /* 清除浮动 */ | |
| 221 | .ourter {zoom: 1;} | |
| 222 | .ourter:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} | |
| 223 | ||
| 224 | ||
| 225 | /* fixed */ | |
| 226 | .fixed--top {position: fixed;top: 0;bottom: auto;z-index: 5;width: 100%;} | |
| 227 | .fixed--bottom {position: fixed;top: auto;bottom: 0;z-index: 5;width: 100%;} | |
| 228 | ||
| 229 | ||
| 230 | /* 表单验证错误提示 */ | |
| 231 | .error {color: #fb8372;} | |
| 232 | ||
| 233 | ||
| 234 | /* 省略号 */ | |
| 235 | .ell { | |
| 236 | display:block; | |
| 237 | white-space:nowrap; | |
| 238 | overflow:hidden; | |
| 239 | text-overflow:ellipsis; | |
| 240 | } | |
| 241 | ||
| 242 | /* 多行省略 */ | |
| 243 | /* 需要设定相应行数的高度 */ | |
| 244 | .line-clamp-2 { | |
| 245 | overflow : hidden; | |
| 246 | text-overflow: ellipsis; | |
| 247 | display: -webkit-box; | |
| 248 | -webkit-box-orient: vertical; | |
| 249 | -webkit-line-clamp: 2; | |
| 250 | } | |
| 251 | ||
| 252 | /* 显示2行 */ | |
| 253 | .line--2 {-webkit-line-clamp: 2;} | |
| 254 | /* 显示3行 */ | |
| 255 | .line--3 {-webkit-line-clamp: 3;} | |
| 256 | /* 显示4行 */ | |
| 257 | .line--4 {-webkit-line-clamp: 4;} | |
| 258 | /* 显示5行 */ | |
| 259 | .line--5 {-webkit-line-clamp: 5;} | |
| 260 | ||
| 261 | /* 阴影 */ | |
| 262 | .shadow {box-shadow: 0 2px 2px rgba(66,66,66,.2);position: relative;z-index: 2;} | |
| 263 | ||
| 264 | /*元素在浏览器中的外貌 | |
| 265 | *appearance: none; 去除元素在浏览器中的外貌 | |
| 266 | *所有主流浏览器都不支持 appearance 属性。 | |
| 267 | *Firefox 支持替代的 -moz-appearance 属性。 | |
| 268 | *Safari 和 Chrome 支持替代的 -webkit-appearance 属性。 | |
| 269 | *appearance: normal|icon|window|button|menu|field; | |
| 270 | */ | |
| 271 | .ap-none { | |
| 272 | -webkit-appearance: none; | |
| 273 | -moz-appearance: none; | |
| 274 | appearance: none; | |
| 275 | } | |
| 276 | ||
| 277 | /* textarea--resize-none */ | |
| 278 | .res-none {resize: none;} | |
| 279 | ||
| 280 | ||
| 281 | /*=========================== 滤镜 ===============================*/ | |
| 282 | ||
| 283 | /* 模糊 */ | |
| 284 | /*.filter { | |
| 285 | filter: url(blur.svg#blur); | |
| 286 | -webkit-filter: blur(10px); | |
| 287 | -moz-filter: blur(10px); | |
| 288 | -ms-filter: blur(10px); | |
| 289 | filter: blur(10px); | |
| 290 | ||
| 291 | filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); | |
| 292 | }*/ | |
| 293 | ||
| 294 | /*=========================== 滤镜 -- end ===============================*/ | |
