Mobile page made with pure css_html/css_WEB-ITnose-HTML Tutorial-php.cn

Mobile page made with pure css_html/css_WEB-ITnose
WBOY
Release： 2016-06-24 11:44:49
Original
862 people have browsed it
  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>
Copy after login