/*
Base Reset CSS
*/
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
font-family:"Microsoft Yahei";
background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1486823066&di=c88093f821a497bdbb6b0cd5d5cefcfe&src=http://pic1.win4000.com/wallpaper/e/57ac30eb52fcb.jpg) no-repeat;
background-size:cover;
background-position:center center;
background-attachment:fixed;
}
a {
text-decoration:none;
}
ul,li {
padding:0;
margin:0;
list-style:none;
}
/*
Common
*/
.container h1 {
color:#333;
font-weight:100;
background:rgba(255,255,255,.5);
text-align:center;
}
.container ul li {
font-size:60px;
font-weight:100;
color:#fff;
border-radius:10px;
text-align:center;
}
.container ul li:nth-child(1) {
background:rgba(255,102,102,.7);
}
.container ul li:nth-child(2) {
background:rgba(0,204,153,.75);
}
.container ul li:nth-child(3) {
background:rgba(204,153,204,.55);
}
.container ul li:nth-child(4) {
background:rgba(255,255,255,.2);
}
sub {
font-weight:400;
font-size:15px;
}
/*
桌面显示器,width>=992px
*/
@media (min-width:992px) {
.container {
position:absolute;
top:50%;
left:50%;
margin:-240px 0 0 -480px;
width:960px;
height:480px;
text-align:center;
background:rgba(0,0,0,.3);
border-radius:10px;
transition:all 0.5s;
}
.container h1 {
margin:50px 0;
padding:20px;
font-size:40px;
}
.container ul {
overflow:auto;
}
.container ul li {
display:inline-block;
width:180px;
height:180px;
line-height:180px;
font-size:60px;
font-weight:100;
color:#fff;
border-radius:10px;
}
.container ul li:nth-child(2) {
margin:0 15px;
}
.container ul li:nth-child(3) {
margin:0 15px 0 0;
}
}/*
平板,768px=修改背景图片和添加音乐可以为倒计时润色哦