一般的注册页面都是通过表单来统一收集用户信息，方便用户以后的登陆使用，本案例将模仿百度的注册页面，使大家更熟练的掌握如何使用CSS控制表单样式。效果如图。 具体实现步骤如下： a) 定义表单域，并填充大的背景图片。 b) 通过无序列表<ul>来定义页面结构，最外层嵌套大盒子，设置大盒子的宽并居中显示。 c) 定义li左浮动，并设定左侧li的宽高、外边距等样式。 d) 定义验证码所在的行，右侧的li内部嵌套<ul>，设定内部li的高、外边距等样式，并令其左浮动。 e) 通过添加外边距来调整图片的位置。

代码实现如下：

HTML部分：

<div class="register-box">
    <form action="">
        <div class="bg-img"></div>
        <ul>
            <li>
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username">
            </li>
            <li>
                <label for="password">密码:</label>
                <input type="password" id="password" name="password">
            </li>
            <li>
                <label for="confirm-password">确认密码:</label>
                <input type="password" id="confirm-password" name="confirm-password">
            </li>
            <li>
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email">
            </li>
            <li class="code">
                <label for="code">验证码:</label>
                <input type="text" id="code" name="code">
                <ul>
                    <li><img src="code.jpg" alt="验证码"></li>
                    <li><a href="#">换一张</a></li>
                </ul>
            </li>
            <li class="submit">
                <input type="submit" value="注册">
            </li>
        </ul>
    </form>
</div>

CSS部分：

.register-box {
    width: 400px;
    margin: 50px auto;
    position: relative;
}

.bg-img {
    width: 100%;
    height: 400px;
    background-image: url(bg.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

label {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 10px;
}

input[type="text"], input[type="password"], input[type="email"] {
    width: 200px;
    height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 3px;
}

li.code {
    height: 40px;
}

li.code ul {
    float: left;
}

li.code ul li:first-child {
    margin-right: 10px;
}

li.submit {
    text-align: center;
    clear: both;
}

input[type="submit"] {
    width: 80px;
    height: 30px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

a {
    color: #333;
    text-decoration: none;
}