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

首先，获取psd设计图

分析

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

开始搞事，切图

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

根据图片可知，这张图片可以分成四个部分：

• 头部信息 header
• 身体信息 content
• 脚部信息 footer
• 忘记密码 nav

2. 根据图片可知，有用的资源图片只有两个电话的图标和锁的图片，header部分和footer以及nav都可以用css来制作出来。
3. 切图，这个百度上有很多教程，这里不做赘述。

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

1. header部分，颜色的rgb以及注册、登录、关闭的字体颜色，以及位置摆放（float布局）
2. content部分，我们可以设计一个通用的div，然后是图片和输入框
3. footer部分，和header部分类似，字体背景颜色。
4. nav部分，忘记密码连接以及位置。

 code部分

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

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

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

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

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

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

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

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

一个通用的bg-div

接下来是图片和输入框

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

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

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

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

感谢阅读。