<!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. 九度OJ 1154：Jungle Roads（丛林路径） （最小生成树）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:832 解决:555 题目描述: The Head Elder of the tropical island of Lagrishan has ...

  2. iOS 打包Framework包含其他Framework的问题

    当你打包一个framework静态库包含另一个第三方静态库时,在工程中使用自己打包的framework,这时编译会出现报错,报错的大概原因是没有找到你打包framework里面的第三方framewor ...

  3. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

  4. P5111 zhtobu3232的线段树

    P5111 zhtobu3232的线段树 维护左子树右子树的贡献和跨区间贡献 #include<bits/stdc++.h> using namespace std; typedef lo ...

  5. struts + hibernate笔记

    1.hibernate: 1) Restrictions.eq  判断是否相等== (场景:一个类A中的属性t,这个属性t是另一个类B中的ID,找出输入为这个属性t的所有类A) tasks = ses ...

  6. loj#2269. 「SDOI2017」切树游戏

    还是loj的机子快啊... 普通的DP不难想到,设F[i][zt]为带上根玩出zt的方案数,G[i][zt]为子树中的方案数,后面是可以用FWT优化的 主要是复习了下动态DP #include< ...

  7. LightOJ - 1151 Snakes and Ladders —— 期望、高斯消元法

    题目链接:https://vjudge.net/problem/LightOJ-1151 1151 - Snakes and Ladders    PDF (English) Statistics F ...

  8. 灰色大气企业html5模板

    灰色大气企业html网页模板是一款以灰色为背景的大气简洁企业html5网站模板. 下载地址:http://www.huiyi8.com/sc/10860.html

  9. kvm初体验之七：attach usb storage device to a VM

    1. virsh attach-disk vm1 /dev/sdb sdc 将host上的/dev/sdb挂载到vm1的/dev/sdc上 2. virsh detach-disk vm1 sdc 将 ...

  10. 分享知识-快乐自己：Hibernate框架常用API详解

    1):Configuration配置对象 Configuration用于加载配置文件. 1): 调用configure()方法,加载src下的hibernate.cfg.xml文件 Configura ...