<!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. 一起来学linux：ACL

    传统的 权限设置只有user,group,other三种,并没有办法针对某一个用户或者某一个组来设定权限.ACL就是用于这个目的的 那 ACL 主要可以针对哪些方面来控制权限呢?他主要可以针对几个项目 ...

  2. Latex 4: WinEdt 10试用时间限制的破解+注册码激活

    方法1:我发现这个方法1,现在(2018.06.05)在winedt 10.2上已经不能用了,在低版本(10.1及以下版本)上还可以用,所以如果方法1不行,请看方法2. WinEdt 是目前我发现最好 ...

  3. HttpWebRequest的timeout和ReadWriteTimeout（转载）

    公司[1]一牛人看我的代码,说我设置的timeout有误,还应该设置ReadWriteTimeout.本人很不服,于是上网查看了相关说明. HttpWebRequest httpWebRequest ...

  4. PAT 甲级 1005. Spell It Right (20) 【字符串】

    题目链接 https://www.patest.cn/contests/pat-a-practise/1005 思路 因为 n <= 10^100 所以 要用字符串读入 但是 100 * 100 ...

  5. sqrt源码

    先找出接近m的浮点数,然后通过下面的不等式中的等于条件得到其平方根. #include <iostream> #include <math.h> using namespace ...

  6. C语言“快速排序”函数写法

    代码是:C语言中快速排的写法,要加入头文件   <stdlib.h> qsort(数组名, 长度, 数据类型大小,比较算子 ): #include <stdio.h> #inc ...

  7. matlab的代码注释

    1.注释一块代码: %{ 此处代码块 %} 2.注释数行代码: 先选中,然后用组合键Ctrl+R 取消注释,用组合键Ctrl+T 3.双%%的作用:代码分块运行,点击双%%之间的代码,再点Run Se ...

  8. 通过阿里云域名动态解析 IP 地址

    这两天在家里用树莓派折腾了一个家用服务器,主要用来做 mac 的 Time Machine ,还有就是当做下载机和 nas ,想着平时上班时间家里没人用网络,空着也是空着,就可以利用空闲带宽下个美剧啥 ...

  9. 【HDU 4807】Lunch Time 最小费用最大流

    题意 在一个有向图当中,现在每一条边带有一个容量,现在有K个人在起点,需要到终点去吃饭,询问这K个人最后一个人到达食堂的最小时间是多少 贴一篇题解:http://blog.csdn.net/u0137 ...

  10. Hotel California

    On a dark desert highway行驶在昏黑的荒漠公路上cool wind in my hair凉风吹过我的头发warm smell of colutas温馨的大麻香rising up ...