表单小练习

百度注册：

代码：

 <div class="box">
        <form action="1.html" method="post">
            <div class="form-item clearfix">
                <div class="title">
                    <label for="username">用户名</label>
                </div>
                <div class="inp">
                    <input type="text" name="username" id="username" placeholder="请设置用户名" />
                </div>
            </div>
            <div class="form-item clearfix">
                <div class="title">
                    <label for="number">手机号</label>
                </div>
                <div class="inp">
                    <input type="text" name="number" id="number" placeholder="可用于登录和找回密码" />
                </div>
            </div>
            <div class="form-item clearfix">
                <div class="title">
                    <label for="checkcode">验证码</label>
                </div>
                <div class="inp">
                    <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码" />
                </div>
            </div>
            <div class="form-item clearfix">
                <div class="title">
                    <label for="password">密码</label>
                </div>
                <div class="inp">
                    <input type="password" name="password" id="password" placeholder="请设置密码" />
                </div>
            </div>
            <div class="form-item clearfix read-content">
                <div class="title">
                </div>
                <div class="inp">
                    <input type="checkbox" name="read" class="read-inp" />
                    <span>
                        阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
                    </span>
                </div>
            </div>
            <div class="form-item clearfix">
                <div class="title">
                </div>
                <div class="inp">
                    <input type="submit" value="注册" class="register-btn"/>
                </div>
            </div>
        </form>
    </div>

样式：

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix:after{
            clear: both;
            display: block;
            content: '';
        }
        .clearfix{
            zoom: 1;
        }
        .box{
            width: 440px;
        }
        .box form{
            width: 100%;
        }
        .form-item{
            margin-bottom: 22px;
        }
        .form-item .title{
            float: left;
            width: 78px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #666;
            text-align: right;
        }
        .form-item .inp{
            float: right;
            width: 350px;
            height: 40px;
        }
        .form-item .inp input{
            width: 100%;
            height: 100%;
            padding-left: 10px;
            color: #757575;
            font-size: 14px;
        }
        .form-item .inp input.read-inp{
            width: 10px;
            height: 10px;
            padding: 0;
        }
        .read-content .title{
            height: 15px;
        }
        .read-content .inp {
            height: 15px;
            color: #666;
            font-size: 12px;
        }
            .read-content a{
                color: #1b66c7;
                text-decoration: none;
        }
        .box .form-item .inp .register-btn{
            width: 350px;
            height: 50px;
            background: #3f89ec;
            font-size: 16px;
            color: #fff;
            border: none;
        }
    </style>

效果图：

注册.jpg