CSS

語言：

CSSSCSS

確定

body {

min-height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

font-family: 'Lato', serif;

font-size: 20px;

background: #f38979;

background-image: -webkit-radial-gradient(50% 110%, ellipse 800px 100%, #f6bf9e, #f05454);

background-image: radial-gradient(ellipse 800px 100% at 50% 110%, #f6bf9e, #f05454);

}

p {

line-height: 1.4;

}

.container {

height: 100%;

width: 100%;

max-width: 600px;

box-sizing: border-box;

margin: 24px auto 0;

padding: 0 24px;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

.box {

margin-bottom: 24px;

padding: 24px;

text-align: center;

background: white;

border-radius: 5px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}

.box-input {

color: #7887b0;

}

.box-output {

color: white;

background: #345d71;

padding: 48px;

}

.number-container {

margin: 0 0.8em;

vertical-align: 20%;

color: #f05454;

}

@media (max-width: 540px) {

.number-container {

display: block;

margin: 24px 0;

}

}

.number-input,

.hash,

.date-output {

font-family: inherit;

font-weight: 700;

vertical-align: middle;

}

.hash {

margin-right: -0.2em;

font-size: 1.5em;

}

.number-input {

width: 2.25em;

padding: 0 0 0 0.2em;

box-sizing: border-box;

margin: -0.15em 0;

font-size: 2.5em;

color: inherit;

background: transparent;

border: none;

border-bottom: 2px solid #f05454;

outline: none;

-moz-appearance: textfield;

}

.number-input::-webkit-inner-spin-button {

display: none;

}

.number-input:before {

content: '#';

}

.number-input::-webkit-input-placeholder {

opacity: 0.2;

color: inherit;

}

.number-input::-moz-placeholder {

opacity: 0.2;

color: inherit;

}

.number-input:-ms-input-placeholder {

opacity: 0.2;

color: inherit;

}

.number-input::placeholder {

opacity: 0.2;

color: inherit;

}

.output {

display: none;

}

.date-container {

margin-bottom: 24px;

}

.date-output {

margin-left: 0.3em;

font-size: 2.2em;

font-weight: 700;

vertical-align: -20%;

}

@media (max-width: 540px) {

.date-output {

display: block;

margin: 24px 0;

}

}

.text-container {

max-width: 300px;

margin: 0 auto;

}

.number-output,

.days-output {

font-weight: 700;

}

總結

以上是生活随笔為你收集整理的js 月份间隔计算器_Moment.js 任务剩余时间计算器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。