pure css做的手机页面

浏览数：36 / 时间：2015年06月11日

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5 <!--缩放比例以及允许缩放-->
  6 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7 <!--格式的检测，电话，邮箱-->
  8 <meta name="format-detection" content="telephone=no, email=no" />
  9 <!--是否显示苹果工具栏和菜单栏-->
 10 <meta name="apple-mobile-web-app-capable" content="yes" />
 11 <!--状态栏样式-->
 12 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 13 <title>手机app-登陆</title>
 14 <!--[if lte IE 8]>
 15     <link rel="stylesheet" type="text/css" href="pure0.6.0/grids-responsive-old-ie-min.css">
 16 <![endif]-->
 17 <!--[if gt IE 8]><!-->
 18 <link rel="stylesheet" type="text/css" href="pure0.6.0/pure-min.css">
 19 <!--<![endif]-->
 20 <style>
 21 html, button, input, select, textarea, .pure-g [class *= "pure-u"], .pure-g-r [class *= "pure-u"] {
 22     font-family: ‘Microsoft Yahei‘, "微软雅黑", arial, "宋体", sans-serif;
 23 }
 24 .header {
 25     background-color: #00ccff;
 26     height: 2em;
 27     text-align: center;
 28     padding-top: 1em;
 29     color: #ffffff;
 30     font-weight: bold;
 31     font-size: 18px;
 32 }
 33 .footer-head {
 34     padding-top: 1.2em;
 35     padding-bottom: 1.2em;
 36     border-top: 1px solid #cccccc;
 37     margin-top: 1em;
 38 }
 39 .footer-head a {
 40     text-decoration: none;
 41     text-align: center;
 42     font-size: 14px;
 43     color: #bbbbbb;
 44 }
 45 .footer {
 46     border-top: 1px solid #cccccc;
 47     text-align: center;
 48     background-color: #eeeeee;
 49     padding-top: 1.2em;
 50     padding-bottom: 1.2em;
 51     font-size: 12px;
 52     color: #999999;
 53     width: inherit;
 54 }
 55 .ValidateCode{  margin:0.1em; margin-left:1em; }
 56 .ValidateCode img{ }
 57 .pure-f-r {
 58     float: right;
 59 }
 60 .pure-f-l {
 61     float: left;
 62 }
 63 .link {
 64 }
 65 .link a {
 66     color: #999999;
 67     text-decoration: none;
 68 }
 69 </style>
 70 </head>
 71 <body>
 72 <div class="pure-g">
 73   <div class="pure-u-1">
 74     <div class="header">登陆</div>
 75   </div>
 76   <div class="pure-u-1"></div>
 77   <div class="pure-u-1-6"></div>
 78   <div class="pure-u-2-3">
 79     <form class="pure-form pure-g main">
 80       <fieldset class="pure-group pure-u-1">
 81         <input type="text" class="pure-input-1-1 pure-u-1" placeholder="Username">
 82         <input type="text" class="pure-input-1-1 pure-u-1" placeholder="Password">
 83       </fieldset>
 84       <div class="pure-u-1-2">
 85         <input type="text" class="pure-u-1" placeholder="验证码">
 86       </div>
 87       <div class="pure-u-1-2"> <div class="pure-u-1 ValidateCode"><img src="ValidateCode.png" style="margin:0 auto;" class="pure-input-1-1"/></div></div>
 88       <button type="submit" class="pure-button pure-u-1 pure-button-primary" style="margin-top:0.5em;">登陆</button>
 89       <div class="pure-u-1" style="padding-top:1em;">
 90         <div class="pure-g">
 91           <div class="pure-u-1-2">
 92             <div class="link pure-f-l"><a href="/">免费注册</a></div>
 93           </div>
 94           <div class="pure-u-1-2">
 95             <div class="link pure-f-r"><a href="/">找回密码</a></div>
 96           </div>
 97         </div>
 98       </div>
 99     </form>
100   </div>
101   <div class="pure-u-1-6"></div>
102   <div class="pure-u-1">
103     <div class="footer-head pure-g"> <a href="/" class="pure-u-1-4">登陆</a> <a href="/" class="pure-u-1-4">注册</a> <a href="/" class="pure-u-1-4">反馈</a> <a href="/" class="pure-u-1-4">回到顶部</a> </div>
104   </div>
105   
106   <div class="pure-u-1">
107     <div class="footer">Copyright 2011 - 2020  All Rights Reserved. 版权所有：1111</div>
108   </div>
109 </div>
110 </body>
111 </html>