创建一个表单：个人信息注册页面

利用html里面的表单，写一个个人信息注册表

先上效果图

结构图

分析

一、首先先创建一个表单
css:在表单中加上版心，使得表单在页面中居中，设置边框

<form class="W"></form>

	.w {
            width: 1020px;
            height: auto;
            margin: 0 auto;
            background-color: #fff;
            border: 2px solid rgb(25, 25, 25);
            border-radius: 10px;
        }

二、表单中创建标题和内容

<form class="w">
	<h1 class="head">
        <p>个人资料注册表</p>
    </h1>
	<div class="main">
		......
	</div>
</form>

        .head {
            height: 40px;
            color: #fff;
            text-align: center;
            background-color: rgb(25, 25, 25);            */
        }
        .main {
            margin: 0 auto;
            padding: 20px;
        }

三、设置表单中的内容
由于内容过多，所以只选取一行内容演示
这行中共有四个盒子，最左边的盒子存放符号*，在里面添加红色
第二个盒子存放信息，将盒子转换为块级元素，设置宽和高，使得输入框对齐的作用
第三个盒子存放输入框
第四个盒子提示信息

<div class="main">
            <p><span style="color: red;">*</span>
                <span class="left">验证码：</span>
                <input type="text" class="txt">
                <span class="right">
                    <input type="button" value="获取验证码"></span>
            </p>
        </div> 

结构

接下来直接上表单HTML样式

 <form class="w">
        <h1 class="head">
            <p>个人资料注册表</p>
        </h1>
        <div class="main">
            <p><span style="color: red;">*</span>
                <span class="left">验证码：</span>
                <input type="text" class="txt">
                <span class="right">
                    <input type="button" value="获取验证码"></span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">手机号码：</span>
                <input type="text" class="txt">
                <span class="right">
                    最多十一个字符，例如：13812345678</span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">电子邮箱：</span>
                <input type="text" class="txt">
                <span class="right">
                    此邮箱用来确认你的身份</span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">设置密码：</span>
                <input type="text" class="txt">
                <span class="right">
                    长度为6-20个字符之间</span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">姓名：</span>
                <input type="text" class="txt">
                <span class="right">
                    请输入真实姓名，最多有十个字符</span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">昵称：</span>
                <input type="text" class="txt">
                <span class="right">
                    请输入昵称，最多三十个字符</span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">性别：</span>
                <input type="radio" name="1">男
                <input type="radio" name="1">女
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">喜欢的颜色：</span>
                <select name="" id="">
                    <option value="red">选择</option>
                    <option value="red">红色</option>
                    <option value="red">红色</option>
                    <option value="red">红色</option>
                    <option value="red">红色</option>
                </select>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">固定电话：</span>
                <input type="text" class="txt">
                <span class="right">
                    最多十二个字符</span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">传真：</span>
                <input type="text" class="txt">
                <span class="right">
                    最多十二个字符</span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">地址：</span>
                <input type="text" class="txt">
                <span class="right">
                    请填写真确地址</span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">地址：</span>
                <input type="text" class="txt">
                <span class="right">
                    最多六个字符</span>
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">调查问卷：</span>
                <input type="checkbox">A.日本
                <input type="checkbox">B.日本
                <input type="checkbox">C.日本
                <input type="checkbox">D.日本
                <input type="checkbox">E.日本
                <input type="checkbox">F.其他
            </p>
            <p><span style="color: red;">*</span>
                <span class="left">服务条款：</span>
                <textarea name="" id="" cols="50" rows="10"></textarea>
            </p>
            <p><input type="button" style="width: 400px;height: 50px;background-color: rgb(25, 25, 25);color: white;font-size: 24px;text" value="我接受创建我的用户">
            </p>
        </div> 
    </form>

css样式

这是CSS样式

        body,p,h1 {
            margin: 0;
            padding: 0;
            border: 0;
        }
        .w {
            width: 1020px;
            height: auto;
            margin: 0 auto;
            background-color: #fff;
            border: 2px solid rgb(25, 25, 25);
            border-radius: 10px;
        }
        .head {
            height: 40px;
            color: #fff;
            text-align: center;
            background-color: rgb(25, 25, 25);            */
        }
        .main {
            margin: 0 auto;
            padding: 20px;
        }
        .main p {
            font-size: 22px;
        }
        .main p .left {
            display: inline-block;
            width: 130px;
            height: 24px;
        }
        .main p .txt {
            height: 24px;
            width: 500px;
        }
        .main p .right {
            display: inline-block;
            width: 220px;
            height: 24px;
        }
        .main p .right input {
            width: 100px;
            height: 28px;
        }
        .main p .right{
            font-size: 14px;
        }
        .main p select {
            width: 140px;
            height: 30px;
            background-color: #ccc;
        }