css布局手机端移动端答题测试代码-html代码-BFW代码库

代码语言：html

代码描述：css布局手机端移动端答题测试代码

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

<!DOCTYPE html>
<html lang="zh-cn">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        html,body{
    	margin:0;
    	padding:0;
    	color:#000;
    	-webkit-tap-highlight-color:rgba(0,0,0,0);
    	border:none
    }
    @media screen and (max-width:480px) and (min-width:320px){
    	body{
    	font-size:16px
    }
    
    }
    @media screen and (max-width:540px) and (min-width:480px){
    	body{
    	font-size:22px
    }
    
    }
    @media screen and (min-width:541px){
    	body{
    	font-size:26px
    }
    
    }
    html,body{
    	text-align:center;
    	width:100%;
    	height:100%;
    	font-family:arial;
    	margin:0px;
    	padding:0px
    }
    .title-area{
        position:relative;
    }
    .main{
    	width:100%;
    	height:100%;
    	display:block;
    	overflow-y:scroll
    }
    #head-img{
    	position:absolute;
    	left:0;
    	top:0;
    	width:100%;
    	height:60px
    }
    #wenti{
    	margin-top:70px;
    	text-align:center;
    
    	width:100%
    }
    #ti{
    
    	color:#fff;
    	margin-bottom:100px
    }
    .lt-w{
    	position:absolute;
    	left:0;
    	top:5px;
    	width:100%;
    	z-index:50
    }
    .t-s{
    	padding:5px;
    	padding-left:10%;
    	padding-right:10%;
    	background-color:#ff6552;
    	width:70%;
    	margin:15px auto;
    	position:relative;
    	border-radius:5px;
    	-webkit-transition:background-color 0.3s ease;
    	line-height:30px;
    	min-height:30px
    }
    .t-s img{
    	max-width:100%
    }
    .t-s.active{
    	background-color:#90cd00
    }
    .t-s::before{
    	position:absolute;
    	left:8px;
    	padding-left:4px;
    	line-height:25px;
    	background:rgba(255,255,255,0);
    	content:attr(num);
    	vertical-align:middle;
    	-webkit-transition:opacity 0.3s ease
    }
    .t-s.active:after{
    	display:block;
    	opacity:1
    }
    .t-c{
    	padding:5px;
    	font-size:1em;
    	text-align:center;
    	margin:10px auto
    }
    #picti{
    	max-height:100px;
    	max-width:90%;
    	margin:10px auto;
    }
    .result{
    	width:100%;
    	text-align:center;
    	margin:0 auto 120px;
    	display:none
    }
    .auto-div{
    	width:85%;
    	margin:100px auto 10px;
    	padding:5px;
    	background-color:#90CD00;
    	border-radius:20px
    }
    .start-auto{
    	background-color:#ff6552;
    }
    
    .div-inner{
    	margin:0 auto;
    	padding:20px;
    	border:5px dotted #fff;
    	border-radius:20px
    }
    .circle{
    	width:16px;
    	height:16px;
    	border-radius:8px;
    	background-color:#fff;
    	margin:0 auto;
    	position:relative;
    	top:-30px
    }
    .result-title{
    	font-size:24px;
    	margin-top:-10px;
    	color:#ff1e0c
    }
    .result-desc{
    	text-align:left;
    	font-size:16px;
    	color:#fff;
    	margin:10px auto;
    	text-indent:32px;
    	text-shadow:1px 1px 0 #999;
    	line-height:22px
    }
    #share-tip{
    	position:fixed;
    	right:5px;
    	top:0;
    	width:80%;
    	z-index:1000;
    	display:none;
    }
    .result-bnt{
    	position:fixed;
    	bottom:0;
    	left:0;
    	width:100%;
    	background-color:#ff4e00;
    	height:50px;
    	display:none
    }
    .share-btn{
    	padding:5px;
    	background-color:#90cd00;
    	width:80%;
    	border-radius:25px;
    	line-height:30px;
    	color:#fff;
    	font-size:18px;
    	margin:5px auto
    }
    #home-desc{
        width:100%;
    	margin: 0 auto;
        text-align: left;
    	color:#fff;
    	line-height:1.4;
    }
    .start-btn{
        width:70%;
        padding: 10px;
        margin: 50px auto 80px;
        background-color: #90cd00;
        color: #fff;
        font-size: 24px;
        border-radius:35px;
       	box-shadow:0 7px 0 0 #6d872e ;
    
    }
    .start-img{
    	width:70%;
    	margin: 50px auto;
    }
    
        
    @CHARSET "UTF-8";
            #progress-lable{
                position: relative;
                width:90%;
                left:5%;
                text-align:left ;
                margin-top: 20px;
                font-size: 10px;
            }
            .progress{
                width:90%;
                height:20px ;
                margin-top:5px;
                margin-left:  auto;
                margin-right:  auto;
                background: #ff6552;
            }
            #precent{
                background: #90cd00;
                width: 10%;
                height: 100%;
            }
            
            .question-only{
            	text-align: left;
                width:90%;
                margin: 20px auto;
            } 
            .question-pic{
            	
            	width:90%;
            	margin: 15px auto;
                text-align:left ;
            }
    </style>

    <style>
        body{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAIAAAC0tAIdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTI4RTA2MEU1QTk0MTFFNDkzRUNBMjhDNzkyMjI0NkEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTI4RTA2MEY1QTk0MTFFNDkzRUNBMjhDNzkyMjI0NkEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MjhFMDYwQzVBOTQxMUU0OTNFQ0EyOEM3OTIyMjQ2QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MjhFMDYwRDVB.........完整代码请登录后点击上方下载按钮下载查看