body,div,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,table,th,td,input,button,select,textarea { margin:0; padding:0; font-style:normal; font:12px/22px Arial,Helvetica,sans-serif; } ol,ul,li { list-style:none; } img { border:0; vertical-align:middle; } body { color:#000000; background:#FFF; } a { color:#000000; text-decoration:none; } a:hover { color:#F00; } #box { width:830px; height:300px; margin:50px auto 0px; } #box .left,#box .right,#box .in { border:1px solid #ccc; } #box .left,#box .right { width:278px; height:278px; margin:10px; padding:10px; color:#ff8080; float:left; font-size:16px; } #box .in { float:left; width:160px; height:298px; margin:10px; border:1px solid #ccc; } #box .in .btn { display:block; width:130px; height:40px; border:none; outline:none; margin:20px auto 0; background:#ff8080; color:#fff; } #box .in .btn:hover { background:#ff0000; cursor:pointer; } #box .in .progress { display:none; width:100%; margin:50px 0 0; text-align:center; } #box .in .progress progress { display:block; width:120px; height:20px; margin:5px auto 0 } #box .in .progress span { font-size:16px; } #box .in .progress_quotes { display:none; width:85px; margin:20px auto 0; } #box .in .progress_quotes span { display:inline-block; width:12px; height:32px; border:1px solid #ccc; } #box .in .progress_quotes span.on { background:#ff8080; } #box .in .counts { display:none; width:50px; height:20px; margin:0 auto; text-align:center; line-height:20px; font-size:16px; }
练习项目,希望能帮助到需要此效果的同学