利用H5+css3做一个自适应的登录页面推荐

DurkBlue3个月前 ( 03-18 )59抢沙发
利用H5+css3做一个自适应的登录页面摘要: 分析这张图片分那几部分构成?切图的话,需要切哪些图来作为自己的资源?开始搞事,切图这是一张设计师设计的psd图片,我们现在拿到了这张图片,然后在PS中打开它根据图片可知,这张图片可...

分析

  1. 这张图片分那几部分构成?

  2. 切图的话,需要切哪些图来作为自己的资源?

开始搞事,切图

  1. 这是一张设计师设计的psd图片,我们现在拿到了这张图片,然后在PS中打开它

利用H5+css3做一个自适应的登录页面 第1张

根据图片可知,这张图片可以分成四个部分:

  • 头部信息 header

  • 身体信息 content

  • 脚部信息 footer

  • 忘记密码 nav

  1. 根据图片可知,有用的资源图片只有两个电话的图标和锁的图片,header部分和footer以及nav都可以用css来制作出来。

  2. 切图,这个百度上有很多教程,这里不做赘述。

有了图片资源,我们现在可以开始设计,整体内容

  1. header部分,颜色的rgb以及注册、登录、关闭的字体颜色,以及位置摆放(float布局)

  2. content部分,我们可以设计一个通用的div,然后是图片和输入框

  3. footer部分,和header部分类似,字体背景颜色。

  4. nav部分,忘记密码连接以及位置。

 code部分

  1. header部分,颜色的rgb以及注册、登录、关闭的字体颜色,以及位置摆放(float布局)

因为我们的目的是做一个自适应的登录界面,所以我们要在html的头部head中加入一段这样的代码

  • <meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

  • 颜色的话,我是用的ps,用里面的吸管工具,直接右键你想要的颜色,这样之后,颜色RGB就已经在你的剪贴板上了,直接ctrl+v,就可以看到颜色代码如下图:

利用H5+css3做一个自适应的登录页面 第2张

  • 因为头部信息是有一个背景色的,所以我们需要设置一下,并且宽度设置为100%:

  1. header{

  2.     width: 100%;

  3.     height70px;

  4.     colorwhite;

  5.     background-color#5FC0CD;

  6. }

  • 然后分别设置注册,登录,关闭的样式:

  1. .register{

  2.     floatleft;

  3.     text-alignleft;

  4.     padding-left: 2%;

  5.     width: 20%;

  6.     height70px;

  7.     line-height70px;

  8.     font-size: 1em;

  9. }

  10. .login{

  11.     floatleft;

  12.     text-aligncenter;

  13.     width: 56%;

  14.     height70px;

  15.     line-height70px;

  16.     font-size: 1em;

  17. }

  18. .close{

  19.     floatleft;

  20.     text-alignrightright;

  21.     padding-right: 2%;

  22.     width: 20%;

  23.     height70px;

  24.     line-height70px;

  25.     font-size: 1em;

  26. }

  • 这样头部布局,基本完成

  1. content部分,我们可以设计一个通用的div,然后是图片和输入框

一个通用的bg-div

  1. .bg-div{

  2.     floatleft;

  3.     margin12px 0 12px 0;

  4.     width: 100%;

  5.     height70px;

  6.     display: flex;

  7.     background-colorwhite;

  8. }

接下来是图片和输入框

  1. img{

  2.     width20px;

  3.     height30px;

  4.     margin: 1em 0 1em 1em;

  5. }

  6. .phone-text{

  7.     margin: 1rem 0 0 1rem;

  8.     height30px;

  9.     border-left2px solid #D4D4D4;


  10. }

  11. .lock-text{

  12.     margin: 1rem 0 0 1rem;

  13.     height30px;

  14.     border-left2px solid #D4D4D4;

  15. }

  1. footer部分,和header部分类似,字体背景颜色。

  1. .button-login{

  2.     floatleft;

  3.     text-aligncenter;

  4.     width: 100%;

  5.     height70px;

  6.     line-height70px;

  7.     font-size: 1em;

  8.     colorwhite;

  9.     background-color#5FC0CD;

  10. }

  1. nav部分,忘记密码连接以及位置。

  1. .no-password{

  2. floatrightright;

  3. margin: 2% 2% 0 0;

  4. width65px;

  5. height20px;

  6. }

  7. a{

  8. color#66cccc;

  9. }

最后大功告成,就完成了一个自适应登录界面布局的样式,剩下的就是在F12中,适配一下各种分辨率的机型,测试一下,是否满足了需求。

此篇文章由DurkBlue发布,感谢转载需要请注明来处

分享到:
0
赞(0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

发表评论取消回复

快捷回复:

评论列表 (暂无评论,59人围观)参与讨论