CSS+html이 어떻게 Huaban.com을 모방하여 정적 로그인 페이지를 구현할 수 있습니까? (코드 예)
- 青灯夜游앞으로
- 2018-10-24 16:23:176115검색
이 글의 내용은 Huaban.com을 모방하여 정적 랜딩 페이지를 구현하는 방법을 소개하는 것입니다. (코드 예). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
Thoughts：
꽃网（http://huaban.com/）
1. 페이지 분석
2. 자료 다운로드
3. 페이지 크기 분석
4 , 구현
자료 다운로드
페이지 자료를 로컬에 저장하는 방법은 다음과 같습니다
#🎜🎜 # 
페이지 크기 분석
대략적인 크기만, 크기 획득 방법은 스크린샷 방법을 사용하여 너비와 높이를 구하므로 주의하세요. 얻으려면 프로세스 중에 이미지 크기를 변경할 수 없습니다. 이미지를 최대화한 후 크기 가져오기
implementation
요소 작성 후 CSS 스타일 추가
html구현
<!doctype <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>花瓣</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="index.css" /> </head> <body> <div id="login-frame"> <div id="main"> <div id="logo"></div> <div class="lable text-1">使用第三方账号登陆</div> <div class="other-login"> <ul> <li><a title="微博" class="weibo" href="http://www.cnblogs.com/tynam/"></a></li> <li><a title="qq" class="qq" href="http://www.cnblogs.com/tynam/"></a></li> <li><a title="微信" class="wechat" href="http://www.cnblogs.com/tynam/"></a></li> <li><a title="豆瓣" class="douban" href="http://www.cnblogs.com/tynam/"></a></li> <li><a title="人人" class="renren" href="http://www.cnblogs.com/tynam/"></a></li> </ul> <div class="clearn"></div> </div> <div class="lable text-2">使用手机/邮箱登陆</div> <form class="mail-login" action="login" method="POST"> <input id="email" name="email" type="text" placeholder="输入手机号或邮箱"> <input type="password" name="password" placeholder="密码"> <a id="btn-login" href="http://huaban.com/" type="button" onclick="return href"> <span class="text">登 陆</span> </a> </form> <div id="forget-pwd"> <a class="forget-pwd" href="#">忘记密码>></a> </div> <div id="register"> <span class="no-accounter"></span>还没有花瓣账号？</span> <a class="register" href="#">点击注册>></a> </div> </div> </div> </body> </html>
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제