css-9.仿京东注册页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/new_file.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div id="navi">导航</div>
		<div id="header">
			<div class="bg"></div>
			<span class="welcom">欢迎注册</span>
		</div>
		<div id="tabs">tab部分</div>
		<div id="content">
			<div class="bg_position">

				<div class="bg_text">企业用户注册</div>
				<div class="bg"></div>
			</div>
			<div class="line">
				<span class="text"><b>*</b>用户名：</span>
				<span class="ipt">
					<input class="kuang1 user"> </input>
				</span>
				<span class="dsp">4-20位数字和字母组成</span>
			</div>

			<div class="line">
				<span class="text"><b>*</b>密码：</span>
				<span class="ipt">
					<input class="kuang1 pwd" type="password"> </input>
				</span>
				<span class="dsp">4-20位数字和字母组成</span>
			</div>

			<div class="line">
				<span class="text"><b>*</b>密码：</span>
				<span class="ipt">
					<input class="kuang1 pwd" type="password"> </input>
				</span>
				<span class="dsp">4-20位数字和字母组成</span>
			</div>

			<div class="line">
				<span class="text"><b>*</b>密码：</span>
				<span class="ipt">
					<input class="kuang1 pwd" type="password"> </input>
				</span>
				<span class="dsp">4-20位数字和字母组成</span>
			</div>

			<div class="line">
				<span class="text"><b>*</b>短信验证码：</span>
				<span class="ipt">
					<input class="kuang1 yanzhengma"> </input>
				</span>
				<span class="dsp yzm">获取短信验证码</span>
			</div>
			<div class="xieye">
				<span class="text">
					<input type="checkbox"  />
					我已经同意<span class="texieyi">用户注册协议</span>
				</span>
			</div>
			
				<div class="divzhuce">
				<input class="zhuce" type="button" value="立即注册" />
			</div>
		</div>
		<div id="footer">底部</div>
	</body>

</html>

css

	body {
		font-size: 12px;
		color: #666;
		background: #f2f2f2;
		font-family: arial, sans-serif;
	}
	
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#navi {
		width: 100%;
		height: 30px;
		border-bottom: 1px solid #eee;
		background: #fafafa;
		line-height: 30px;
	}
	
	#tabs,
	#header,
	#content,
	#footer {
		width: 990px;
		margin: 0 auto;
		/*居中*/
	}
	
	#tabs {
		height: 33px;
		line-height: 33px;
	}
	
	#header {
		padding: 10px 0;
	}
	
	#header .bg {
		background: url(../img/icon.png);
		width: 150px;
		height: 50px;
		background-repeat: no-repeat;
		float: left;
	}
	
	#header .welcom {
		font-size: 25px;
		border-left: 1px solid #ddd;
		margin-top: 15px;
		float: left;
	}
	
	#tabs {
		clear: both;
	}
	
	#content {
		background: #fff;
		padding-top: 40px;
		padding-bottom: 20px;
		border: 1px solid #ddd;
		border-top: none;
		/*顶部边框没有*/
		height: 400px;
	}
	
	#content .bg {
		background: url(../img/icon.png) no-repeat 770px 0px;
		width: 35px;
		height: 38px;
		background-repeat: no-repeat;
		background-position: 0px -45px;
		float: right;
	}
	
	#content .bg_text {
		margin: 10px;
		float: right;
	}
	
	.line {
		width: 750px;
		height: 60px;
		padding-top: 9px;
	}
	
	.line span {
		float: left;
		/*行内元素不能定宽高，设置这个让他可以设置*/
		height: 34px;
		line-height: 34px;
	}
	
	.text {
		width: 190px;
		/*撑开，距离左边*/
		text-align: right;
		/*位置靠右*/
		font-size: 14px;
		color: #999;
		padding-right: 10px;
	}
	
	.kuang1 {
		width: 238px;
		height: 16px;
		color: #999;
		padding: 10px 25px 10px 5px;
		/*大小撑开了*/
		border: 1px solid #ddd;
		background-position: 238px center;
		/*背景图的位置*/
		background-repeat: no-repeat;
	}
	
	.user {
		background-image: url(../img/head2.png);
		background-size: 25px 25px;
		background-repeat: no-repeat;
	}
	
	.kuang1:focus {
		/*:focus选择器用于选择具有焦点的元素。*/
		border-color: #7abd54;
		/*设置编辑框的颜色*/
		outline: none;
		/*把默认的边框去掉。outline（轮廓）是绘制于元素周围的*/
	}
	.divzhuce input:focus  {
		/*:focus选择器用于选择具有焦点的元素。*/
		border-color: #7abd54;
		/*设置编辑框的颜色*/
		outline: none;
		/*把默认的边框去掉。outline（轮廓）是绘制于元素周围yzm的*/
	}
	.dsp {
		background: #f7f7f7;
		border: 1px solid #ddd;
		width: 238px;
		height: 34px;
		padding: 1px 5px;
		margin-left: 5px;
	}
	
	.text b {
		color: red;
		margin-right: 2px;
	}
	
	.pwd {
		background-image: url(../img/head2.png);
		background-size: 25px 25px;
		background-repeat: no-repeat;
	}
	
	.yanzhengma {
		width: 100px;
	}
	
	.yzm {
		width: 100px;
		color: #ddd;
		text-align: center;
	}
	
	.texieyi {
		color: royalblue;
	}
	
	.xieye {
		width: 200px;
		margin: 0 auto;
	}
	
	.zhuce {
			height: 24px;
		/*输入框高度*/
		width: 200px;
		/*输入框宽度*/
		border: 1px solid #CDC28D;
		/* 输入框表框颜色*/
		background-color: #F2F9FD;
		/* 输入框背景颜色*/
	
		/*输入框里的文字和输入框左边之间的距离*/
		margin-top: 10px;
	}
	.divzhuce {
		margin: 0 auto;
		width: 200px;
	}