jquery实现手机端移动端在线考试答题测评问卷效果代码
代码语言:html
所属分类:其他
代码描述: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