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

代码语言: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.act.........完整代码请登录后点击上方下载按钮下载查看

网友评论0