电商静态网页建设初探1.登录页面2.注册页面

Python攻城狮

发布于 2018-08-23 11:35:22

1.2K0

发布于 2018-08-23 11:35:22

文章被收录于专栏：Python攻城狮Python攻城狮

「web小白」诚心求各位大佬指点!!!

1.登录页面

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>魅力惠登录页面</title>
    
    <link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="style/login.css">

    <script type="text/javascript" href="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" href="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        .text-center{margin-top:-30px}
    </style>



</head>
<body>
    <div class="kj">
        <div class="header">
            <!-- 页头logo -->
            <div>![](images/login/logo.png)</div>
        </div>
        <div class="content">
            <div class="main">
                <div class="register">
                    <h2>免费注册</h2>
                    <span>已注册？<a href="#">登录</a></span>
                </div>
                <div class="login_bar">
                    <ul>
                        <li><span>账户名:</span><input id="user_name" name="user_name" type="text" placeholder="已验证手机号/邮箱"></li>
                        <li><span>密码:</span><input id="password" type="password" name="password"></li>
                    </ul>
                    <div style="clear:both;"></div>
                    <div class="login_btn">
                        <a  id="submitBtn" href="#">会员登录</a>
                    </div>
                </div>
                <div login_login>
                    <input type="checkbox" value="xddl">
                    <span class="dl">下次自动登录</span>
                    <a class="forget" href="#"><span>忘记密码</span></a>
                </div>
                <div class="partner"> 
                  <span class="lm">联名登录：</span>
                  <a href="#" class="weibo">![](images/login/weibo.png)</a>
                  <a href="#" class="zhifubao">![](images/login/zhifubao.png)</a>   
                </div>
                <hr class="xian">
                <div>
                    <div class="erweima">
                        ![](images/login/erweima.jpg)
                        <p>扫描二维码或发送短信
                            <br>
                            “MLH”到“12114”
                            <br>
                            下载APP尊享独家优惠
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页尾 -->
        <div class="footer">
            <ul>
                <li class="login12"><a href="#">![](images/login/7.png)</a></li>
                <li class="login12"><a href="#">![](images/login/8.png)</a></li>
                <li class="login12"><a href="#">![](images/login/9.png)</a></li>
                <li class="login12"><a href="#">![](images/login/10.png)</a></li>
                <li class="login12"><a href="#">![](images/login/11.png)</a></li>
                <li class=""><a href="#">![](images/login/12.png)</a></li>
            </ul>
        </div>
        </div class="footer_copyright">
            <p class="text-center">COPYRIGHT©2016 杭州魅俪信息技术有限公司版权所有     浙ICP备16004860号-1</p>
        </div>
    </div>
</body>
</html>

css

.kj{width:1000px;height:833px;margin: 0 auto;}
          /*页头*/
.login_header{width:1000px;
                height: 66px;
                position: absolute;}

img.center-block.logo{margin-top:30px;}

.content{height: 650px;
        background-image: url(../images/login/1.jpg);}

.main{float:right;width: 350px;height: 400px;margin-top:80px;margin-right: 170px;}

.register{width: 350px;height:50px;padding-bottom: 10px;font-family:"Microsoft Yahei";}

.register h2{font-size: 18px;
            font-weight: bold;
            float: left;
            margin-left:40px;}

.register span{padding:0;margin:0px;letter-spacing: .5px;float: right;margin-left:200px; 
                margin-top: -28px;}

.register span a{color:red;}

.login_bar{width: 350px;font-family:"Microsoft Yahei";}

.login_bar li{list-style: none;margin:10px;}

.login_bar span{float: left;
                width: 75px;
                margin-left: -100px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                text-align: right;
                white-space: nowrap;
                display: inline;}

.login_bar input{
                padding: 15px;
                margin-left: -5px;
                width: 300px;
                padding-left:10px;
                height: 30px;
                border: 1px solid #999;
                line-height: 28px;}

a#submitBtn{display: block;
            background-color: #db2725;
            width: 300px;
            height: 35px;
            font-weight: solid 1px #E0E0E0;
            text-align: center;
            line-height: 35px;
            color: #FFF;
            font-size: 14px;
            margin-left: 46px;}

.login_login{width: 350px;height: 17px;float:left;margin-top:100px;
}
input[type="checkbox"]{display: block;margin-left: 45px;margin-top: 16px;width: 12px;height: 12px;
    float: left;}

span[class="dl"]{float: left;margin-left: 9px;margin-top: 12px;}    

a[class="forget"]{float: left;margin-left: 140px;margin-top: 12px;color:gray;}      

div[class="partner"]{width: 350px;height:17px;}  

span[class="lm"]{float:left;margin-left: -38px;margin-top:12px; }

.weibo{float:left;margin-top:10px;padding-left: 15px;}

.zhifubao{float:left;margin-top:10px;padding-left: 30px;}

.xian{display: block;width: 380px;float: left;margin-top: 20px;margin-left: -70px;}

.erweima{float: left;margin-left: 90px;margin-top: 10px;}

