你的位置:首页 > 网页设计

[网页设计]pure css做的手机页面


 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="http://www.cnblogs.com//">免费注册</a></div> 93      </div> 94      <div class="pure-u-1-2"> 95       <div class="link pure-f-r"><a href="http://www.cnblogs.com//">找回密码</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="http://www.cnblogs.com//" class="pure-u-1-4">登陆</a> <a href="http://www.cnblogs.com//" class="pure-u-1-4">注册</a> <a href="http://www.cnblogs.com//" class="pure-u-1-4">反馈</a> <a href="http://www.cnblogs.com//" 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>