实现花瓣登陆静态页面

beita 发布于2019-04-23 13:16 / 2584人阅读

摘要：将图片最大化后获取尺寸实现写一个元素，紧接着就付样式实现花瓣使用第三方账号登陆微博微信豆瓣人人使用手机邮箱登陆输入手机号或邮箱密码登陆忘记密码还没有花瓣账号点击注册样式结果

思路：

　　花瓣网

　　1、对页面进行分析

·　 2、下载素材

　　3、对页面尺寸进行分析

　　4、实现

下载素材

　　将页面素材保存到本地，方法如下图

页面尺寸进行分析

　　只做了大概得尺寸，尺寸获取方法，使用截图得方法获取宽和高，注意获取过程中图片得大小不能有变化。将图片最大化后获取尺寸

实现　

　　写一个元素，紧接着就css付样式

　　html实现

 1 doctype >
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title>花瓣title>
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8     <link rel="stylesheet" type="text/css" media="screen" href="index.css" />
 9 head>
10 <body>
11     <div id="login-frame">
12         <div id="main">
13             <div id="logo">div>
14             <div class="lable text-1">使用第三方账号登陆div>
15                 <div class="other-login">
16                     <ul>
17                         <li><a  title="微博" class="weibo" href="http://www.cnblogs.com/tynam/">a>li>
18                         <li><a title="qq" class="qq" href="http://www.cnblogs.com/tynam/">a>li>
19                         <li><a title="微信" class="wechat" href="http://www.cnblogs.com/tynam/">a>li>
20                         <li><a title="豆瓣" class="douban" href="http://www.cnblogs.com/tynam/">a>li>
21                         <li><a title="人人" class="renren" href="http://www.cnblogs.com/tynam/">a>li>
22                     ul>
23                     <div class="clearn">div>
24                 div>
25                 <div class="lable text-2">使用手机/邮箱登陆div>
26                 <form class="mail-login" action="login" method="POST">
27                     <input id="email" name="email" type="text" placeholder="输入手机号或邮箱">
28                     <input type="password" name="password" placeholder="密码">
29                     <a id="btn-login" href="http://huaban.com/" type="button" onclick="return href">
30                         <span class="text">登  陆span>
31                     a>
32                 form>
33                 <div id="forget-pwd">
34                     <a class="forget-pwd" href="#">忘记密码>>a>
35                 div>
36                 <div id="register"> 
37                     <span class="no-accounter">span>还没有花瓣账号？span>
38                     <a class="register" href="#">点击注册>>a>
39                 div>
40         div>   
41     div>
42     
43 body>
44 html>

　　css样式

  1 html,body{
  2     margin: 0;
  3     padding: 0;
  4 }
  5 
  6 body{
  7     background-color: rgb(86, 228, 221);
  8 }
  9 
 10 .clearn{
 11     float: none;
 12 }
 13 
 14 #login-frame{   
 15     width: 600px;
 16     height: 430px;
 17     margin: 100px  auto 0;
 18     background-color: #fff;
 19 }
 20 
 21 #main{
 22     margin: 20px 90px auto;
 23 }
 24 
 25 #logo{
 26 
 27     width: 150px;
 28     height: 135px;
 29     margin: 85px auto 0;
 30     background-position: 0;
 31     background-image: url(img/logo.png);
 32     background-repeat: no-repeat;
 33     list-style: none;
 34 }
 35 
 36 .lable{
 37     font-size: 14px;
 38     color: hsla(0, 0%, 63%, 0.932);
 39     text-align: center;
 40     position: relative;
 41     margin: -30px auto;
 42 }
 43 
 44 .lable::before{
 45     content: "";
 46     border-top: #dadada solid 1px;
 47     position: absolute;
 48     width: 138px;
 49     left: 0;
 50     top: 11px;
 51 }
 52 .lable::after{
 53     content: "";
 54     border-top: #dadada solid 1px;
 55     position: absolute;
 56     width: 138px;
 57     right: 0;
 58     top: 11px;
 59 }
 60 
 61 .other-login{
 62     height: 80px;
 63     margin: 45px auto 0;
 64 }
 65 .other-login>ul>li{
 66     list-style: none;
 67     float: left;
 68     height: 45px;
 69     width: 20%;
 70     margin: 0 auto;
 71 }
 72 .other-login>ul>li>a{
 73     width: 60px;
 74     height: 70px;
 75     display: block;  
 76     background-image: url(img/login_icons_tiny.png);
 77     background-repeat: no-repeat;
 78 }
 79 .weibo:hover{
 80     background-position:0 -80px;    
 81 }
 82 .qq{
 83     background-position: -80px 0;
 84 }
 85 .qq:hover{
 86     background-position: -80px -80px;    
 87 }
 88 .wechat{
 89     background-position: -160px 0;
 90 }
 91 .wechat:hover{
 92     background-position: -160px -80px;    
 93 }
 94 .douban{
 95     background-position: -240px 0;
 96 }
 97 .douban:hover{
 98     background-position: -240px -80px;    
 99 }
