* { padding:0; margin:0; } html,body { width:100%; height:100%; background:-webkit-radial-gradient(#f50607,#800807); background:-moz-radial-gradient(#f50607,#800807); background:-o-radial-gradient(#f50607,#800807); background:radial-gradient(#f50607,#800807); } .container { width:500px; padding:100px; margin:0 auto; overflow:hidden; } .left { width:250px; float:left; } .left h2 { line-height:50px; text-align:center; color:#fff; } .level,.result-box,button { width:250px; height:40px; } .level { border-radius:4px; font-size:18px; } .result-box { margin:15px 0; border-radius:4px; background-color:#fff; text-align:center; line-height:36px; font-size:18px; } button { border:none; color:#fff; font-size:18px; border-radius:4px; cursor:pointer; } button:focus { outline:none; } .start { background-color:#428bca; } .end { background-color:#d9534f; } .list { width:200px; min-height:250px; background:#fff; float:right; border-radius:4px; padding:10px; }
里面有相关注释