版权声明：本站所提供的文章资讯、软件资源、素材源码等内容均为本作者提供、网友推荐、互联网整理而来（部分报媒/平媒内容转载自网络合作媒体），仅供学习参考，如有侵犯您的版权，请联系我，本作者将在三个工作日内改正。 https://blog.csdn.net/weixin_42323802/article/details/82772469
使用CSS完成用户注册页面；
做成这样一个页面；
①设置body的background-image背景图【该背景图是全铺方式，个别网页注册采用指定位置background-position定位背景图在真个页面的位置】；
②分成一个div,分装left ，mid，right 这三部分，mid中使用一个div来装table（以便于调节table在页面的布局或者定位） ，
最外部div水平居中margin: auto，(margin-top自定义设置，可以在margin: auto中指定)边框width 宽度7-9px最佳，颜色color自定义；
【或者使用框架标签frameset 来布局整个页面的框架，Ps;使用框架标签需要去掉body，不然没有效果】
③分析table表单；
1，首先定义<form ></form> 标签；
2，把table划分为；2列n行，通过colspan等操作，在创建表单时候给每个<td></td>列标签定义class属性，
t-left和t-right，以便后期指定margin-left 的距离再添加时候麻烦；
3，head标签中设置css样式，先把表单border调出来，把整个表单位置定好（也就一个位置margin-top视距离定义即可。）
③针对left，mid ，right 分别设置浮动float（right是右浮动）；
说明；本人外部div指定的width：850px; height:400px;
分装left ，mid，right 的这三部分，是按照百分比来分的，分别是25%；47%；25%，（这三部分加起来不是100%，是因为留了3分给它，怕它骄傲）。也可以通过rule来测量规划各部分占得px的多少。
body部分；
<body>
<!--最外层容器-->
<div>
<!--左容器-->
<div class="left">
<p class="first">新用户注册</p>
<p class="third">user register</p>
</div>
<!--中容器 插入表格容器-->
<div class="mid">
<div class="table">
<!--表格容器中的table需要提交表单，使用form-->
<form action="#" name="register" method="get">
<!--表格9行2列-->
<table><!--用户名，密码，邮箱姓名，手机号，性别，生日，验证码，提交-->
<tr><!--第一行-->
<td class="t-left">
<lable for="username">用户名</lable>
</td>
<td class="t-right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr><!--第2行-->
<td class="t-left">
<lable for="password">密码</lable>
</td>
<td class="t-right"><input type="password" name="password" id="password" placeholder="请输入密码">
</td>
</tr>
<tr><!--第一行-->
<td class="t-left">
<lable for="email">邮箱</lable>
</td>
<td class="t-right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr><!--第一行-->
<td class="t-left">
<lable for="tel">手机号</lable>
</td>
<td class="t-right"><input type="tel" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr><!--第一行-->
<td class="t-left">性别</td>
<td class="t-right">
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<input type="radio" name="gender" value="妖">妖
</td>
</tr>
<tr><!--第一行-->
<td class="t-left">生日</td>
<td class="t-right"><input type="date" name="date"></td>
</tr>
<tr><!--第一行-->
<td class="t-left">
<lable for="CAPTCHA">验证码</lable>
</td>
<td class="t-right">
<input type="text" name="CAPTCHA" placeholder="请输入验证码" class="check">
<span><img src="../img/verify_code.jpg" height="30"/></span>
</td>
</tr>
<tr align="center"><!--第一行-->
<td colspan="2">
<button class="submit">提交表单</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<!--右容器 -->
<div class="right">
<p>已有账号？<a href="#">立即登陆</a></p>
</div>
</div>
</body>head的部分；
<head>
<meta charset="UTF-8">
<title>注册css</title>
<!--分析；在body中设置背景，插入一个table 或者div ，分为三部分，三部分都浮动，按照百分比来分（或者拿尺子测下像素）
左边是p标签，右边是a标签嵌套p标签
中间是注册表单
首先把位置定好在中间位置；margin ;
-->
<style type="text/css">
body {
background-image: url("../img/bg.jpg");
}
/*设置所有元素不会被撑大 ,并且盒子的宽高是边框的宽高 设置margin=0，padding=0*/
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body > div {
/*最外层容器指定大小,边框，水平居中, */
width: 850px;
height: 400px;
background-color: white;
border: gray solid 8px;
margin: 60px auto;
}
/* -------------------------------------------------------- */
/*左浮动*/
.left {
float: left;
width: 25%;
margin-left: 20px;
margin-top: 20px;
}
.first {
font-size: 20px;
color: orange;
}
.left p:last-child {
font-size: 20px;
color: gray;
}
/* -------------------------------------------------------- */
.mid {
font-size: 15px;
float: left;
width: 47%;
}
.table {
margin-top: 25px;
float: left;
}
.t-left {
/*文字靠左边*/
text-align: left;
}
.t-right {
}
/* 表单中的文本框，日期框，密码框使用属性选择器，宽256，高32，行高32，内边距上下6，左右12，
圆角4，边框：1 实线 颜色#a6a6a6，右浮动*/
input[type="text"], input[type="date"], input[type="password"], input[type="email"],
input[type="tel"], input[type="radio"] {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px; /*圆角*/
border: gray solid 1px;
margin-left: 30px; /*指定左边距，调节左边距的距离*/
}
input[type="radio"] {
}
/* -------------------------------------------------------- */
.right {
float: right;
width: 25%;
}
.right p {
font-size: 15px;
padding: 10px 10px 0px 0px;
float: right;
margin-left: 30px;
}
/*验证码*/
.check {
margin-left: 30px;
}
</style>
</head>