使用第三方账号登陆
使用手机/邮箱登陆
还没有花瓣账号？
点击注册>>
13518219792
小编给大家分享一下css+html仿花瓣网实现静态登陆页面的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！
思路：
1、对页面进行分析
2、下载素材
3、对页面尺寸进行分析
4、实现
下载素材
将页面素材保存到本地，方法如下图
页面尺寸进行分析
只做了大概得尺寸，尺寸获取方法，使用截图得方法获取宽和高，注意获取过程中图片得大小不能有变化。将图片大化后获取尺寸
实现
写一个元素，紧接着就css付样式
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仿花瓣网实现静态登陆页面的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
