CSS+html이 어떻게 Huaban.com을 모방하여 정적 로그인 페이지를 구현할 수 있습니까? (코드 예)

이 글의 내용은 Huaban.com을 모방하여 정적 랜딩 페이지를 구현하는 방법을 소개하는 것입니다. (코드 예). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Thoughts：

꽃网（http://huaban.com/）

1. 페이지 분석

2. 자료 다운로드

3. 페이지 크기 분석

4 , 구현

자료 다운로드

페이지 자료를 로컬에 저장하는 방법은 다음과 같습니다

#🎜🎜 #

페이지 크기 분석

대략적인 크기만, 크기 획득 방법은 스크린샷 방법을 사용하여 너비와 높이를 구하므로 주의하세요. 얻으려면 프로세스 중에 이미지 크기를 변경할 수 없습니다. 이미지를 최대화한 후 크기 가져오기

implementation

요소 작성 후 CSS 스타일 추가

html구현

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 스타일

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#🎜 🎜 #

위 내용은 CSS+html이 어떻게 Huaban.com을 모방하여 정적 로그인 페이지를 구현할 수 있습니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!