<!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. Java反射机制简单学习

    java中除了基本数据类型,几乎都为对象.例如 Person p=new Person(); 这句语句表明了p是Person类的一个实例对象.但其实,Person也是一个实例对象,它是Class类的实 ...

  2. Django框架ORM单表删除表记录_模型层

    此方法依赖的表是之前创建的过的一张表 参考链接:https://www.cnblogs.com/apollo1616/p/9840354.html 1.删除方法就是delete(),它运行时立即删除对 ...

  3. freetype下载和配置

    一 下载编译freetype库 1 下载 地址:http://www.freetype.org/ 得到压缩文件:freetype-2.5.3.tar.gz 2 解压: 直接解压,得到文件夹freety ...

  4. 硬分叉后，BCH的钱包解决方案

    上周BCH进行了硬分叉,分叉成了两条链:BCH和BCHSV,对于分叉后的BCH如何进行交易呢?钱包是否有相关的危险因素? 由于分叉后的两条链没做重放保护,可能导致一条链上发起的交易,在另一条链上做重放 ...

  5. JVM--内存区的划分

    转自:http://www.jianshu.com/p/7ebbe102c1ae Java虚拟机在执行Java程序的过程中会把它管理的内存划分为若干个不同的数据区域. java虚拟机运行时数据区 一. ...

  6. Android/iOS Remote debugging

    简单介绍 使用下面方法可以定位webview中的元素,无法定位view中的元素. 原文地址:http://mp.weixin.qq.com/s/y_UfdgjT_pkKgYivJmqt7Q webvi ...

  7. Error setting property values; nested exception is org.springframework.beans.NotWritablePropertyException: Invalid property 'URIType' of bean class

    查阅了资料原始JDK的问题.解决方法 1.重新安装JDK为1.7版本 2.修改配置 1.webx的依赖改为3.1.6版: <dependency> <groupId>com.a ...

  8. Java for LeetCode 102 Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  9. Module.exports和exports的区别

    原文链接: https://www.ycjcl.cc/2017/02/10/module-exportshe-exportsde-qu-bie/ 学习Seajs时,看到了exports.doSomet ...

  10. spawning cl.exe

    可能很多人在安装VC 6.0后有过点击“Compile”或者“Build”后被出现的“Compiling... ,Error spawning cl.exe”错误提示给郁闷过.很多人的选择是重装,实际 ...