注册页制作

主要知识点：表单&对齐技巧

HTML结构

    <!-- 注册页 -->
    <div class="w header">
        <a href="./index.html" target="_blank"><img src="./images/logo.png" ></a>
    </div>
    <div class="w registerarea">
        <div class="hd">
            <div class="left">注册新用户</div>
            <div class="right">我有账号，去<a class="red">登录</a></div>
        </div>
        <div class="bd">
            <li><label>手机号：</label><input type="tel"> <span class="error"><img src="./images/error.png" > 手机号码格式不正确，请重新输入</span></li>
            <li><label>短信验证码：</label><input type="text"></li>
            <li><label>登录密码：</label><input type="password"> <span class="error"><img src="./images/error.png" > 密码不少于6位数，请重新输入</span></li>
            <li class="safe">安全程度 <em class="little">弱</em><em class="middle">中</em><em class="strong">强</em></li>
            <li><label>确认密码：</label><input type="password"> <span class="error"><img src="./images/error.png" > 密码不一致，请重新输入</span></li>
            <li class="agree"><input type="checkbox" checked="checked"> 同意协议并注册 <a>《用户协议》</a></li>
            <li class="succeed"><input type="submit" value="完成注册"></li>
        </div>
    </div>
    <div class="w footer">

思路复盘：

1.整个注册页面主要分成三大块：标头、注册区、底部（因为头和尾之前其实都写过类似的，这次就主要讲注册区）

2.整个注册区大部分是用li来布局的，每个li里含有一个label（扩大触发面积），input表单和.error的错误提示信息

3.label里的文字长度是不一样的，要实现整齐的布局的话，可以采用给label盒子一个固定的宽，然后让label里的文字右对齐

CSS代码

.registerarea {
    height: 463px;
    margin-top: 20px;
}

.registerarea .hd {
    margin-bottom: 55px;
    height: 43px;
    background-color: #ececec;
    line-height: 43px;
    font-size: 18px;
}

.registerarea .hd .left {
    float: left;
    padding-left: 10px;
}

.registerarea .hd .right {
    float: right;
    padding-right: 10px;
}

.registerarea .bd {
    margin: 50px auto 0;
    width: 600px;
}

.registerarea .bd li {
    height: 60px;
}

.registerarea .bd li label {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-size: 14px;
}

.registerarea .bd li input {
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}

.registerarea .bd li .error {
    margin-left: 10px;
    color: #df3033;
}

.registerarea .bd .safe {
    height: 30px;
    margin-left: 177px;
    color: #b2b2b2;
}

.registerarea .bd .safe em {
    padding: 0px 10px;
    margin-right: 3px;
    color: #fff;
    font-weight: 700;
}

.registerarea .bd .safe .little {
    margin-left: 10px;
    background-color: #de1111;
}

.registerarea .bd .safe .middle {
    background-color: #40b83f;
}

.registerarea .bd .safe .strong {
    background-color: #f79100;
}

.registerarea .bd .agree,
.succeed {
    margin-left: 100px;
}

.registerarea .bd .agree input {
    vertical-align: middle;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    border: 1px solid #666;
}

.registerarea .bd .agree a {
    color: rgb(91, 195, 236);
}

.registerarea .bd .succeed input {
    background-color: #c81623;
    font-size: 14px;
    color: #fff;
}

效果展示

仿京东静态网站制作之注册页