仿京东登录页面

仿京东登录页面

Posted by lisbeth on April 7, 2019

“学习 !”

我利用自己的业余时间,我模仿京东网站设计了一个简单的登录页面,由于自己学着忘着,特用此博客帮助自己加深记忆,以达到熟练掌握所学知识的目的。

html部分

登 录

css部分:

   *{
       margin:0;
       
       padding:0;
   }
   
    #header{
    
        height:120px;
        
        width:100%;
    }
    
    #header img{
    
        margin-top:15px;
        
        margin-left:18px;
    }
    
    #wrap{
    
        height:500px;
        
        width:100%;
        
        background-image:url(img/2.jpg);
        
        background-size:cover;
        
        position:relative;
    }
    
    #logGet{
    
        height:350px;
        
        width:500px;
        
        background:#fff;
        
        position:absolute;
        
        top:20%;
        
        right:12%;
    }
    
    .title{
        width: 86%;
        
        border-bottom: 1px solid #ee7700;
        
        margin-bottom: 60px;
        
        margin-top: 0;
        
        margin-right: auto;
        
        margin-left: auto;
    }
    
    .title .p1{
    
        display:inline-block;
        
        margin-top:30px;
        
        font-size:28px;
        
        width:86%;
        
        font-family:"宋体";
        
    }
    
   #wrap #logGet .logD {
   
       width: 86%;
       
       position: relative;
       
       margin-bottom: 30px;
       
       margin-top: 30px;
       
       margin-right: auto;
       
       margin-left: auto;
       
   }
   
   #logGet .logD img {
   
       position: absolute;
       
       top: 12px;
       
       left: 8px;
       
       height:20px;
       
       width:20px;
   }
   
   #wrap #logGet .logC {
   
       width: 86%;
       
       margin-top: 0;
       
       margin-right: auto;
       
       margin-bottom: 0;
       
       margin-left: auto;
   }
   
   .logC a button{
   
       width:100%;
       
       height:45px;
       
       background:#e4393c;
       
       color:white;
       
       border:none;
       
       font-size:18px;
   }
   
   #logGet .logD input {
   
       width: 100%;
       
       height: 42px;
       
       text-indent: 2.5rem;
   }

效果页面

效果图