html { display:grid; min-height:100%; } body { display:grid; background:#183059; } .container { position:relative; margin:auto; overflow:hidden; width:650px; height:180px; } h1 { font-family:"Lato",sans-serif; text-align:center; margin-top:2em; font-size:1em; text-transform:uppercase; letter-spacing:5px; color:#F6F4F3; } #timer { color:#F6F4F3; text-align:center; text-transform:uppercase; font-family:"Lato",sans-serif; font-size:.7em; letter-spacing:5px; } .days,.hours,.minutes,.seconds { display:inline-block; padding:20px; width:100px; border-radius:5px; } .days { background:#EF2F3C; } .hours { background:#F6F4F3; color:#183059; } .minutes { background:#276FBF; } .seconds { background:#F0A202; } .numbers { font-family:"Montserrat",sans-serif; color:#183059; font-size:5em; } footer { position:absolute; bottom:0; right:0; text-transform:uppercase; padding:10px; font-family:"Lato",sans-serif; font-size:0.7em; } footer p { letter-spacing:3px; color:#EF2F3C; } footer a { color:#F6F4F3; text-decoration:none; } footer a:hover { color:#276FBF; }
这是用js设置日期倒计时的插件,非常简单方便!