Maison >interface Web >tutoriel HTML >pure css做的手机页面_html/css_WEB-ITnose
pure css做的手机页面_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:44:49879parcourir
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="max-width:90%" class="pure-input-1-1"/ alt="pure css做的手机页面_html/css_WEB-ITnose" ></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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：html之小积累-.-iframe自适应高度_html/css_WEB-ITnoseArticle suivant：【居中系列】大小不固定的图片在固定容器中的水平垂直居中_html/css_WEB-ITnose