/* 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=
修改背景图片和添加音乐可以为倒计时润色哦