CSS/HTML做一个自适应的登录页面

2018年4月13日19:49:34 3 356 阅读
摘要

从psd图片切图,到拿到各种元素属性值,最后css+html还原出来一个和psd图片一样的自适应静态网页。

首先,获取psd设计图

分析

  1. 这张图片分那几部分构成?
  2. 切图的话,需要切哪些图来作为自己的资源?

开始搞事,切图

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

CSS/HTML做一个自适应的登录页面

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

  • 头部信息 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,就可以看到颜色代码如下图:

CSS/HTML做一个自适应的登录页面

  • 因为头部信息是有一个背景色的,所以我们需要设置一下,并且宽度设置为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中,适配一下各种分辨率的机型,测试一下,是否满足了需求。

本博客的第一篇文章,感觉有点乱,但是又说不出来乱在哪里,人生有很多第一次,希望以后写的文章,越来越好。

感谢阅读。

文件下载

广告也精彩
weinxin
来找我玩~
这是我的微信扫一扫~
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:3   其中:访客  2   博主  1

    • avatar 柠檬酸 1

      初次访问,请多关照!

        • avatar 舍得 博主

          @柠檬酸 欢迎~ 老早就关注你啦,中间停了一段时间没续费主机,后来也换主题了

        • avatar 柠檬酸 1

          初次访问,请多关照。