品优购商城——注册页

最新推荐文章于 2023-05-18 21:19:15 发布

风啊风啊你像西刮

最新推荐文章于 2023-05-18 21:19:15 发布

阅读量530

点赞数 1

分类专栏： web前端文章标签： css html

本文链接：https://blog.csdn.net/one_mystery/article/details/120607793

版权

web前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

效果图：

注册页文件 register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>个人注册</title>
    <meta name="description"
          content="品优购商城-专业的综合网上购物商城,销售家电,数码通讯,电脑,家居百货,服装服饰,母婴,图书,食品等数万个品牌优质商品.便捷,诚信的服务,为您提供愉悦的网上购物体验!"/>
    <!--关键字-->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡"/>
    <!--favicon图标制作-->
    <!--引入favicon图标-->
    <link rel="shortcut icon" href="favicon.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="zhu_ce fl">注册新用户</div>
            <div class="deng_lu fr">已有账号,去<a href="#">登录</a></div>
        </h3>
        <div class="reg_form">
            <form action="">
                <ul>
                    <li><label for="">手机号 : </label><input type="text" class="imp"><span class="error"><i class="error_icon"></i>您输入格式不正常,请重新输入</span></li>
                    <li><label for="">短信验证码 : </label><input type="text" class="imp"><span class="success"><i class="error_icon success_icon"></i>格式输入正确</span></li>
                    <li class="deng_mi"><label for="">登录密码 : </label><input type="password" class="imp"><span class="error"><i class="error_icon"></i>您输入格式不正常,请重新输入</span></li>
                    <li class="safe">安全程度: <em class="ruo">弱 </em><em class="zhong">中 </em><em class="qiang">强 </em></li>
                    <li><label for="">确认密码 : </label><input type="password" class="imp"><span class="error"><i class="error_icon"></i>您输入格式不正常,请重新输入</span></li>
                    <li class="agree"><input type="checkbox">
                        同意协议并注册 <a href="#">《知晓用户协议》</a>
                    </li>
                    <li>
                        <input type="submit" value="完成注册" class="btn">
                    </li>
                </ul>
            </form>
        </div>
    </div>
    <!--footer底部模块制作-->
    <footer class="footer">
        <div class="w">
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">联系客服</a>|<a href="#">商家入驻</a>|<a href="#">营销中心</a>|<a
                        href="#">手机品优购</a>|<a href="#">友情链接</a>|<a href="#">销售联盟</a>|<a href="#">品优购社区</a>|<a
                        href="#">品优购公益</a>|<a href="#">English Site</a>|<a href="#">Contact U</a>
                </div>
                <div class="copyright">
                    地址: 北京市昌平区建材城西路金燕龙办公楼一层 邮编: 100096 电话400-618-4000 传真: 010-82935100 邮箱:zhanghj+itcast.cn<br>
                    京ICP备08001421号公网安备110108007702
                </div>
            </div>
        </div>
    </footer>
    <!--底部模块结束-->
</div>
</body>
</html>

注册页专属样式 register.css

/*注册页专属样式*/
.w {
    width: 1200px;
    margin: 0 auto;
}
.fl {
    float: left;
}

.fr {
    float: right;
}
a {
    cursor: pointer;
}
a:hover {
    color: #e33333;
}
/*头部区域开始*/
header {
    height: 84px;
    border-bottom: 2px solid #c81523;
}
.logo {
    padding-top: 18px;
    /*不用margin,防止塌陷*/
}
/*头部区域结束*/
/*主体区域起始*/
.registerarea {
    height: 522px;
    border: 1px solid #ccc;
    margin-top: 20px;
}
.registerarea h3 {
    height: 42px;
    border-bottom: 1px solid #cccccc;
    background-color: #eaecea;
    font-weight: 400;
    padding: 0 15px;
}
.zhu_ce {
    line-height: 42px;
    font-size: 18px;
}
.deng_lu {
    line-height: 42px;
    font-size: 14px;
}
.deng_lu a {
    color: #c81523;
}
.reg_form {
    width: 600px;
    margin: 50px auto 0;
}
.reg_form ul li {
    margin-bottom: 20px;
}
.reg_form ul .deng_mi {
    margin-bottom: 10px;
}
.reg_form ul li label {
    display: inline-block;
    width: 88px;
    text-align: right;
    padding-right: 5px;
}
.reg_form ul li .imp {
    width: 242px;
    height: 37px;
    border: 1px solid #cccccc;
}
.error {
    color: #c81523;
}
.error_icon {
    display: inline-block;
    /*图片水平居中*/
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url("../images/error.png") no-repeat;
    /*margin-top: -4px;*/
    margin: -4px 4px 0;
}
.success {
    color: green;
}
.success_icon {
    background: url("../images/success.png") no-repeat;
}
.safe {
    margin-left: 140px;
}
.safe em {
    padding: 0 12px;
    margin: 0 4px;
    color: #ffffff;
}
.ruo {
    background-color: #de1111;
}
.zhong {
    background-color: #40b83f;
}
.qiang {
    background-color: #f79100;
}
.agree {
    padding-left: 95px;
}
.agree input {
    vertical-align: middle;
    margin-top: -3px;
}
.agree a {
    color: #1ba1e6;
}
.btn {
    width: 200px;
    height: 34px;
    background-color: #c81623;
    font-size: 14px;
    color: #fff;
    margin: 30px 0 0 105px;
    cursor: pointer;
}
/*主体区域结束*/
/*底部模块制作*/
footer {
    margin-top: 20px;
}
.mod_copyright {
    margin-top: 10px;
    text-align: center;
}
.mod_copyright .links a {
    padding: 5px;
}
.copyright {
    margin-top: 10px;
}

初始化base.css样式文件以及图片素材，请见文章品优购首页。

如有不足，欢迎指正。

声明：内容源自B站up“黑马程序员”pink老师。

风啊风啊你像西刮

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
品优购商城——注册页

效果图：注册页文件 register.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>个人注册</title> <me...
复制链接

扫一扫