/* * @Date: 2019-11-18 16:41:12 * @LastEditTime : 2020-01-11 15:25:32 * @开 发: lancer * @版 本: 1.00 * @页面描述: 重置样式表 */ /****************************** 自定义公共类 ***********************************/ /* 清除浮动 */ .r_clearfix::before, .r_clearfix::after { content: ''; display: table; clear: both; } /* 怪异盒模型 */ .r_moxing { box-sizing: border-box; } /* 块元素 */ .r_block { display: block; } /* 盒模型布局一 */ .r_flex { display: flex; } /* 盒模型布局一 以列排序 */ .r_flex_wrap { display: flex; flex-direction: column; align-items: center; } /* 盒模型布局一(左右居中对齐) */ .r_flex_center { display: flex; align-items: center !important; align-content: center !important; justify-content: center !important; } /* 盒模型布局二(左右对齐) */ .r_flex_space { display: flex; align-items: center; align-content: center; justify-content: space-between; } /* 盒模型布局三(左右对齐) */ .r_flex_column { display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; } /* 盒模型布局 仅上下对其 */ .r_flex_align { display: flex; align-items: center; } /* 绝对定位上下左右居中 */ .r_absolute { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } /* 块元素左右居中 */ .r_margin { display: block; margin: 0 auto; } /* 块元素百分百 */ .r_center { width: 100%; height: 100%; } /* 动画延迟 */ .r_transform { transition: all 0.4s; } .r_transform5 { transition: all 0.7s; } .r_transform4 { transition: all 0.5s; } .r_transform3 { transition: all 0.3s; } .r_transform2 { transition: all 0.2s; } .r_transform1 { transition: all 0.1s; } /* ios滚动不流畅 */ .r_iosscroll { overflow-y: auto; -webkit-overflow-scrolling: touch; } .r_text { /** 思路: 1.设置inline-block属相 2.强制不换行 3.固定高度 4.隐藏超出部分 5.显示“……” */ display: block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } .r_filter { filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-filter: grayscale(1); } /* 基本间距、边距 */ .r_margin_10 { display: block; margin: 0 10px; } .r_margin_14 { display: block; margin: 0 14px; } .r_margin_18 { display: block; margin: 0 18px; } .r_margin_20 { display: block; margin: 0 20px; } .r_margin_22 { display: block; margin: 0 22px; } .r_margin_24 { display: block; margin: 0 24px; } /* 字体大小 */ .r_size_12 { font-size: 12px; line-height: 12px; } .r_size_14 { font-size: 14px; line-height: 14px; } .r_size_16 { font-size: 16px; line-height: 16px; } .r_size_18 { font-size: 18px; line-height: 18px; } .r_size_20 { font-size: 20px; line-height: 20px; } .r_size_22 { font-size: 22px; line-height: 22px; } .r_size_24 { font-size: 24px; line-height: 24px; } .r_size_26 { font-size: 26px; line-height: 26px; } .r_size_28 { font-size: 28px; line-height: 28px; } .r_size_30 { font-size: 30px; line-height: 30px; } .r_size_32 { font-size: 32px; line-height: 32px; } .r_size_34 { font-size: 34px; line-height: 34px; } .r_size_36 { font-size: 36px; line-height: 36px; } .r_size_38 { font-size: 38px; line-height: 38px; } .r_size_40 { font-size: 40px; line-height: 40px; } /* 字体颜色 */ .r_red { color: #fc2828; } .r_hui { color: #808080; } .hot, .icon-red { color: #ff0000; } .len { color: #12cbec; } /* 无法选择文字 */ .r_text_none { user-select: none; } /****************************** 组件样式设置 ***********************************/