这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战
今天分享一个之前做的一个登录注册的前端网页，整体的布局和js或css特效都比较简单。
一、前端网页布局
(一)注册区域
该部分使用了form表单来布局，用户注册时需要设置账号昵称、邮箱和密码这三个信息，注册时的响应我没有使用表单的默认提交事件，而是使用的鼠标点击响应事件。该部分的HTML布局代码如下：
注册区域效果图如下：
(二)登录区域
该部分的布局方式和注册区域一样,只是需要用户输入的数据不一样，同时添加了一个忘记密码的a标签。该部分的HTML布局代码如下：
登录区域效果图如下：
(三)登录注册切换区域
这部分的布局很简单，设置两个按钮就可以了，只是要添加两个类名以便于切换时的样式控制。该部分的HTML布局代码如下：
二、css样式
(二)登录注册区域样式
因为这个区域的背景图和body部分是同一张，为了好看，这个区域设置成立圆角边框，同时设置了阴影，这样 就有种立体的效果。
(二)表单区域样式
为了在登录注册切换时移动效果不突兀，这个区域设置了移动过渡效果（transition），切换按钮也设置了同样的样式。
三、Js特效
在这个案例的js部分，只添加了切换按钮的鼠标点击事件，当按钮被点击时，删除或添加某个类名，以此来控制样式。该部分代码如下：
