|
|
| (未显示同一用户的4个中间版本) |
| 第6行: |
第6行: |
| margin-left: 51%; | | margin-left: 51%; |
| } | | } |
| /* 日历,测试 Start */ | | |
| * {box-sizing:border-box;}
| | /* 横向滚动 Start */ |
| ul {list-style-type: none;}
| | .scroll { |
| body {font-family: Verdana,sans-serif;}
| | display:block; |
|
| | text-align: center; |
| .month {
| | white-space: nowrap; |
| padding: 70px 25px;
| | overflow-x: scroll; |
| width: 100%;
| | overflow-y: hidden; |
| background: #1abc9c;
| | width: 300px; |
| }
| | } |
|
| | /* 横向滚动 End */ |
| .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 */ | |
|
| |
|
| /* Link-box Start */ | | /* Link-box Start */ |
| 第101行: |
第30行: |
| box-shadow: 0 2px 4px rgba(0,0,0,0.08),0 0 3px rgba(0,0,0,0.1); | | box-shadow: 0 2px 4px rgba(0,0,0,0.08),0 0 3px rgba(0,0,0,0.1); |
| transition: box-shadow 0.2s ease-in-out; | | transition: box-shadow 0.2s ease-in-out; |
| }
| |
| .link-box:hover {
| |
| z-index: 3;
| |
| box-shadow: 0 8px 9px rgba(0,0,0,0.08), 0 0 6px rgba(0,0,0,0.1);
| |
| } | | } |
| .link-box:active { | | .link-box:active { |
| 第126行: |
第51行: |
| object-fit: cover; | | object-fit: cover; |
| transition: transform 0.4s cubic-bezier(0.32, 0, 0.4, 1); | | transition: transform 0.4s cubic-bezier(0.32, 0, 0.4, 1); |
| }
| |
| .link-box:hover>.img-box>* {
| |
| transform: scale(1.1);
| |
| } | | } |
| .txt-box { | | .txt-box { |