html代码
<!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" href="register.css">
</head>
<body>
<div class="register">
<h1>Sign up</h1>
<form action="register.php" method="post">
<input type="text" placeholder="Please enter your name" name="username" id="username"/>
<input type="email" placeholder="Please enter your email" name="email" id="email"/>
<input type="text" placeholder="Please enter your password" name="password" id="password"/>
<input type="text" placeholder="Please confirm your password" name="repassword" id="repassword"/>
<button class="button" type="submit">Sign up</button>
<p class="change_link" align="center">
<span class="text">Already a member?</span>
<a href="../login/login.html"class="to_login">Go and log in</a>
</form>
</div>
</body>
</html>
css代码
@charset "utf-8";
/* CSS Document */
html{
margin-left:auto;
margin-right:auto;
max-width:500px;
background:#D2E9FF;
padding:20px 20px 20px 20px;
font:12px Arial, Helvetica, sans-serif;
color:#666;
}
.register{
position:absolute;
top: 50%;
left:50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
.register h1{
color:#666;
text-show:0 0 10px;
letter-spacing:1px;
text-align:center;
}
h1{
font-size:2em;
margin:0.67em 0;
}
input{
width:278px;
height:18px;
margin-bottom:10px;
outline:none;
padding:10px;
font-size:13px;
color:#888;
text-shadow:1px 1px 1px;
border-top:1px splid#312E3D
border-left: 1px solid #312E3D;
border-right: 1px solid #312E3D;
border-bottom: 1px solid #56536A;
border-radius:4px;
}
.button{
width:300px;
min-hight:20px;
display:block;
background-color:#66c1e4;
border:1px soild#3762bc;
color:#000;
padding:9px 14px;
font-size:15px;
line-height:normal;
border-radius:5px;
margin:0
}
.to_login{
color:#06F
}
.text{
color:#666;
}
界面展示
