jquery实现手机端移动端问卷调查表效果代码
代码语言：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_grenn {
color: #40bb6b;
font-size: 2.4rem;
padding: 0.5rem 0;
}
.nidedf_grenn i {
font-size: 0.6rem;
}
.ckda_box .ckdw_itrem {
padding-top: 0.5rem;
}
.zql_list {
overflow: hidden;
padding: 0.5rem 0;
}
.zql_list li {
font-size: 0.55rem;
float: left;
width: 33.33%;
text-align: center;
color: #99a4bf;
}
.zql_list li p {
color: #333;
padding-bottom: 0.55rem;
}
.dtks_box {
width: 90%;
line-height: 0.9rem;
font-size: 0.6rem;
margin: 0.5rem auto;
color: #333;
background: #FFF;
border: 2px solid #014964;
border-radius: 1.5rem;
}
.dts_con {
margin: 0.4rem;
padding: 0.2rem 0.4rem;
text-shadow: 0 1px 1px #fff;
border: 2px dotted #017c9e;
border-radius: 1.2rem;
}
.dts_con strong {
font-weight: 400;
color: #f05150;
}
.cxjh_bt {
line-height: 1.2rem;
background: #40bb6b;
color: #fff;
border: 1px solid #ddd;
width: 94%;
margin: 0.5rem auto;
margin-bottom: 0;
box-shadow: 0 0 2px #ddd;
border-radius: 5px;
}
.cxjh_bt span {
line-height: 1.5rem;
display: block;
padding: 0.5rem;
font-size: 1rem;
}
.cxjh_bt span strong {
color: #f9fe70;
font-weight: 400;
}
.dts_con p {
margin-bottom: 1rem;
}
.tinbt {
font-size: 1.5rem;
color: #40bb6b;
font-weight: 400;
padding: 1rem;
margin-top: 1rem;
}
.wjdt_title {
color: #fff;
padding: 0.5rem;
padding-left: 4rem;
}
.wjdt_title h3 {
font-size: 1.8rem;
}
.wjdt_title p {
font-size: 0.7rem;
color: #fff100;
padding-top: 0.5rem;
}
/*弹框*/
.tck_box {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 888;
width: 100%;
height: 100%;
}
.tckk_bj {
background: #000;
opacity: 0.8;
position: absolute;
z-index: 444;
width: 100%;
height: 100%;
}
.tck_box .tck_conn {
position: absolute;
z-index: 555;
background: #FFF;
box-shadow: 0 0 2px #ddd;
border-radius: 3px;
width: 90%;
left: 50%;
top: 8rem;
margin-left: -45.5%;
padding-bottom: 0.9rem;
border: 2px solid #523b22;
}
.tck_box .tck_conn h4 {
font-size: 0.75rem;
text-align: center;
line-height: 2.5rem;
}
.tck_box .tck_conn .qsx_shf li {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0