reset.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. /*
  2. * @Date: 2019-11-18 16:41:12
  3. * @LastEditTime : 2020-01-11 15:25:32
  4. * @开 发: lancer
  5. * @版 本: 1.00
  6. * @页面描述: 重置样式表
  7. */
  8. /****************************** 自定义公共类 ***********************************/
  9. /* 清除浮动 */
  10. .r_clearfix::before,
  11. .r_clearfix::after {
  12. content: '';
  13. display: table;
  14. clear: both;
  15. }
  16. /* 怪异盒模型 */
  17. .r_moxing {
  18. box-sizing: border-box;
  19. }
  20. /* 块元素 */
  21. .r_block {
  22. display: block;
  23. }
  24. /* 盒模型布局一 */
  25. .r_flex {
  26. display: flex;
  27. }
  28. /* 盒模型布局一 以列排序 */
  29. .r_flex_wrap {
  30. display: flex;
  31. flex-direction: column;
  32. align-items: center;
  33. }
  34. /* 盒模型布局一(左右居中对齐) */
  35. .r_flex_center {
  36. display: flex;
  37. align-items: center !important;
  38. align-content: center !important;
  39. justify-content: center !important;
  40. }
  41. /* 盒模型布局二(左右对齐) */
  42. .r_flex_space {
  43. display: flex;
  44. align-items: center;
  45. align-content: center;
  46. justify-content: space-between;
  47. }
  48. /* 盒模型布局三(左右对齐) */
  49. .r_flex_column {
  50. display: flex;
  51. flex-direction: column;
  52. align-items: center;
  53. align-content: center;
  54. justify-content: center;
  55. }
  56. /* 盒模型布局 仅上下对其 */
  57. .r_flex_align {
  58. display: flex;
  59. align-items: center;
  60. }
  61. /* 仅左右对其 */
  62. .r_flex_zy {
  63. display: flex;
  64. justify-content: space-between;
  65. }
  66. /* 绝对定位上下左右居中 */
  67. .r_absolute {
  68. position: absolute;
  69. top: 0px;
  70. left: 0px;
  71. right: 0px;
  72. bottom: 0px;
  73. margin: auto;
  74. }
  75. /* 块元素左右居中 */
  76. .r_margin {
  77. display: block;
  78. margin: 0 auto;
  79. }
  80. /* 块元素百分百 */
  81. .r_center {
  82. width: 100%;
  83. height: 100%;
  84. }
  85. /* 动画延迟 */
  86. .r_transform {
  87. transition: all 0.4s;
  88. }
  89. .r_transform5 {
  90. transition: all 0.7s;
  91. }
  92. .r_transform4 {
  93. transition: all 0.5s;
  94. }
  95. .r_transform3 {
  96. transition: all 0.3s;
  97. }
  98. .r_transform2 {
  99. transition: all 0.2s;
  100. }
  101. .r_transform1 {
  102. transition: all 0.1s;
  103. }
  104. /* ios滚动不流畅 */
  105. .r_iosscroll {
  106. overflow-y: auto;
  107. -webkit-overflow-scrolling: touch;
  108. }
  109. .r_text {
  110. /**
  111. 思路:
  112. 1.设置inline-block属相
  113. 2.强制不换行
  114. 3.固定高度
  115. 4.隐藏超出部分
  116. 5.显示“……”
  117. */
  118. display: block;
  119. white-space: nowrap;
  120. width: 100%;
  121. overflow: hidden;
  122. text-overflow: ellipsis;
  123. }
  124. .r_filter {
  125. filter: grayscale(100%);
  126. -moz-filter: grayscale(100%);
  127. -o-filter: grayscale(100%);
  128. -webkit-filter: grayscale(1);
  129. }
  130. /* 基本间距、边距 */
  131. .r_margin_10 {
  132. display: block;
  133. margin: 0 10px;
  134. }
  135. .r_margin_14 {
  136. display: block;
  137. margin: 0 14px;
  138. }
  139. .r_margin_18 {
  140. display: block;
  141. margin: 0 18px;
  142. }
  143. .r_margin_20 {
  144. display: block;
  145. margin: 0 20px;
  146. }
  147. .r_margin_22 {
  148. display: block;
  149. margin: 0 22px;
  150. }
  151. .r_margin_24 {
  152. display: block;
  153. margin: 0 24px;
  154. }
  155. /* 字体大小 */
  156. .r_size_12 {
  157. font-size: 12px;
  158. line-height: 12px;
  159. }
  160. .r_size_14 {
  161. font-size: 14px;
  162. line-height: 14px;
  163. }
  164. .r_size_16 {
  165. font-size: 16px;
  166. line-height: 16px;
  167. }
  168. .r_size_18 {
  169. font-size: 18px;
  170. line-height: 18px;
  171. }
  172. .r_size_20 {
  173. font-size: 20px;
  174. line-height: 20px;
  175. }
  176. .r_size_22 {
  177. font-size: 22px;
  178. line-height: 22px;
  179. }
  180. .r_size_24 {
  181. font-size: 24px;
  182. line-height: 24px;
  183. }
  184. .r_size_26 {
  185. font-size: 26px;
  186. line-height: 26px;
  187. }
  188. .r_size_28 {
  189. font-size: 28px;
  190. line-height: 28px;
  191. }
  192. .r_size_30 {
  193. font-size: 30px;
  194. line-height: 30px;
  195. }
  196. .r_size_32 {
  197. font-size: 32px;
  198. line-height: 32px;
  199. }
  200. .r_size_34 {
  201. font-size: 34px;
  202. line-height: 34px;
  203. }
  204. .r_size_36 {
  205. font-size: 36px;
  206. line-height: 36px;
  207. }
  208. .r_size_38 {
  209. font-size: 38px;
  210. line-height: 38px;
  211. }
  212. .r_size_40 {
  213. font-size: 40px;
  214. line-height: 40px;
  215. }
  216. /* 字体颜色 */
  217. .r_red {
  218. color: #fc2828;
  219. }
  220. .r_hui {
  221. color: #808080;
  222. }
  223. .hot,
  224. .icon-red {
  225. color: #ff0000;
  226. }
  227. .len {
  228. color: #12cbec;
  229. }
  230. /* 无法选择文字 */
  231. .r_text_none {
  232. user-select: none;
  233. }
  234. /* 家住 */
  235. .r_wzjc {
  236. font-weight: 900 !important;
  237. }
  238. /* 家住 */
  239. .r_cursor {
  240. cursor: pointer;
  241. /* 最常见,表示可点击(如链接、按钮) */
  242. }
  243. /****************************** 组件样式设置 ***********************************/