How does css+html imitate petal.com to achieve a static landing page? (code example)

The content of this article is to introduce how to imitate petal.com to achieve a static landing page? (code example). There is a certain reference value, friends in need can refer to it, I hope it will be helpful to you.

Thoughts:

Huaban.com (http://huaban.com/)

Analyze the size of the page

Only the approximate size, the size acquisition method, use the screenshot method to obtain the width and height, pay attention to the acquisition process The size of the picture in the picture cannot be changed. Get the size after maximizing the image

Realize

Write an element, and then pay the style with css

html Implementation

    
    
    
    
    


    
        
            
             Log in with a third-party account
                
                     

                         

                         

                         

                         

                         

                     
                    
                
                 Login with mobile phone/email
                
                     
                     
                    
                         Login
                    
                
                
                     forgot password>>
                
                 
                      Don't have a petal account yet?  
                     Click to register>>
                
           
    
    

 

css style

html,body{
     margin: 0;
     padding: 0;
 }

 body {
     background-color: rgb(86, 228, 221);
 }

 .clearn{
     float: none;
 }

 #login-frame{
     width: 600px;
     height: 430px;
     margin: 100px auto 0;
     background-color: #fff;
 }

 #main{
     margin: 20px 90px auto;
 }

 #logo{

     width: 150px;
     height: 135px;
     margin: 85px auto 0;
     background-position: 0;
     background-image: url(img/logo.png);
     background-repeat: no-repeat;
     list-style: none;
 }

 .lable{
     font-size: 14px;
     color: hsla(0, 0%, 63%, 0.932);
     text-align: center;
     position: relative;
     margin: -30px auto;
 }

 .lable::before{
     content: "";
     border-top: #dadada solid 1px;
     position: absolute;
     width: 138px;
     left: 0;
     top: 11px;
 }
 .lable::after{
     content: "";
     border-top: #dadada solid 1px;
     position: absolute;
     width: 138px;
     right: 0;
     top: 11px;
 }

 .other-login{
     height: 80px;
     margin: 45px auto 0;
 }
 .other-login>ul>li{
     list-style: none;
     float: left;
     height: 45px;
     width: 20%;
     margin: 0 auto;
 }
 .other-login>ul>li>a{
     width: 60px;
     height: 70px;
     display: block;
     background-image: url(img/login_icons_tiny.png);
     background-repeat: no-repeat;
 }
 .weibo:hover{
     background-position: 0-80px;
 }
 .qq{
     background-position: -80px 0;
 }
 .qq:hover{
     background-position: -80px -80px;
 }
 .wechat{
     background-position: -160px 0;
 }
 .wechat:hover{
     background-position: -160px -80px;
 }
 .douban{
     background-position: -240px 0;
 }
 .douban:hover{
     background-position: -240px -80px;
 }
 .renren{
     background-position: -309px 0;
 }
 .renren:hover{
     background-position: -309px -80px;
 }

 .text-2{
     margin: -10px auto;
 }

 #main.mail-login{
     display: block;
     width: 100px;
 }

 #email{
 margin: 25px auto 0;
 }
 .mail-login>input{
     height: 34px;
     width: 100%;
     margin: 10px auto 0;
     outline: 0;
     border: 1px solid #dadada;
     border-radius: 3px;
     text-indent: 10px;
     outline: none;
 }

 #btn-login{
     height: 34px;
     display: block;
     text-align: center;
     line-height: 34px;
     background: rgb(216, 83, 83);
     border-radius: 3px;
     font-size: 18px;
     color: #fff;
     text-decoration: none;
     margin-top: 10px;
 }
 #btn-login:hover{
     background: rgb(221, 15, 15);
 }

 #register-forgetpsd{
     margin: 10px auto 30px;
     font: 10px;
 }
 .forget-pwd, .register{
     color: rgb(158, 25, 25);
     float: left;
     text-decoration: none;
     list-style-type: none;
 }
 .forget-pwd:hover, .register:hover{
     text-decoration: underline;
 }

 #register{
     float: right;
 }
 .register{
     float: right;
 }
 .no-accounter{
     color: #292727;
 } 

Result

The above is how css+html imitates petal.com to achieve a static landing page? (code example) details, please pay attention to other related articles on 1024programmer.com!