jquery实现手机端移动端问卷调查表效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现手机端移动端问卷调查表效果代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>开始做题</title>
    <!--手机端需要添加-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0"/>-->
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!--手机端需要添加-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            padding: 0;
            margin: 0;
            background:url(//repo.bfw.wiki/bfwrepo/image/608b2e98bf0f1.png) no-repeat;
            background-size: cover;
           
            color: #2f3441;
            height: 100vh;
          
        }
        span, p, ul, li, h1, h2, h3, h4, h5, input {
            margin: 0;
            padding: 0;
            font-weight: normal
        }
        h2, h3 {
            font-size: 0.7rem;
            line-height: 100%
        }
        ul, li {
            list-style: none;
        }
        img {
            border: none;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        a:focus {
            outline: none;
        }
        .clear {
            clear: both
        }
        .fl {
            float: left
        }
        .fr {
            float: right
        }
        .mar_b_60 {
            margin-bottom: 3rem;
        }
        .mar_b_70 {
            margin-bottom: 3.5rem;
        }
        .orgen_color {
            color: #40bb6b;
        }
        .mt20 {
            margin-top: 1rem;
        }
        .text_c {
            text-align: center;
        }
        .c333 {
            color: #333;
        }
        .c666 {
            color: #666;
        }
        .c999 {
            color: #999;
        }
        .f10 {
            font-size: 0.5rem;
        }
        .f11 {
            font-size: 0.55rem;
        }
        .f12 {
            font-size: 0.6rem;
        }
        .f14 {
            font-size: 0.7rem;
        }
        .f16 {
            font-size: 0.8rem;
        }
        .f18 {
            font-size: 0.9rem;
        }
        .fzc {
            font-style: normal;
        }
        i {
            font-style: normal;
        }
        .hide {
            display: none;
        }
        /* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */
        a, span, button, input, li, ul {
            -webkit-tap-highlight-color: rgba(255,0,0,0);
        }
        /*考试-----------------------------------------*/
        .clear_wl:after {
            content: ".";
            height: 0;
            visibility: hidden;
            display: block;
            clear: both;
        }
        .kasj_db_but {
            width: 90%;
            height: auto;
            background: #fab033;
            text-align: center;
            overflow: hidden;
            margin: 0 auto;
            border-radius: 3px;
            margin-top: 1.3rem;
            box-shadow: 0 0.2rem #c48b2a;
        }
        .kasj_db_but a {
            width: 100%;
            display: block;
            float: left;
            text-align: center;
            color: #fff;
            line-height: 2.2rem;
            font-size: 0.8rem;
            text-shadow: 0 1px 1px #c78d2c;
        }
        /*移动后效果*/
        .kasj_db_but:hover {
            box-shadow: 0 0.1rem #c48b2a;
            margin-top: 1.3rem;
        }
        /*点击后效果*/
        .kasj_db_but:active {
            box-shadow: 0 0 #c48b2a;
            margin-top: 1.5rem;
        }
        .fix_but {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            border-radius: 0;
        }


        .h50 {
            height: 2.5rem;
        }
        .kasj_db_but a.kasj_kszd_but {
            width: 100%;
        }
        .kcks_title_ts {
            margin: 0.4rem;
            padding: 0.2rem 0.1rem;
            text-shadow: 0 1px 1px #fff;
            border: 2px dotted #017c9e;
            border-radius: 1.2rem;
        }
        .kcks_title_ts .kctm_zzbt {
            font-size: 0.9rem;
            color: #2f3441;
            margin-bottom: 0.75rem;
            padding-left: 0.5rem;
            margin-top: 0.5rem;
            text-shadow: 0 1px 1px #fff;
        }
        .dxt_box {
            margin-top: 0.5rem;
        }
        .dxt_box li {
            overflow: hidden;
            height: auto;
            font-size: 0.8rem;
            margin-bottom: 0.5rem;
            text-shadow: 0 1px 1px #fff;
        }
        .dxt_box li em {
            display: block;
            font-style: normal;
            height: 0.8rem;
            line-height: 0.8rem;
            border: 1px solid #99a4bf;
            color: #99a4bf;
            text-align: center;
            width: 0.8rem;
            border-radius: 50%;
            float: left;
            margin-left: 0.5rem;
        }
        .dxt_box li span {
            display: block;
            margin-left: 0.2rem;
            float: left;
            line-height: 0.8rem;
            color: #99a4bf;
            font-size: 0.6rem;
        }
        .dxt_box li.on em {
            border: 1px solid #f05150;
            background: #f05150;
            color: #f05150;
        }
        .dxt_box li.on span {
            color: #f05150;
        }
        .tm_db_tip {
            position: fixed;
            left: 0px;
            bottom: 2rem;
            width: 100%;
            height: auto;
            padding: 0.5rem 0;
            font-size: 0.55rem;
            color: #999;
            background: #f7f9fc;
            text-align: center;
            overflow: hidden;
        }
        .tm_db_tip .dxdt_wen {
            float: left;
            margin-top: 0.25rem;
            margin-left: 0.5rem;
        }
        .tm_db_tip .kstm_fx {
            float: right;
            margin-right: 0.5rem;
        }
        .tm_db_tip .kstm_fx i {
            font-size: 0.9rem;
            padding-right: 0.25rem;
            color: #40bb6b;
        }
        .ckda_box {
            margin-top: 1rem;
        }
        .lxbg_tip .f11 {
            text-align: left;
            padding-left: 0.5rem;
        }
        .nidedf_red {
            color: #f10303;
            font-size: 2.4rem;
            padding: 0.5rem 0;
        }
        .nidedf_red i {
            font-size: 0.6rem;
        }
        .nidedf.........完整代码请登录后点击上方下载按钮下载查看