pure css做的pc登陆界面

时间:2021-01-09 12:39:49

pure css做的pc登陆界面

源码如下:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登陆页</title>
<link rel="stylesheet" type="text/css" href="admin/css/pure-min0.6.0.css"/>
<style>
body{
background: url(images/bj.png) no-repeat;
font-family: "Microsoft YaHei";
overflow-y:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
form {
margin: 150px auto;
width: 300px;
}
</style>
</head>
<body>
<form class="pure-form pure-g">
<fieldset class="pure-group pure-u-1">
<input type="text" class="pure-input-1" placeholder="用户名">
<input type="text" class="pure-input-1" placeholder="密码">
</fieldset>
<div class="pure-group pure-input-1">
<div class="pure-u-1-2"><img src="data:images/image.jpg" height="40" width="140" /></div>
<div class="pure-u-1-2">
<input type="text" class="pure-input-1" placeholder="密码">
</div>
</div>
<div class="pure-group pure-input-1">
<button type="submit" class="pure-button pure-input-1 pure-button-primary">登录</button>
</div>
</form>
</body>
</html>