注册界面模板HTML+CSS

页面效果：
今天用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;">用户名:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
            <div style="margin-top:5px;">密&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
            <div style="margin-top:5px;">确&nbsp;&nbsp;&nbsp;认:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
            <div style="margin-top:5px;">姓&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
            <div style="margin-top:5px;">邮&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" /></div>
        </div>
        <div style="margin-top:25px;">
        	<button id="btn">提交注冊</button>
        </div>
    </div>
</div>

</body>
</html>
注册界面模板HTML+CSS

猜你喜欢
