/* CSS Reset */ /* 初始化标签在所有浏览器中的margin、padding值 */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button, img { padding: 0; margin: 0; } html { _background: url(about:blank); } /* 酌情修改 */ body { background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* css3抗锯齿形,让文字显示的更加清楚 */ body, th, td, input, select, textarea, button { font-size: 14px; line-height: 1; } /* 重置页面文字属性 */ /* 短引用的内容可取值:''或"" */ blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* 重置嵌套引用*/ /* 缩写,图片等无边框 */ fieldset, img, abbr, acronym { border: 0 none; } /* 重置fieldset(表单分组)、图片的边框为0*/ img { vertical-align: top; } /* 图片在当前行内的垂直位置 */ abbr, acronym { font-variant: normal; } legend { color: #000; } blockquote, q { quotes: none; } /* 重置嵌套引用的引号类型 */ /* 清除特殊标记的字体和字号 */ address, caption, cite, code, dfn, em, th, var { font-weight: normal; font-style: normal; } /* 重置样式标签的样式 */ /* 上下标 */ /* 统一上标和下标 */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* 设置表格的边框被合并为一个单一的边框, 指定分隔边框模型中单元格边界之间的距离为0*/ /* 表格标题及内容居左显示 */ caption { display: none; } /* 重置表格标题为隐藏 */ caption, th { text-align: left; } /* 清除列表样式 */ dl, ul, ol, menu, li { list-style: none; } /* 重置类表前导符号为onne,menu在HTML5中有效 */ input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /* 输入控件字体 */ input, select, textarea, button { vertical-align: middle; outline: none; } /* 重置表单控件垂直居中*/ textarea { resize: none; } input[type="submit"] { cursor: pointer; } /* 鼠标样式 */ button { border: 0 none; background-color: transparent; cursor: pointer; } /* 重置表单button按钮效果 */ input::-moz-focus-inner { border: 0; padding: 0; } /* 标题元素样式清除, 让标题都自定义, 适应多个系统应用 */ h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } /* 链接样式,颜色可酌情修改 */ a:link { color: #555; } /* 未访问的链接 */ a:visited { color: #555; } /* 已访问的链接 */ a:hover { color: #555; } /* 鼠标移动到链接上 */ a:active { color: #555; } /* 选定的链接 */ del, ins, a { text-decoration: none; } a:hover, a:active, a:focus { text-decoration: none; } /* 取消a标签点击后的虚线框 */ /* 设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色 */ /* ::selection{color: #fff;background-color: #4C6E78;} ::-moz-selection{color: #fff;background-color: #4C6E78;} */ a { outline: none; -webkit-transition: color 0.2s ease 0s; -o-transition: color 0.2s ease 0s; transition: color 0.2s ease 0s; } /*CSS3链接秒数缓冲效果2秒*/ /* 层板块缓冲效果CSS3 transition: all 0.3s ease 0s; */ input { border: none; -moz-appearance: none; -webkit-appearance: none; /*解决ios上按钮的圆角问题*/ border-radius: 0; /*解决ios上输入框圆角问题*/ outline: medium; /*去掉鼠标点击的默认黄色边框*/ background-color: transparent; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* display */ .dn { display: none; } .di { display: inline; } .db { display: block; } .dib { display: inline-block; } /* margin */ .m0 { margin: 0; } .ml1 { margin-left: 1px; } .ml5 { margin-left: 5px; } .ml10 { margin-left: 10px; } .ml15 { margin-left: 15px; } .ml20 { margin-left: 20px; } .ml25 { margin-left: 25px; } .ml30 { margin-left: 30px; } .mr1 { margin-right: 1px; } .mr5 { margin-right: 5px; } .mr10 { margin-right: 10px; } .mr15 { margin-right: 15px; } .mr20 { margin-right: 20px; } .mr25 { margin-right: 25px; } .mr30 { margin-right: 30px; } .mt1 { margin-top: 1px; } .mt5 { margin-top: 5px; } .mt10 { margin-top: 10px; } .mt15 { margin-top: 15px; } .mt20 { margin-top: 20px; } .mt25 { margin-top: 25px; } .mt30 { margin-top: 30px; } .mb1 { margin-bottom: 1px; } .mb5 { margin-bottom: 5px; } .mb10 { margin-bottom: 10px; } .mb15 { margin-bottom: 15px; } .mb20 { margin-bottom: 20px; } .mb25 { margin-bottom: 25px; } .mb30 { margin-bottom: 30px; } /* padding */ .p0 { padding: 0; } .pl1 { padding-left: 1px; } .pl5 { padding-left: 5px; } .pl10 { padding-left: 10px; } .pl15 { padding-left: 15px; } .pl20 { padding-left: 20px; } .pl25 { padding-left: 25px; } .pl30 { padding-left: 30px; } .pr1 { padding-right: 1px; } .pr5 { padding-right: 5px; } .pr10 { padding-right: 10px; } .pr15 { padding-right: 15px; } .pr20 { padding-right: 20px; } .pr25 { padding-right: 25px; } .pr30 { padding-right: 30px; } .pt1 { padding-top: 1px; } .pt5 { padding-top: 5px; } .pt10 { padding-top: 10px; } .pt15 { padding-top: 15px; } .pt20 { padding-top: 20px; } .pt25 { padding-top: 25px; } .pt30 { padding-top: 30px; } .pb1 { padding-bottom: 1px; } .pb5 { padding-bottom: 5px; } .pb10 { padding-bottom: 10px; } .pb15 { padding-bottom: 15px; } .pb20 { padding-bottom: 20px; } .pb25 { padding-bottom: 25px; } .pb30 { padding-bottom: 30px; } /* border */ .bdm { border: 1px solid #F46; } .bde { border: 1px solid #eee; } /* background-color */ .bgm { background-color: #0e3080 !important; } .bga { background-color: #ee7907; } .bgf { background: #ffffff; } /* color */ .cm { color: #0e3080; } .ca { color: #ee7907; } .cf { color: #fff; } .c0 { color: #000; } .c3 { color: #333; } .c6 { color: #666; } .c9 { color: #999; } /* font-size */ .f0 { font-size: 0; } .f10 { font-size: 10px; } .f12 { font-size: 12px; } .f14 { font-size: 14px; } .f16 { font-size: 16px; } .f18 { font-size: 18px; } .f20 { font-size: 20px; } .f22 { font-size: 22px; } .f24 { font-size: 24px; } .f26 { font-size: 26px; } .f28 { font-size: 28px; } .f30 { font-size: 30px; } .f32 { font-size: 32px; } .f36 { font-size: 36px; } .f38 { font-size: 38px; } .f40 { font-size: 40px; } .f42 { font-size: 42px; } .f44 { font-size: 44px; } .f46 { font-size: 46px; } /* font-style */ .fs-n { font-weight: normal; font-style: normal; } .fs-b { font-weight: bold; } .fs-i { font-style: italic; } /* 块状元素水平居中 */ .auto { margin-left: auto; margin-right: auto; } /* 清除浮动 */ .fix { *zoom: 1; } .fix:after { display: table; content: ''; clear: both; } /* 单行文字溢出虚点显示 */ .ell { -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* 绝对定位隐藏 */ .abs-out { position: absolute; left: -999em; top: -999em; } /* flex */ .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .inflex { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } .f-fd-r { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .f-fd-rr { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .f-jc-sb { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .f-jc-sa { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .f-jc-fs { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .f-js-fe { justify-self: flex-end; } .f-ac-sb { -webkit-align-content: space-between; -ms-flex-line-pack: justify; align-content: space-between; } .f-ac-sa { -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; } .f-ac-fs { -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } .f-as-fe { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .fa { display: block; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; }