pure css做的手机页面
2024-08-29 06:39:42
<!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>
最新文章
- 你必须收藏的Github技巧
- [深度优先搜索] POJ 1426 Find The Multiple
- Junit4常用注解
- 静态资源[org.springframework.web.servlet.PageNotFound]
- panguan(判官)：一个自研的任务执行引擎的工程实践
- Microsoft Dynamics CRM 2011的组织服务中的RetrieveMultiple方法（转）
- springmvc问题汇总
- scp的使用
- C# 总结const、 readonly、 static三者区别：
- js获得时间new Date()整理
- 软件License认证方案的设计思路
- React native 无法弹出调试控件的问题
- SKCTF Writeup
- HBase RegionServer Splitting 流程
- Ubuntu16安装wine(转)
- DOM节点的基础操作
- dex内存提取
- 移动端 vconsole 的使用
- 对HashMap的理解（二）：高并发下的HashMap
- warning LNK4099: PDB 原因及解决方案