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;
}
练习项目,希望能帮助到需要此效果的同学