How can css+html imitate Huaban.com to implement a static login page? (code example)

The content of this article is to introduce how to imitate Huaban.com to implement a static login page? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Thoughts:

花pet网（http://huaban.com/）

1. Yes Page analysis

2. Download material

3. Analyze page size

4. Implement

Download material

Save the page material to the local, the method is as shown below

Analyze the page size

Only a rough summary To get the size, how to get the size, use the screenshot method to get the width and height. Note that the size of the image cannot change during the acquisition process. Get the size after maximizing the image

implementation

Write an element, and then add the css style

htmlimplementation

nbsp;nbsp;html>


    <meta>
    <meta>
    <title>花瓣</title>
    <meta>
    <link>


    <div>
        <div>
            <div></div>
            <div>使用第三方账号登陆</div>
                <div>
                    <ul>
                        <li><a></a></li>
                        <li><a></a></li>
                        <li><a></a></li>
                        <li><a></a></li>
                        <li><a></a></li>
                    </ul>
                    <div></div>
                </div>
                <div>使用手机/邮箱登陆</div>
                <form>
                    <input>
                    <input>
                    <a>
                        <span>登  陆</span>
                    </a>
                </form>
                <div>
                    <a>忘记密码>></a>
                </div>
                <div> 
                    <span></span>还没有花瓣账号？
                    <a>点击注册>></a>
                </div>
        </div>   
    </div>
    

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 the detailed content of How can css+html imitate Huaban.com to implement a static login page? (code example). For more information, please follow other related articles on the PHP Chinese website!