电商静态网页建设初探

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

1.登录页面

  • html代码



    
    魅力惠登录页面
    
    
    

    
    
    





    
![](images/login/logo.png)

免费注册

已注册?登录
下次自动登录 忘记密码

![](images/login/erweima.jpg)

扫描二维码或发送短信
“MLH”到“12114”
下载APP尊享独家优惠

COPYRIGHT©2016 杭州魅俪信息技术有限公司版权所有 浙ICP备16004860号-1

  • 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;}

电商静态网页建设初探_第1张图片
登录页面

2.注册页面

  • html代码



    
    魅力惠注册页面
    
    
    

    
    
    
    



    
![](images/login/logo.png)

免费注册

已注册?登录
新客专享 820元现金券礼包
点击立即注册即表示同意魅力惠使用条款 您将收到魅力惠每日最新上线邮件

![](images/login/erweima.jpg)

扫描二维码或发送短信
    “MLH”到“12114”
下载APP尊享独家优惠

COPYRIGHT©2016 杭州魅俪信息技术有限公司版权所有 浙ICP备16004860号-1

  • 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; }

电商静态网页建设初探_第2张图片
注册页面

未完待续...

你可能感兴趣的:(电商静态网页建设初探)