<!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. JSP中的内容布局

    参考 :https://stackoverflow.com/questions/10529963/what-is-the-best-way-to-create-jsp-layout-template ...

  2. Android Weekly Notes Issue #257

    Android Weekly Issue #257 May 14th, 2017 Android Weekly Issue #257 本期内容包括: Gradle中关于项目的一些设置; Android ...

  3. js中得~~是什么意思/JS按位非(~)运算符与~~运算符的理解分析

    其实是一种利用符号进行的类型转换,转换成数字类型 ~~true == 1 ~~false == 0 ~~"" == 0 ~~[] == 0 ~~undefined ==0 ~~!u ...

  4. matlab的代码注释

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

  5. 分享知识-快乐自己：Oracle 创建序列 及 使用序列

    1.创建序列语法: create sequence 序列名 [可选参数] 序列名常定义为‘seq_XXX’的形式,创建序列不能使用replace 可选参数说明: increment by: 序列每次增 ...

  6. 勤于思考：jQuery Validation 在IE7（兼容模式）下出现“找不到成员”的脚本错误

    今天在调试IE10下使用IE6判断脚本出现错误,处理后说IE7也不行,调试后则会出现以下错误: SCRIPT3: 找不到成员. jquery171.js, 行2582 字符4 其实开始我认为是jque ...

  7. properties文件的解析

    此文章是从网上看到一篇实用小文章,感觉不过,摘录下来的!如有问题,可及时联系,可立刻做相应处理! Java读取.properties 配置文件的几种方法 在做java工程时, 经常会将一些配置信息放到 ...

  8. BZOJ-4819: 新生舞会(01分数规划+费用流)

    Description 学校组织了一次新生舞会,Cathy作为经验丰富的老学姐,负责为同学们安排舞伴.有n个男生和n个女生参加舞会 买一个男生和一个女生一起跳舞,互为舞伴.Cathy收集了这些同学之间 ...

  9. MySQL left join 20161024

    公司OA系统上部门上线了一套流程,总部和分公司部门提数据需求都要走线上流程,审批,想想也是不错的,能和绩效更加合理的挂钩,还有打分评价,双向互动. 下午接到一个需求,查看某分公司上周订单使用优惠券情况 ...

  10. python爬虫知识点总结（六）BeautifulSoup库详解

    官方学习文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 一.什么时BeautifulSoup? 答:灵活又方便的网页解析库,处 ...