CSS 日历样式

CSS 代码： * {box-sizing:border-box;} ul {list-style-type: none;} body {font-family: Verdana,sans-serif;}

.month { padding: 70px 25px; width: 100%; background: #1abc9c; }

.month ul { margin: 0; padding: 0; }

.month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; }

.month .prev { float: left; padding-top: 10px; }

.month .next { float: right; padding-top: 10px; }

.weekdays { margin: 0; padding: 10px 0; background-color: #ddd; }

.weekdays li { display: inline-block; width: 13.6%; color: #666; text-align: center; }

.days { padding: 10px 0; background: #eee; margin: 0; }

.days li { list-style-type: none; display: inline-block; width: 13.6%; text-align: center; margin-bottom: 5px; font-size:12px; color: #777; }

.days li .active { padding: 5px; background: #1abc9c; color: white !important }

/* 添加不同尺寸屏幕的样式 */ @media screen and (max-width:720px) { .weekdays li, .days li {width: 13.1%;} }

@media screen and (max-width: 420px) { .weekdays li, .days li {width: 12.5%;} .days li .active {padding: 2px;} }

@media screen and (max-width: 290px) { .weekdays li, .days li {width: 12.2%;} }