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