62. 登录注册区域

这一部分很难写，写了大半天。。。要考虑的细节很多。

样式是都写出来了，需要切换的界面也是都写出来了，但是，感觉后续的js代码写起来会很吃力。

在完成该区域时，共分为了 上、中、下 三个部分来写，如下图所示：

我在写这部分的时候，是根据位置来划分，而不是根据内容来划分的。但凡是位于上方的，就都写在上方，不需要显示的，就强行 hidden。

.hidden {
    display: none !important;
}

• 选择国际区号

这里使用的 钩，是搜狗输入法（gou）打出来的。 √

背景有一层阴影，需要铺满整个区域。

• 鼠标悬停在右上角的时候，出现提示框：

• 密码登录界面

• 二维码的登录界面

小细节：

• 验证码 maxlength = 6
• +86 的手机号 maxlength = 13
• 当两个输入框中都不为空时，登录按钮高亮显示，并且改变光标样式。
• 短信登录/注册 和 密码登录 的下边框问题

官方的没有重合，自己写的重合了。

不重合的做法也很简单，就是将灰色的 border-bottom 设置在容器上，然后将选中效果的黑色的 border-bottom 设置在子元素上即可。

• 输入手机号前边的分割线

可以使用伪元素来实现，也可以使用 border 来实现。

遇到的问题：

• 最大的问题是不知道该如何写 html 和 css 才能方便后续 js 代码的书写，这是全程暴力写下来。
• 微信图标和微博图标，官方使用的是 svg，无法将其另存为图片保存到本地。（不过好像有线上的 svg 转 图片 的网站，还没试过。）所以，使用了 iconfont 字体图标来替代。
• 提取公共样式的能力欠缺，loginframe.css 共写了 400 多行，应该还有一些css代码是可以直接复用的。
• 由于 flex 布局，好久之前学习的了，现在都忘的差不多了，所以，没有任何一个部分使用到了 css3 的 flex，弹性盒模型 来实现。

感悟：

现阶段，通过编写一些常见的主流页面，以此来检测html和css掌握的程度，发现在写的过程中，虽然速度慢，但是，如果过程中遇到问题，差不多都能很快地意识到是什么原因导致的，并且，也能很快地找到对应的解决措施，感觉到这方面的能力提升了不少。反正，以前是做不到的。