html5 加CSS3 做的一个3G站

来源：互联网发布：智能交通算法工程师编辑：程序博客网时间：2024/04/29 07:44

<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta content="telephone=no" name="format-detection" /><title>SYJ-3G站会员中心</title><link rel="stylesheet" href="css/reset.css"/></head><body><header class="header clearfix">  <p class="etqiuo">12341213</p></header><article class="member">   <p id="inner" class="inner"></p>  </article><footer class="footer mt10"> <p class="etqiuo">12341213</p></footer><script type="text/javascript">    var innerStr="";  function px_to_rem(px,max_px,root_font_size){    if(px>=max_px){document.getElementById("inner").innerHTML=innerStr;return;}  px++;  //换算并保留小数点后3位  var rem=(px/root_font_size).toFixed(3);        innerStr+='<span>'+px+'px'+' = '+rem+'rem'+'</span>'  px_to_rem(px,max_px,root_font_size);  }    px_to_rem(0,200,12);</script></body></html>

/*css reset*/html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,time,mark, audio, video,input,button{margin:0;padding:0;border:none;outline:0;font-size:100%;vertical-align:baseline;background:transparent; font-family: "微软雅黑"}body{line-height:1.5;color:#555555;background: #f2f2f2;}article, aside, dialog, figure, footer, header,hgroup, nav, section {display:block;}ul,ol{list-style:none;}i,em{font-style:normal;}blockquote, q {quotes:none;}blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}table {border-collapse:collapse; border-spacing:0;}input, select {vertical-align:middle;}a{text-decoration:none;}em{font-style:normal;}body{background:#f2f2f2;}input[type="text"]{-webkit-appearance:none;background:none;}input[type="submit"]{-webkit-appearance:none;}input[type="checkbox"]{border:1px solid #ccc;border-radius:0;}input[type="password"]{-webkit-appearance:none;}input[type="tel"]{-webkit-appearance:none;background:none;}input[type="tel"]{-webkit-appearance:none;background:none;}body{font-family:微软雅黑,Helvetica,Arial,sans-serif;}td,th{vertical-align:middle;}.clearfix:after{clear:both;height:0;font-size:0;display:block;content:"";visibility:hidden;}.clear{clear: both;}/*reset end*//*basic start*/@media screen and (min-width:240px){html,body{font-size:10px;}}@media screen and (min-width:320px){html,body{font-size:12px;}}@media screen and (min-width:480px){html,body{font-size:14px;}}@media screen and (min-width:560px){html,body{font-size:16px;}}@media screen and (min-width:640px){html,body{font-size:18px;}}@media screen and (min-width:720px){html,body{font-size:20px;}}@media screen and (min-width:800px){html,body{font-size:22px;}}@media screen and (min-width:1024px){html,body{font-size:24px;}}.etqiuo{ display: block; background: #666; height:1.25rem; line-height: 1.25rem; color:#fff;}.inner{line-height:28px;font-size:14px;padding:50px;}.inner span{border-bottom:1px solid #e3e3e3;display:block;}

0 0