LoginPage的实现

LoginPage的实现

本文git源码地址：https://github.com/x-Long/loginPage

---

作业原图如下：

作业完成后代码渲染后页面截图如下：

---

布局部分代码如下：

整体相对较为简单，主要涉及到的技术有背景精灵技术，盒子模型，定位，浮动等技术。在这里，我们可以为输入框绑定焦点事件函数以写入默认值，这样相较于给文本框设定value值更为灵活，随焦点所在位置而变化。详细实现过程见代码部分；

---

整体实现起来相对抽象的可能就是login下方的小三角形，这个我们可以使用如下代码完成，理解起来可能相对抽象，需要对盒子模型有全局的理解，读者下去后可以查阅相关书籍。

---

之后我们引入弹窗插件，仔细阅读完代码后，我们可以对其进行一定的修改，以带到我们想要的效果。

输入错误账号密码后如图：

输入我们通过js（jq）绑定的账号密码后如图：

账号密码绑定部分实现代码如下：

---

参考全文实现代码见首行git链接。

---

电子152
梁小龙
Thanks for reading！

`