![8dc5a82bed1d9241fc297cd254d24d72.png](https://i-blog.csdnimg.cn/blog_migrate/d360539a4e4b27e1095e88696d99823a.jpeg)
登录页面静态效果
![ca1a5887c1ecf9f4cd17391b5a836585.gif](https://i-blog.csdnimg.cn/blog_migrate/3d842898677f37eb3ba232a2398fc2c4.gif)
登录页面动态效果
登录页面是项目开发中最常用的。今天教大家手写一个登录页面,最终效果见上图。本页面的的开发运用了HTML,CSS和JavaScript的知识。
首先创建一个空的CSS文件(style.css),页面的样式代码将写到这个文件中。
然后创建HTML文件,并引入style.css和jquery.min.js。
![a04baa22296e45b0898ebc5163e3a9fa.png](https://i-blog.csdnimg.cn/blog_migrate/748db624f9215f0b1dd85e9c427fca0e.jpeg)
在html文件中引入style.css和jquery.min.js
在body标签中间添加一个form,并设置form的class为login-form。
![a1cc36f4e7f8c0e7101e04564996786b.png](https://i-blog.csdnimg.cn/blog_migrate/5c8791c6958c53b33c9a932221350245.jpeg)
添加form标签
在form中添加标题Login,两个文本输入框,一个提交按钮,以及注册链接。
![d0ed1bf09dfc624048965b787a44e823.png](https://i-blog.csdnimg.cn/blog_migrate/f7c69b119e3de2111f15d54d4743093b.jpeg)
![c1c15c851a9e6f252612631553204781.png](https://i-blog.csdnimg.cn/blog_migrate/d2743e6bbb162222d1d1d894be752bfa.jpeg)
当前效果
目前的页面还没有样式,看起来很丑,下面我们在style.css文件中添加样式。
![eecab8df7f54fee78673e3ef1e52ce0b.png](https://i-blog.csdnimg.cn/blog_migrate/41a7a71110d83083ff3cfe7acc9fa124.jpeg)
![8a31c4ef8eda287c1d28867e366d2099.png](https://i-blog.csdnimg.cn/blog_migrate/7910fdf8774391cb0db607b545e97679.jpeg)
![62dd7736fe288a25bb151615332017da.png](https://i-blog.csdnimg.cn/blog_migrate/d5e7b1c406bb78af0bca46cc0e1733a1.jpeg)
![3f9297104f7a76df4d77e8aac2a4d3fa.png](https://i-blog.csdnimg.cn/blog_migrate/448b1a9bc1f0c46a39b58d7c88955a45.jpeg)
样式代码添加后的效果
样式代码添加完成后,页面看起来就美观多了,下面我们实现鼠标点击文本输入框时的动画效果。
此动画效果需要编写JavaScript代码实现。我们在form标签下添加此代码。
![f21d3d77b2fc84191b353eb36905d73a.png](https://i-blog.csdnimg.cn/blog_migrate/5a299bb6988858300d2ecac8b01cb74e.jpeg)
输入框动画代码
第一句代码绑定了focus事件。当输入框获得焦点时,次输入框添加focus样式。
第二句代码绑定了blur事件。当输入框失去焦点时,如果此输入框为空,那么移除focus样式。
![2a70da032de560417735792627dfa604.png](https://i-blog.csdnimg.cn/blog_migrate/8fb315a519c32154ff50412a19d91eb9.jpeg)
写在style.css中的focus样式
到此为止,这个登录页面就写完了。有疑问的朋友可以私信我。如果想要源代码的朋友可以私信给我你的邮箱地址,我发给你。整个页面的编写过程已制作成视频,有兴趣的朋友可以通过下方的“了解更多”查看视频。