.erweima p{float: right;margin-top:10px;padding: 8px; }
/*页脚*/
.login12{float: left;display: block;margin-left:15px;border-right: 1px #272727 solid;}

.footer ul li{list-style: none;float: left;display: block;margin-top: 25px;}

登录页面

2.注册页面

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>魅力惠注册页面</title>
    
    <link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="style/register.css">

    <script type="text/javascript" href="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" href="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    
    <style>
        .yzm{border:1px solid #999; width: 145px;height: 32px;margin-left: 10px;}
        .dj{display:block;margin-top: 15px;margin-left: 45px;}
    </style>

</head>
<body>
    <div class="kj">
        <div class="header">
            <!-- 页头logo -->
            <div>![](images/login/logo.png)</div>
        </div>
        <div class="content">
            <div class="main">
                <div class="register">
                    <h2>免费注册</h2>
                    <span>已注册？<a href="#">登录</a></span>
                </div>
                <div class="xyh">新客专享 820元现金券礼包</div>
                <div class="login_bar">
                    <ul>
                        <li><span>账户名:</span><input id="user_name" name="user_name" type="text" placeholder="手机号/邮箱"></li>
                        <li><span>密码:</span><input id="password" type="password" name="password" placeholder="请输入6-20个字符"></li>
                        <li><span>确认密码:</span><input id="user_name" name="user_name" type="text"></li>
                        <li><span>验证码:</span><input type="text" class="dx">![](images/login/yzm.jpg)</li>
                        <li><span>短信验证码:</span><input type="text" class="dx"></li>
                        <button type="submit" class="btn btn-default yzm">获取验证码</button>

                    </ul>
                    <div style="clear:both;"></div>
                    <div class="login_btn">
                        <a  id="submitBtn" href="#">立即注册</a>
                    </div>
                </div>
                <div login_login>
                    <span class="dj">点击立即注册即表示同意魅力惠<a href="#">使用条款</a></span>
                    <input type="checkbox" value="xddl">
                    <span class="dl">您将收到魅力惠每日最新上线邮件</span>
                    
                </div>
                <hr class="xian">
                <div>
                    <div class="erweima">
                        ![](images/login/erweima.jpg)
                        <p><span class="fg">扫描二维码或发送短信</span>
                            <br>
                            <span class="fg">&nbsp &nbsp “MLH”到“12114”</span>
                            <br>
                            <span class="fg">下载APP尊享独家优惠</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页尾 -->
        <div class="footer">
            <ul>
                <li class="login12"><a href="#">![](images/login/7.png)</a></li>
                <li class="login12"><a href="#">![](images/login/8.png)</a></li>
                <li class="login12"><a href="#">![](images/login/9.png)</a></li>
                <li class="login12"><a href="#">![](images/login/10.png)</a></li>
                <li class="login12"><a href="#">![](images/login/11.png)</a></li>
                <li class=""><a href="#">![](images/login/12.png)</a></li>
            </ul>
        </div>
        </div class="footer_copyright">
            <p class="text-center">COPYRIGHT©2016 杭州魅俪信息技术有限公司版权所有     浙ICP备16004860号-1</p>
        </div>
    </div>
</body>
</html>

css

.kj{width:1000px;height:833px;margin: 0 auto;}

.login_header{width:1000px;
                height: 66px;
                position: absolute;}

img.center-block.logo{margin-top:30px;}

.content{height: 650px;
        background-image: url(../images/login/1.jpg);}

.main{float:right;width: 350px;height: 485px;margin-top:80px;margin-right: 170px;}

.register{width: 350px;height:50px;padding-bottom: 10px;font-family:"Microsoft Yahei";}

.register h2{font-size: 18px;
            font-weight: bold;
            float: left;
            margin-left:40px;}

.register span{padding:0;margin:0px;letter-spacing: .5px;float: right;margin-left:200px; 
                margin-top: -28px;}

.register span a{color:red;}

.xyh{margin-left: 42px;color: red;}

.login_bar{width: 400px;font-family:"Microsoft Yahei";}

.login_bar li{list-style: none;margin:10px;}

.login_bar span{float: left;
                width: 75px;
                margin-left: -100px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                text-align: right;
                white-space: nowrap;
                display: inline;}

.login_bar input{
                padding: 15px;
                margin-left: -5px;
                width: 300px;
                padding-left:10px;
                height: 30px;
                border: 1px solid #999;
                line-height: 28px;}

.login_bar .dx{float:left;width: 145px;}

            

#submitBtn{display: block;
            background-color: #db2725;
            width: 300px;
            height: 35px;
            font-weight: solid 1px #E0E0E0;
            text-align: center;
            line-height: 35px;
            color: #FFF;
            font-size: 14px;
            margin-left: 46px;}




input[type="checkbox"]{display: block;margin-left: 45px;margin-top: 11px;width: 12px;height: 12px;
    float: left;}
    
.dl{float: left;margin-left: 9px;margin-top: 8px;}  

.xian{display: block;color:black;width: 400px;float: left;margin-top: 20px;margin-left: -50px;}

.erweima{float: left;margin-left: 90px;margin-top: 10px;}

.erweima p{float: right;margin-top:18px;padding: 10px; }

.fg{display: block;margin:-10px 0;}


.login12{float: left;display: block;margin-left:15px;border-right: 1px #272727 solid;}

.footer ul li{list-style: none;float: left;display: block;margin-top: 50px;}

.footer_copyright{float: left;margin-left: 400px;margin-top:0px; }

注册页面

未完待续...

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.07.08 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

电商静态网页建设初探1.登录页面2.注册页面

电商静态网页建设初探1.登录页面2.注册页面

1.登录页面

2.注册页面

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