| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- /* Flex 布局 */
- /* 平行 */
- .row,.column {
- display: flex;
- flex-direction: row;
- }
- /* 垂直 */
- .column {
- flex-direction: column;
- }
- /* 自动填充 */
- .col-w,.col-h {
- flex: 1;
- }
- /* 横向 */
- .col-w {
- width: 0;
- }
- /* 纵向 */
- .col-h {
- height: 0;
- }
- /* 水平垂直居中 */
- .center {
- justify-content: center;
- align-items: center;
- }
- /* 水平居中 */
- .item-center {
- align-items: center;
- }
- /* 垂直居中 */
- .vertical-center {
- justify-content: center;
- }
- /* 上对齐 */
- .topAlignment {
- align-items: flex-strat;
- }
- /* 右对齐 */
- .rightAlignment {
- justify-content: flex-end;
- }
- /* 下对齐 */
- .bottomAlignment {
- align-items: flex-end;
- }
- /* 左右对齐,项目之间的间隔都相等 */
- .allAlignment {
- justify-content: space-between;
- }
- /* 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍 */
- .average {
- justify-content: space-around;
- }
- /* 项目的第一行文字的基线对齐 */
- .items-baseline {
- align-items: baseline;
- }
- /* 省略号 */
- .ellipsis{
- overflow: hidden;
- text-overflow:ellipsis;
- white-space: nowrap;
- }
- body{
- margin: 0;
- padding: 0;
- }
- /* 取消苹果的safari浏览器下点击出现高亮效果 */
- *{
- -webkit-tap-highlight-color:rgba(0,0,0,0)
- }
- /* 赔率变低 */
- .reduce_color{
- background:red
- /* animation:mymove1 5s linear 0s 1;
- -webkit-animation:mymove1 5s linear 0s 1; */
- }
- /* @keyframes mymove1
- {
- from {background:red}
- to {background:white}
- }
- @-webkit-keyframes mymove1
- {
- from {background:red}
- to {background:white}
- } */
-
- /* 赔率增高 */
- .increased_color{
- background:Lightgreen
- /* animation:mymove 5s linear 0s 1;
- -webkit-animation:mymove 5s linear 0s 1;Safari and Chrome */
- }
- /* @keyframes mymove
- {
- from {background:Lightgreen}
- to {background:white}
- }
- @-webkit-keyframes mymove
- {
- from {background:Lightgreen}
- to {background:white}
- } */
|