页面效果:
今天用html+css写了一份注册界面,话不多说,直接上代码:
<!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>
</head>
<style>
body {
padding:0; /*去除内边距袭*/
border:0; /*去除边框*/
margin:0; /*去除外边距*/
}
#page{
background-image:url("./1.jpg");
height:1000px;
width:auto;
position:relative;
}
#register{
background-image:url("./2.png");
height:318px;
width:400px;
margin-left:500px;
margin-top:250px;
position:absolute;
text-align:center;
}
#header{
font-family:Tahoma, Geneva, sans-serif;
font-size:25px;
color:#3083EF;
}
hr{
height: 2px;
width:300px;
background-color:#75B6F6 ;
}
#xinxi{
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
color:#A3CCFB;
line-height:10px;
}
#btn{
background-color:#0068D0;
border:0px;
color: seashell;
text-align: center;
height:30px;
width:100px;
}
</style>
<body>
<div id="page">
<div id="register">
<p id="header" style="margin-bottom:2px;">用户注册页面</p>
<hr />
<div id="xinxi">
<div style="margin-top:15px;">用户名: <input type="text" /></div>
<div style="margin-top:5px;">密 码: <input type="text" /></div>
<div style="margin-top:5px;">确 认: <input type="text" /></div>
<div style="margin-top:5px;">姓 名: <input type="text" /></div>
<div style="margin-top:5px;">邮 箱: <input type="text" /></div>
</div>
<div style="margin-top:25px;">
<button id="btn">提交注冊</button>
</div>
</div>
</div>
</body>
</html>