body{ height:300px; overflow:hidden } .part-40 { width: 40%; height: 100%; float: left; background: #DFF4FF; } .part-60 { width: 60%; height: 100%; float: left; background-color: #F0F9FE; } .content-bg { width: 100%; float: left; color: #54A1FE; } .date-table { width: 100%; table-layout: fixed; border-collapse: collapse; } .date-table tbody td { text-align: center; line-height: 20px; font-size: 18px; padding: 3px; cursor: pointer; } .date-table tbody tr:first-child td { padding: 6px; font-size: 14px; color:#fff; background-color:#54A1FE } .date-table tbody td center { height: 30px; line-height:30px } .acTive center{ border:1px solid #3292F2; } .today center{ color: white; background-color: #3292F2; } .meets { background-image: url(../img/red.png); background-repeat:no-repeat; background-position:right top } .badgeActive{ background: #FF5859; color: white; } .Date-page{ width:194px } .group-item-btn{ width:96%; height:50%; min-height:140px; margin:0 2%; cursor:pointer; background-repeat: no-repeat; background-position: center center; background-size: cover; position:relative } .group-item-btn .content{ width: 100%; height: 110px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .group-item-btn .icon { width: 100%; height: 80px; background-repeat: no-repeat; background-position: center center; background-size: 75px 75px; } .group-item-btn .title { width: 100%; height: 40px; line-height: 40px; color: #ffffff; font-size: 24px; text-align: center; } .left{ width:50%; height:100%; float:left; position:relative; background-color:#B285ED; background-image:url('../img/zhiban.png'); background-repeat:no-repeat; background-position-x:center; background-position-y:-10px; } .right{ width:50%; height:100%; float:left; position:relative; background-color:#FF3C3C; background-image:url('../img/jilu.png'); background-repeat:no-repeat; background-position-x:center; background-position-y:-10px; } .left>.title, .right>.title{ position:absolute; bottom:10px; left:50%; transform:translate(-50%,0) }