很简单的一个登陆界面:
代码：
<html>
<head>
<style type="text/css">
form span {
display: block;
font-size: 1em;
color: #787878;
padding-bottom: 5px;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
}
body{
background-color: #86B4CC;
}
.main{
margin: 7em auto 0;
width: 30%;
position: relative;
}
.user{
text-align: right;
margin-right: 5.2em;
}
.login{
background-color: #fff;
position: relative;
padding: 2em 2em;
}
form span{
display: block;
color: #787878;
padding-bottom: 5px;
font-weight: 600;
font-family: 'Open Sans', sans-serif; }
input[type="text"],input[type="Password"]{
padding:9px;
width: 90%;
border:2px solid #609EC3;
margin-left: 5px;
}
.sign{
padding: 10px 0;
}
.submit{
padding: 2px 2px;
float: left;
margin-right: 11px;
}
.forget-pass{
float: right;
}
.submit input[type="submit"]{
background: #F06B37;
border:none;
padding: 0.55em 1.3em 0.6em;
cursor: pointer;
color: #FFF;
border-radius: 1.3em;
} </style>
</head>
<body>
<div class="main">
<div class="user">
<img src="user.png">
</div>
<div class="login">
<div class="inset">
<form>
<div>
<span>
<label>Username</label>
</span>
<span>
<input type="text" class="textbox" id="active">
</span>
</div>
<div>
<span>
<label>Password</label>
</span>
<span>
<input type="password" class="textbox" id="active">
</span>
</div>
<div class="sign">
<div class="submit">
<input type="submit" value="LOGIN">
</div>
<div class="forget-pass">
<a href="#">Forget Password</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
如果加上<!DOCTYPE html>
什么代码都没有改，就是加上了<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
form span {
display: block;
font-size: 1em;
color: #787878;
padding-bottom: 5px;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
}
body{
background-color: #86B4CC;
}
.main{
margin: 7em auto 0;
width: 30%;
position: relative;
}
.user{
text-align: right;
margin-right: 5.2em;
}
.login{
background-color: #fff;
position: relative;
padding: 2em 2em;
}
form span{
display: block;
color: #787878;
padding-bottom: 5px;
font-weight: 600;
font-family: 'Open Sans', sans-serif; }
input[type="text"],input[type="Password"]{
padding:9px;
width: 90%;
border:2px solid #609EC3;
margin-left: 5px;
}
.sign{
padding: 10px 0;
}
.submit{
padding: 2px 2px;
float: left;
margin-right: 11px;
}
.forget-pass{
float: right;
}
.submit input[type="submit"]{
background: #F06B37;
border:none;
padding: 0.55em 1.3em 0.6em;
cursor: pointer;
color: #FFF;
border-radius: 1.3em;
} </style>
</head>
<body>
<div class="main">
<div class="user">
<img src="user.png">
</div>
<div class="login">
<div class="inset">
<form>
<div>
<span>
<label>Username</label>
</span>
<span>
<input type="text" class="textbox" id="active">
</span>
</div>
<div>
<span>
<label>Password</label>
</span>
<span>
<input type="password" class="textbox" id="active">
</span>
</div>
<div class="sign">
<div class="submit">
<input type="submit" value="LOGIN">
</div>
<div class="forget-pass">
<a href="#">Forget Password</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>