<!doctype html>

 <html>

 <head>

 <meta http-equiv="Content-type" content="text/html; charset=utf-8">

 <!--缩放比例以及允许缩放-->

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

 <!--格式的检测，电话，邮箱-->

 <meta name="format-detection" content="telephone=no, email=no" />

 <!--是否显示苹果工具栏和菜单栏-->

 <meta name="apple-mobile-web-app-capable" content="yes" />

 <!--状态栏样式-->

 <meta name="apple-mobile-web-app-status-bar-style" content="black" />

 <title>手机app-登陆</title>

 <!--[if lte IE 8]>

     <link rel="stylesheet" type="text/css" href="pure0.6.0/grids-responsive-old-ie-min.css">

 <![endif]-->

 <!--[if gt IE 8]><!-->

 <link rel="stylesheet" type="text/css" href="pure0.6.0/pure-min.css">

 <!--<![endif]-->

 <style>

 html, button, input, select, textarea, .pure-g [class *= "pure-u"], .pure-g-r [class *= "pure-u"] {

     font-family: 'Microsoft Yahei', "微软雅黑", arial, "宋体", sans-serif;

 }

 .header {

     background-color: #00ccff;

     height: 2em;

     text-align: center;

     padding-top: 1em;

     color: #ffffff;

     font-weight: bold;

     font-size: 18px;

 }

 .footer-head {

     padding-top: 1.2em;

     padding-bottom: 1.2em;

     border-top: 1px solid #cccccc;

     margin-top: 1em;

 }

 .footer-head a {

     text-decoration: none;

     text-align: center;

     font-size: 14px;

     color: #bbbbbb;

 }

 .footer {

     border-top: 1px solid #cccccc;

     text-align: center;

     background-color: #eeeeee;

     padding-top: 1.2em;

     padding-bottom: 1.2em;

     font-size: 12px;

     color: #999999;

     width: inherit;

 }

 .ValidateCode{  margin:0.1em; margin-left:1em; }

 .ValidateCode img{ }

 .pure-f-r {

     float: right;

 }

 .pure-f-l {

     float: left;

 }

 .link {

 }

 .link a {

     color: #999999;

     text-decoration: none;

 }

 </style>

 </head>

 <body>

 <div class="pure-g">

   <div class="pure-u-1">

     <div class="header">登陆</div>

   </div>

   <div class="pure-u-1"></div>

   <div class="pure-u-1-6"></div>

   <div class="pure-u-2-3">

     <form class="pure-form pure-g main">

       <fieldset class="pure-group pure-u-1">

         <input type="text" class="pure-input-1-1 pure-u-1" placeholder="Username">

         <input type="text" class="pure-input-1-1 pure-u-1" placeholder="Password">

       </fieldset>

       <div class="pure-u-1-2">

         <input type="text" class="pure-u-1" placeholder="验证码">

       </div>

       <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>

       <button type="submit" class="pure-button pure-u-1 pure-button-primary" style="margin-top:0.5em;">登陆</button>

       <div class="pure-u-1" style="padding-top:1em;">

         <div class="pure-g">

           <div class="pure-u-1-2">

             <div class="link pure-f-l"><a href="/">免费注册</a></div>

           </div>

           <div class="pure-u-1-2">

             <div class="link pure-f-r"><a href="/">找回密码</a></div>

           </div>

         </div>

       </div>

     </form>

   </div>

   <div class="pure-u-1-6"></div>

   <div class="pure-u-1">

     <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>

   </div>

   <div class="pure-u-1">

     <div class="footer">Copyright 2011 - 2020  All Rights Reserved. 版权所有：1111</div>

   </div>

 </div>

 </body>

 </html>

pure css做的手机页面的更多相关文章

  1. pure css做的pc登陆界面

    源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. CSS：手机页面，常用字号和布局（工作中用）

    {literal}   {/literal} 公用css .cOrange,.cOrange:visited,.cOrange > a {color: #ff7200;} .border1-to ...

  3. 使用fiddler4做代理调试手机页面

    由于一般手机不能改host,手机页面如果涉及到各个域名ip的混合使用,在手机上调试看效果非常麻烦. 使用fiddler4做代理,手机跟电脑连到同一个局域网,手机上网通过电脑做个代理上网,那么一切请求就 ...

  4. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  5. SharePoint之使用Jquery Mobile定制自己的手机页面

    最近一直很忙,既要创业,又要工作,还有弄弄自己的小项目(已暂停,http://www.codelove1314.com/,如果你不愿意浪费你的业余时间,喜欢弄点小东西,请联系我),所以虽然有很多东西分 ...

  6. Pure CSS 的网格布局（比bootstrap小很多且易扩展的css UI）

    (转自百度经验)http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html Pure是一个简单.实用的CSS框架,鉴于目前网上对pur ...

  7. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  8. Pure.css网格系统学习心得——图片的响应式以及应用填充和边框网格单位的学习

    今天学习了pure.css可定制的网格系统,pure默认的网格系统是移动先行,如果我们想在小屏幕上有网格只要用pure-u-*就可以了,下面来说一下它的主要用法! <div class=&quo ...

  9. JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...

随机推荐

  1. 按模板导出Excel

    说明:开发环境 vs2012 asp.net mvc4 c# 注意:Excel模板有多个sheet页,导出Excel的时候,同时给多个sheet页填充数据 1.项目结构 3.Excel模板(注意she ...

  2. Cauchy sequence Hilbert space 希尔波特空间的柯西序列

    http://mathworld.wolfram.com/HilbertSpace.html A Hilbert space is a vector space  with an inner prod ...

  3. SecureCRT 会话设置项

    登陆动作------自动登陆仿真------两个颜色复选框都勾上模式------光标键模式(2个复选框)映射键------使用windows复制和粘贴热键外观------字符编码:UTF-8外观--- ...

  4. distributed OSGI demo

    今天继续<OSGi原理与最佳实践>.看到第四章.做 HelloWorld-cxf 的样例 照着样例敲来着,整个样例敲完了,执行.一直报错, ----------------这里是解决方法- ...

  5. 在JDK 6和JDK 7的substring()方法的区别？

    原文链接:https://www.programcreek.com/2013/09/the-substring-method-in-jdk-6-and-jdk-7/ 在JDK 6和JDK 7中subs ...

  6. python日期格式化符号

    python中时间日期格式化符号: %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01-12) %d 月内中的一天(0-31) %H 24小时制小时数( ...

  7. Ubuntu 更新/安装nodejs

    nvm nvm是一个开源的Node版本管理器,通过简单的bash脚本来管理.切换多个Node.js版本.和nvm提供类似功能的还有tj写的n,它们的功能大同小异,整体来说nvm要稍强大一下.值得注意的 ...

  8. 标准兼容HTML5输入框提示信息的插件iHolder_v0.1.06.21.2014_预览版

    由于版面限制,简单说下,详细的内容及在线预览.预览版压缩包,见这里http://levi.cg.am/archives/3507 为什么说是标准兼容: 因为大多数placeholder插件是这样兼容的 ...

  9. MySQL如何计算动销率_20161025

    动销率一般反映在采购管理上,它的公式为:商品动销率=(动销品种数 /仓库总品种数)*100% . 也可以理解为销售的商品数量和仓库库存的商品数量,假如你仓库里有100个品种,在上月销售了50种,动销率 ...

  10. 「JLOI2011」「LuoguP4568」飞行路线（分层图最短路

    题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为00到n-1n−1,一共有mm种航线,每种航线连接两个城市,并且 ...