100 .renren{
101     background-position: -309px 0;
102 }
103 .renren:hover{
104     background-position: -309px -80px;    
105 }
106 
107 .text-2{
108     margin: -10px auto;
109 }
110 
111 #main.mail-login{
112     display: block;
113     width: 100px;
114 }
115 
116 #email{
117 margin: 25px auto 0;
118 }
119 .mail-login>input{
120     height: 34px;
121     width: 100%;
122     margin: 10px auto 0;
123     outline: 0;
124     border: 1px solid #dadada;
125     border-radius: 3px;
126     text-indent: 10px;
127     outline: none;
128 }
129 
130 #btn-login{
131     height: 34px;
132     display: block;
133     text-align: center;
134     line-height: 34px;
135     background: rgb(216, 83, 83);
136     border-radius: 3px;
137     font-size: 18px;
138     color: #fff;
139     text-decoration: none;
140     margin-top: 10px;
141 }
142 #btn-login:hover{
143     background: rgb(221, 15, 15);
144 }
145 
146 #register-forgetpsd{
147     margin: 10px auto 30px;
148     font: 10px;
149 }
150 .forget-pwd,.register{
151     color: rgb(158, 25, 25);
152     float: left;
153     text-decoration: none;
154     list-style-type: none;
155 }
156 .forget-pwd:hover,.register:hover{
157     text-decoration: underline;
158 }
159 
160 #register{
161     float: right;
162 }
163 .register{
164     float: right;
165 }
166 .no-accounter{
167     color: #292727;
168 }

　　结果

云服务器 GPU云服务器 php实现静态页面话静态页面动静态页面 html静态页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1664.html

spinjs实现加载效果

摘要：最近做的一个项目是客户端里面包了页面，客户端向后台发送请求有可能费时较长，因此需要在服务器响应期间在页面实现动态加载效果。为了实现加载效果必须将同步请求改成异步的。最近做的一个项目是C#客户端里面包了html页面，客户端向后台发送请求有可能费时较长，因此需要在服务器响应期间在页面实现动态加载效果。最开始基于安全考虑所有的前端请求都是走C#同步请求，这就带来两个问题1.同步请求用时较长...

snifes 2019-08-20 18:17 评论0 收藏0
【web前端】花瓣画板分类归档查看工具

摘要：花瓣是国内最大的图片分享网站，部分用户长期以来都有对个人主页的画板按字母顺序进行归档的需求，但花瓣官方一直没有支持这个能力。花瓣是国内最大的图片分享网站，部分用户长期以来都有对个人主页的画板按字母顺序进行归档的需求，但花瓣官方一直没有支持这个能力。最近写了个油猴脚本用于按字母顺序归档主页画板。仅供学习交流。效果演示 showImg(https://segmentfault.co...

mochixuan 2019-08-23 13:49 评论0 收藏0
推荐几款chrome上比较好用的书签收藏夹插件

摘要：我相信这是很多人共同的感受，所以今天推荐的款书签收藏夹插件印象笔记剪藏插件下载地址印象笔记推出的一款剪藏插件，可以一键收藏各类网页图文，并永久保存进。今天有个人问我chrome浏览器器上有没有可以稍后阅读的插件啊？她其实想问的就是书签收藏夹插件，因为我们在互联网上一不小心就会看到很多感兴趣的内容，但是时间有限暂时无法阅读，以后保存下来有时间的时候再看。我相信这是很多人共同的感受，所以...

superPershing 2019-08-20 14:34 评论0 收藏0
node.js中文资料导航

摘要：中文资料导航官网七牛镜像深入浅出系列进阶必读中文文档被误解的编写实战系列热门模块排行榜，方便找出你想要的模块多线程，真正的非阻塞浅析的类利用编写异步多线程的实例中与的区别管道拒绝服务漏洞高级编程业界新闻看如何评价他们的首次尝鲜程序员如何说服 node.js中文资料导航 Node.js HomePage Node官网七牛镜像 Infoq深入浅出Node.js系列（进阶必读） Nod...

geekidentity 2019-08-19 14:24 评论0 收藏0
Fiori里花瓣的动画效果实现原理

摘要：另一种是下图的个圆环不断旋转的效果。的实现位置动画效果的渲染实现位置第行的方法从行的循环能看出在循环体内创建了个实际上就是动画效果里的个花瓣。动画效果显示之后，什么时候消失使用将的关闭动作加入到执行队列里。 Fiori里的busy dialog有两种表现形式，一种是下图里的花朵形状，由5个不断旋转的花瓣组成。另一种是下图的3/4个圆环不断旋转的效果。 showImg(https://s...

Steven 2019-08-30 14:01 评论0 收藏0