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