css+html如何仿花瓣网实现静态登陆页面？（代码实

思路：

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

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 >
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;  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如何仿花瓣网实现静态登陆页面？（代码实例）的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。