html5 加CSS3 做的一个3G站

<!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;}

html5 加CSS3 做的一个3G站

猜你喜欢