jquery实现手机端移动端在线考试答题测评问卷效果代码

代码语言:html

所属分类:其他

代码描述:jquery实现手机端移动端在线考试答题测评问卷效果代码

代码标签: jquery 手机端 问卷 测评 考试 答题

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style type="text/css">
        /* new for name 2014 */
        .progress-sm{height:10px;}
        .progress-xs { height: 6px; }
     
        #content{color:#fff;}
        #header h1{text-shadow: 2px 2px 2px rgba(0,0,0,0.5);margin-top: 0;padding:8px 0}
        #header .progress{max-width:80%;margin:0 auto;}
        #header h1,#header p{
        background: -moz-linear-gradient(left,  rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.23) 13%, rgba(0,0,0,0.5) 29%, rgba(0,0,0,0.67) 50%, rgba(0,0,0,0.55) 71%, rgba(0,0,0,0.36) 81%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.01)), color-stop(13%,rgba(0,0,0,0.23)), color-stop(29%,rgba(0,0,0,0.5)), color-stop(50%,rgba(0,0,0,0.67)), color-stop(71%,rgba(0,0,0,0.55)), color-stop(81%,rgba(0,0,0,0.36)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.23) 13%,rgba(0,0,0,0.5) 29%,rgba(0,0,0,0.67) 50%,rgba(0,0,0,0.55) 71%,rgba(0,0,0,0.36) 81%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.23) 13%,rgba(0,0,0,0.5) 29%,rgba(0,0,0,0.67) 50%,rgba(0,0,0,0.55) 71%,rgba(0,0,0,0.36) 81%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.23) 13%,rgba(0,0,0,0.5) 29%,rgba(0,0,0,0.67) 50%,rgba(0,0,0,0.55) 71%,rgba(0,0,0,0.36) 81%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: linear-gradient(to right,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.23) 13%,rgba(0,0,0,0.5) 29%,rgba(0,0,0,0.67) 50%,rgba(0,0,0,0.55) 71%,rgba(0,0,0,0.36) 81%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
        border-radius:50px;
        }
        #header p,#ad h3{text-shadow:1px 1px 1px rgba(0,0,0,0.5)}
        #ad p{margin-top:5px}
        
        a:hover{text-decoration: none;}
        .bold{font-weight: bold;}
        .mgn{margin: 0 !important;}
        .pdn{padding: 0 !important;}
        h1{font-size: 26px;}
        h2{font-size: 24px;}
        h3{font-size: 16px;}
        h4{font-size: 14px;}
        .avatar .img-circle{display: block;width:80px;height: 80px;background: #5CB85C;font-size: 34px;line-height: 80px;margin:0 auto;color:#fff}
        .form-control{padding:12px;font-size: 18px; height:40px;border-radius:0;box-shadow:none;border-color:#aaa}
        
        .sm_container #bd{margin-top: 30px;}
        .sm_container #bd form{padding-top: 0;}
        #bd{margin-top: 60px;background:rgba(255,255,255,0.7)}
        #bd form{position: relative; padding-top: 40px;}
        #bd .avatar{width:100%;position: absolute;top:-60px;}
        #bd dl, #bd p{color:#222;}
        #bd h1{margin-top: 0;}
        #bd dl dt{font-size: 18px;}
        #bd dl dd{font-size: 16px;text-shadow: 0 1px 0 rgba(255,255,255,0.3)}
        #bd .list-group {color:#222;}
        #bd form .list-group li.active{background: #006fba;color:#fff;}
        
        #bd .list-group-item{font-size: 16px;}
        
        #header_bar { height: 44px; padding: 8px 10px; }
        #header_bar a { color: #FFFFFF; font-size: 24px; }
        #header_bar a:hover { text-decoration: none;}
        
        
        .btn-primary { background:rgba(0, 0, 0, 0); border-color: #666; color: #666;}
        .btn-primary:hover, .btn-primary.current { background-color: rgba(0, 0, 0, 0.05); border-color: #444; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset; color: #444;}
        
        #menu-right {text-align: center;}
        #menu-left .mm-header{padding-top: 15px;}
        #menu-left h2{background: rgba(0,0,0,0.1); padding: 6px 0;border-radius:34px;}
        
        /* mc 澶氶」閫夋嫨 */
        .mc .list-unstyled{font-size: 16px;color:#222;font-weight: bold;}
        .mc .list-unstyled li{padding:8px 18px 8px 0;position: relative;}
        .mc .list-unstyled li .icon-checkbox-checked{color:#179406;}
        .mc .list-unstyled li .icon-checkbox-unchecked {color:#888;}
        .mc .list-unstyled .icon-info{float: right;position: absolute;right:-4px;top:8px;color:#006fba;font-size: 20px;}
        .mc .list-unstyled a{color: #383838;}
        .mc .list-unstyled a:hover{text-decoration: none;}
        .popover{max-width:240px;font-size: 14px;}
        
        
        
        /* wheel */
        .wheel-wrap { position: relative; width: 290px; height: 290px; overflow: hidden; margin: 0 auto; z-index: 1; }
        .marker { top: 80px; left:106px; z-index: 2; position: absolute; }
        .wheel { top: 20px; left: 75px; width: 290px; z-index: 1;}
        
        
        /* new cate */
        .cate_table td{border:none !important}
        .cate_items{display: block; height:90px;background-color: #212121;position: relative;}
        .cate_items i{font-size: 30px;font-weight:normal;color:rgba(255,255,255,0.9);font-style:normal;line-height:70px}
        .cate_items span{display: block;width:100%;font-weight:bold;color:#fff;background: rgba(0,0,0,0.2);position: absolute;bottom:0;font-size:16px;padding:3px 0}
     
        
        
        /* copy */
        #copy a{font-size: 10px;color:rgba(255,255,255,0.4);}
        
        
        /* more */
        h3.text-muted,#ad h3.text-muted{text-shadow:none;color:rgba(255,255,255,0.8);}
        #more ul{padding-left: 20px;}
        #more ul li{font-size: 14px;line-height: 1.8;color:rgba(255,255,255,0.5);}
        #more ul li a,#ad ul li a,#ad ul li a,#ad a{color:rgba(255,255,255,0.6);}
        #more ul li a:hover,#ad ul li a:hover,#ad a:hover{color:rgba(255,255,255,0.8);}
        #ad{padding-bottom: 30px;}
        #ad h4{padding-top: 3px;}
        #more h3 .more_link{font-size: 12px;color:rgba(255,255,255,0.5);}
        
        /* cate */
        #cate .table tr > td{border-top: none;text-align: center;background:rgba(255,255,255,0.1);}
        #cate .table tr td a{color:rgba(255,255,255,0.6);}
        #cate .table tr td:hover{background-color:rgba(255,255,255,0.3) }
        #cate .table tr td a:hover{color:rgba(255,255,255,0.8);}
        
        
        /* pop share */
        #pop_success{position: absolute;width: 100%;height:236px;top:77px;z-index: 100;}
        #pop_success .glyphicon{font-size: 60px;color:#27B10A;}
        #pop_success .bd{width: 180px;padding-top: 26px;height: 170px;border-radius:8px;background: rgba(0,0,0,0.8);margin: 0 auto;}
        #pop_success .bd p{font-size: 22px;color:#fff;}
        
        .mm-menu.mm-bottom{height:85px !important;overflow: hidden;}
        .mm-menu > .mm-panel{padding: 10px 20px;}
        
        #popup-1 #close1{ background: #999; text-align: center; line-height: 40px; height: 40px; display: block; width:40px; font-size: 20px; position: absolute;right:6px;top:0; color:#fff; z-index: 10; }
        
        #mcover {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; z-index: 20000; }
        #mcover img {position: fixed; right: 18px; top: 5px; width: 260px!important; height: 180px!important; z-index: 20001; }
        
        
        /* fun */
        .avatar img.img-circle{width:100px;height:100px;border-radius:140px;}
        .input-group .btn{padding: 8px 16px;font-size: 16px;}
        .input-group .btn1{padding: 8px 16px;font-size: 16px;}
        #bd.panel-fun .buttons{margin-top: 20px;}
        
        .btn-nbg{background: none !important;border:none !important}
        body form .btn.btn-nbdc{background: none !important;}
        
        body form .btn1.btn-nbdc{background: none !important;}
        
        /* follow */
        #follow{position: fixed;bottom:0; border-radius: 8px 8px 0 0; margin: 0; width:100%; /* Rectangle 2: */ background: #E9E9E9; -moz-box-shadow:    0px -4px 10px 0px rgba(0,0,0,0.20); box-shadow:         0px -4px 10px 0px rgba(0,0,0,0.20);padding-bottom: 5px; padding-top: 15px;}
        #follow a#close1{position: absolute;display: block;text-align: center;background: #ddd;color:#555;border-radius:0 8px 0 8px;right: 0;top: 0;width: 40px;height: 40px;line-height: 40px;font-size: 20px;}
        #follow a#close1:hover{color:#fff;background: #D9534F;}
        #follow p{margin: 0;}
        
        
        /* exam */
        #exam_review{display:table}
        #exam_review li{display: inline-block;width:30px;height:30px;margin:0 6px 8px;}
        #exam_review li a{display: block;width:30px;height:30px;background: #2ca61b;line-height: 30px;color:#fff;text-align: center;}
        #exam_review li a:hover{background: #097c25;}
        #exam_review li a.wrong{background: #a40000;}
        #exam_review li a.wrong:hover{background: #e60012;}
        
                body {
                    background: #111302 !important;
                    background-size.........完整代码请登录后点击上方下载按钮下载查看

网友评论0