前端学习之品优购项目(四)——注册页制作

前端学习 专栏收录该内容
6 篇文章 1 订阅

1、布局

  • 头部
  • 底部
  • 中间主体
    头部和底部不再过多赘述,我们主要做一下中间registerarea部分。

在这里插入图片描述
registerarea分为以下两部分:
在这里插入图片描述
上面h3标题模块的做法也不再赘述,我们主要看reg_form模块怎么做。

2、注册页类名命名

在这里插入图片描述

3、reg_form模块制作

①首先reg_form是一个大盒子,包含所有注册内容,在页面水平居中;
②我们观察到reg_form里的内容差不多都是“一条一条”的排列起来,所以不如就用ul和li来做,如下,共有七行,用七个li;
在这里插入图片描述
③先做1、2、3、5行,它们类似,可以这么做:注意到左侧”手机号“等文字是右对齐,它们可以放在label标签里,再把label转换换成行你快元素,设置宽度并进行右对齐;中间为input输入文本框/密码框;后面用span放提示信息(输入正确或错误),提示信息前面的图标可以用i标签(也放在span中),会出现图标和文字不对齐的情况:在这里插入图片描述
只需要对它们来一句:

vertical-align: middle;

这里注意提示信息其实是由js控制的,现在我们就先简单地做个静态的;
④安全程度栏制作,它有单独的样式,所以要给它的li加一个类名,弱中强分别放在三个em中设置背景颜色等样式;
⑤同意模块和完成注册模块的制作,同意模块前面有个复选框,插入之后打开网页会发现它变得很大,那是因为之前我们对所有input设置了宽高,因此之前的文本输入框要设置同一类名。其他步骤不再赘述;
⑥最后要在ul外面套上form标签,以供以后联合js进行注册信息的提交。

源码:

html:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="shortcut icon" href="pig.ico" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/register.css">
</head>

<body>
    <div class="w">
        <header>
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
        </header>
        <div class="registerarea">
            <h3>
                注册新用户
                <div class="login">我有账号,去<a href="#">登陆</a></div>
            </h3>
            <div class="reg_form">
                <form action="">
                    <ul>
                        <li><label for="">手机号:</label><input type="text" class="inp"><span class="error"><i class="error_icon"></i>手机号码格式不正确,请重新输入!</span></li>
                        <li><label for="">短信验证码:</label><input type="text" class="inp"><span class="success"><i class="success_icon"></i>验证码正确</span></li>
                        <li><label for="">登陆密码:</label><input type="password" class="inp"><span class="error"><i class="error_icon"></i>手机号码格式不正确,请重新输入!</span></li>
                        <li class="safe">安全程度:<em class="low"></em> <em class="middle"></em> <em class="high"></em></li>
                        <li><label for="">确认密码:</label><input type="password" class="inp"><span class="error"><i class="error_icon"></i>手机号码格式不正确,请重新输入!</span></li>
                        <li class="agree"><input type="checkbox" name="" id=""> 同意协议并注册 <a href="#">《知晓用户协议》</a>
                        </li>
                        <li>
                            <input type="submit" value="完成注册" class="btn">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
        <!-- footer底部模块 -->
        <footer class="footer">
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </div>
                <div class="copyright">
                    地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </footer>
    </div>
</body>

</html>

css:

.w {
    width: 1200px;
    margin: 0 auto;
}

header {
    height: 85px;
    border-bottom: 2px solid #b1191a;
}

.logo {
    /* display: block;
    position: absolute;
    top: 25px; */
    padding-top: 16px;
    width: 172px;
    height: 61px;
}

.registerarea {
    height: 522px;
    border: 1px solid #cccccc;
    margin-top: 20px;
}

h3 {
    height: 43px;
    background-color: #ececec;
    border-bottom: 1px solid #cccccc;
    font-size: 18px;
    line-height: 43px;
    font-weight: 400;
    color: #333333;
    padding-left: 12px;
}

.login {
    float: right;
    font-size: 14px;
    text-align: center;
    line-height: 43px;
    padding-right: 11px;
}

.login a {
    color: #c81523;
}

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

.reg_form label {
    display: inline-block;
    width: 88px;
    text-align: right;
}

.reg_form ul li .inp {
    width: 242px;
    height: 37px;
    border: 1px solid #cccccc;
}

.reg_form ul li {
    margin-bottom: 20px;
}

.success_icon,
.error_icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    width: 20px;
    height: 20px;
}

.error {
    color: #c81523;
}

.error_icon {
    background: url(../images/error.png) no-repeat;
}

.success {
    color: green;
}

.success_icon {
    background: url(../images/success.png) no-repeat;
}

.safe {
    padding-left: 156px;
}

.safe em {
    padding: 0 12px;
    color: #ffffff;
}

.safe .low {
    background-color: red;
}

.safe .middle {
    background-color: orange;
}

.safe .high {
    background-color: green;
}

.agree {
    padding-left: 95px;
}

.agree input {
    vertical-align: middle;
}

.agree a {
    color: #1ba1e6;
}

.btn {
    width: 200px;
    height: 34px;
    background-color: #c81623;
    font-size: 14px;
    color: #fff;
    margin: 30px 0 0 100px;
}

/* 底部模块制作 */

.mod_copyright {
    text-align: center;
    padding-top: 20px;
}

.links {
    margin-bottom: 15px;
}

.links a {
    margin: 0 3px;
}

.copyright {
    line-height: 20px;
}
  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值