html+CSS的QQ注册界面练习

html

"en">

	"UTF-8">
	
	"stylesheet" type="text/css" href="./css/register.css">


	
"left_div">
		"./image/QQregister.png">
	
	
"right_div">
		
"right_center">
			
"text1">欢迎注册QQ
			
"text2">
				
"text_div1">每一天乐在沟通
				
"text_div2">免费靓号
			
			
"input_div">
				"input" type="text" placeholder="昵称" name="username" id="username">
			
			
"input_div">
				"input" type="password" placeholder="密码" name="password" id="password">
			

			
"phone_div">
				"text" name="areaCode"
				id="areaCode"
				value="+86">
				"text" name="phoneNum" id="phoneNum" placeholder="手机号码">
			
			
"info">可通过该手机号找回密码
			
            
"code_div">
                "text" name="verCode" id="verCode" placeholder="验证码">
				"submit" name="codeSubmit" id="codeSubmit" value="发送验证码">
			
			

				"submit" name="submit" id="submit" value="立即注册">
			
		
	

CSS

body{
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	background:url("../image/bj888.png");
}

/* 划分左边区域 */

#left_div{
	position: fixed;
	width: 480px;
	height: 100%;
}
#left_div img{
	width: 480px;
	height: 100%;
}

/* 划分右边区域 */

#right_div{
	margin-left: 480px;
}
#right_center{
	width: 100%;
	padding-top: 120px;
	padding-left: 480px;
}
#right_center input{
	padding-left: 10px;
}

/* 设置文本样式 */
 
#text1{
	font-size: 44px;
	margin-bottom: 30px;
}

#text2 div{
	font-size: 28px;
	display: inline-block;
}

#text_div2{
	color: #359eff;
	margin-left:200px;
	margin-bottom: 30px;
	cursor: pointer;	
}

/* 设置输入样式 */

input{
	border: 1px #aaa solid;
	border-radius: 4px;
	font-size: 20px;
	height: 50px;	
}
.input{
	width: 500px;
}
.input_div{
	margin-top: 30px;
}

/* 设置区域、手机号样式 */
#areaCode{
	width: 120px;
}
#phone_div{
	margin-top: 30px;
}
#phoneNum{
	margin-left: 10px;
	width: 354px;
}
#info{
	font-size: 14px;
	height: 14px;
	color: #999;
	margin-top: 7px;
}

/* 设置验证码、发送验证码样式 */
#verCode{
	width: 120px;
}
#code_div{
	margin-top: 30px;
}
#codeSubmit{
    border: 1px #3083ff solid;
	background-color:#3487ff;
	color: #fff;
	margin-left: 10px;
	width: 364px;
}

#submit{
	width: 510px;
	border: 1px #3083ff solid;
	background-color:#3487ff;
	color: #fff;
	margin-top: 40px;
}

界面展示