|
|
| 第6行: |
第6行: |
| margin-left: 51%; | | margin-left: 51%; |
| } | | } |
| /* 日历,测试 Start */
| |
| * {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%;}
| |
| }
| |
| /* 日历,测试 End */
| |
|
| |
|
| /* 横向滚动 Start */ | | /* 横向滚动 Start */ |