溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css+html仿花瓣網實現靜態登陸頁面的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
思路：
1、對頁面進行分析
2、下載素材
3、對頁面尺寸進行分析
4、實現
下載素材
將頁面素材保存到本地，方法如下圖
頁面尺寸進行分析
只做了大概得尺寸，尺寸獲取方法，使用截圖得方法獲取寬和高，注意獲取過程中圖片得大小不能有變化。將圖片最大化后獲取尺寸
實現
寫一個元素，緊接著就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;
} 看完了這篇文章，相信你對css+html仿花瓣網實現靜態登陸頁面的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
