0d1aa1540926746793588bf211dbfb58cfab3505.svn-base 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /* Flex 布局 */
  2. /* 平行 */
  3. .row,.column {
  4. display: flex;
  5. flex-direction: row;
  6. }
  7. /* 垂直 */
  8. .column {
  9. flex-direction: column;
  10. }
  11. /* 自动填充 */
  12. .col-w,.col-h {
  13. flex: 1;
  14. }
  15. /* 横向 */
  16. .col-w {
  17. width: 0;
  18. }
  19. /* 纵向 */
  20. .col-h {
  21. height: 0;
  22. }
  23. /* 水平垂直居中 */
  24. .center {
  25. justify-content: center;
  26. align-items: center;
  27. }
  28. /* 水平居中 */
  29. .item-center {
  30. align-items: center;
  31. }
  32. /* 垂直居中 */
  33. .vertical-center {
  34. justify-content: center;
  35. }
  36. /* 上对齐 */
  37. .topAlignment {
  38. align-items: flex-strat;
  39. }
  40. /* 右对齐 */
  41. .rightAlignment {
  42. justify-content: flex-end;
  43. }
  44. /* 下对齐 */
  45. .bottomAlignment {
  46. align-items: flex-end;
  47. }
  48. /* 左右对齐,项目之间的间隔都相等 */
  49. .allAlignment {
  50. justify-content: space-between;
  51. }
  52. /* 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍 */
  53. .average {
  54. justify-content: space-around;
  55. }
  56. /* 项目的第一行文字的基线对齐 */
  57. .items-baseline {
  58. align-items: baseline;
  59. }
  60. /* 省略号 */
  61. .ellipsis{
  62. overflow: hidden;
  63. text-overflow:ellipsis;
  64. white-space: nowrap;
  65. }
  66. body{
  67. margin: 0;
  68. padding: 0;
  69. }
  70. /* 取消苹果的safari浏览器下点击出现高亮效果 */
  71. *{
  72. -webkit-tap-highlight-color:rgba(0,0,0,0)
  73. }
  74. /* 赔率变低 */
  75. .reduce_color{
  76. background:red
  77. /* animation:mymove1 5s linear 0s 1;
  78. -webkit-animation:mymove1 5s linear 0s 1; */
  79. }
  80. /* @keyframes mymove1
  81. {
  82. from {background:red}
  83. to {background:white}
  84. }
  85. @-webkit-keyframes mymove1
  86. {
  87. from {background:red}
  88. to {background:white}
  89. } */
  90. /* 赔率增高 */
  91. .increased_color{
  92. background:Lightgreen
  93. /* animation:mymove 5s linear 0s 1;
  94. -webkit-animation:mymove 5s linear 0s 1;Safari and Chrome */
  95. }
  96. /* @keyframes mymove
  97. {
  98. from {background:Lightgreen}
  99. to {background:white}
  100. }
  101. @-webkit-keyframes mymove
  102. {
  103. from {background:Lightgreen}
  104. to {background:white}
  105. } */