jquery实现一个带进度的在线答题测验出结果代码

代码语言:html

所属分类:其他

代码描述:jquery实现一个带进度的在线答题测验出结果代码

代码标签: jquery 进度 在线 答题 测验 结果 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
   
<meta charset="UTF-8">

   
<style>
        .main-quiz-holder {
        margin:0 auto;
        position:relative;
        background:#FCFCFC;
        border:1px solid #dedede;
        box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
        -o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
        -webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
        -moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
        border-radius:20px 2px 20px 2px;
        position:relative;
        width:600px;
}
.main-quiz-holder * {
        margin:0;
        padding:0;
        font-family:"Microsoft yahei",sans-serif;
}
.main-quiz-holder a {
        text-decoration:none;
        color:#6C6C6C;
}
.main-quiz-holder .slide-container {
        width:500px;
        padding:20px 50px 50pt 50px;
}
.results-container,.intro-container {
        text-align:center;
}
.results-container {
        }.main-quiz-holder .slide-container .question,.main-quiz-holder h2.qTitle {
        margin:10px 0 20px 0;
        font-size:20px;
        font-weight:normal;
}
.main-quiz-holder h2.qTitle {
        font-size:20px;
        margin-top:30px;
        line-height:26px
}
.main-quiz-holder .question-number {
        position:absolute;
        right:10px;
        top:10px;
        border:1px solid #F6F6F6;
        padding:5px;
        background:#F0F0F0;
        text-shadow:0 1px 0 rgba(255,255,255,0.3);
        -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
        -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
        border-radius:3px;
        color:#949494;
}
.main-quiz-holder .slide-container ul.answers {
        margin:0px;
        padding:5px;
        list-style:none;
}
.main-quiz-holder .slide-container ul.answers li {
        cursor:pointer;
        padding:5px 30px;
        margin:12px 0;
        color:#4c4c4c;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        text-shadow:0 1px 0 rgba(255,255,255,0.3);
        -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
        -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
        background:#f6f6f6;
        background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#d4d4d4));
        background:-webkit-linear-gradient(#f6f6f6,#d4d4d4);
        background-image:-moz-linear-gradient(top,#f6f6f6,#d4d4d4);
        background-image:-moz-gradient(top,#f6f6f6,#d4d4d4);
        border:1px solid #a1a1a1;
}
.main-quiz-holder .slide-cont.........完整代码请登录后点击上方下载按钮下载查看

网友评论0