用什么技术实现前台页面设计_网站登录框制作细节技术剖析，教你做更好用的登录框...

很多人的理解中，网站制作公司都是用现成的东西制作网站的，其实说的也对，也不对。对于定制型网站来讲，前台界面皮肤都是定制的，并不是使用现成的，网站的后台界面什么的一般是不会特殊定制，因为没有这个必要。但是想要让网站界面更好，使用起来效果更好，后台的开发也是建站公司需要做的事情。比如我们今天要讲的网站登录框制作，就是最近野狼建站要思考的问题。因为我们自己开发的有永易搜CMS，这个网站内容管理系统，就需要用到登录框，以前用的界面感觉太简单，现在进行了一系列的升级，新版本的截图如下：

网站登录框

如果非常简单的做一下，很简单，就是做几个表单，然后提交给一个页面，进行登陆的验证，登陆成功就进行数据处理，非常的简单。但事实上，你想给界面做的好，可能并不是那么简单的，需要用到很多的技术和很多的步骤：

九易其稿，好不容易

那么今天就来详细的谈一谈，怎么来做这个网页登录框：

第一步：设计界面

我们曾经用过一稿，用了有五六年，现在准备出一些更好地界面，所以就连带着登录框进行升级。中间做了几个，效果不好，都pass掉了。最后定的这个稿件。这个稿件也是修改过很多次，有细节的修改，有功能的修改。

第二步：界面制作

前台界面制作如果没有一点水平，就会导致很多地方处理不好，比如：

(1)背景图怎么适配兼容不同大小的屏幕

(2)浏览器各版本的兼容问题

第三步：前端JS特效添加

面临很多技术问题，比如说，怎么做表单验证，怎么做密码框提示，怎么做鼠标放上去文字提示消失效果，怎么做表单的AJAX验证。这些在前端架构的时候都要考虑一下。

第四步：前后台交互制作

这里边有不少的关键步骤，比如：

(1)用户名AJAX验证

这里可以验证用户名是否合法，可以通过前台和后台共同判断的方式进行。

(2)验证码合法性判断

验证码正确与否可以进行一个判断，需要去访问服务器上的数据，这里进行ajax验证就可以在当前页面进行判断，无需提交之后进行处理。

(3)登录ajax响应

登录时候不是直接提交到页面，而是要ajax提交，这样能够在当前页面处理，报错之后也可以直接提示出来，无需重新输入，修改即可。在ajax提交的过程中，还考虑了，提交中的等待效果，用几个冒泡的gif替换“登录”字样，效果更好。

第五步：后台登陆逻辑

登陆之后，肯定要写session等操作，这里就不写这么详细了。

要有工匠精神

一个小小的登录框，可以简单，也可以复杂，经过这样复杂的改造之后，用户体验提升的不是一点两点，这样用起来就会更舒服，效果更好。对于用户可能说不出来哪里舒服，甚至有的人并不关注这一块儿，但是作为专业的建站人员，制作出来的网站一定要从每一个细节着手，这一个一个的细节构成了整个网站的用户体验。如果这个地方也差一点，那个地方也差一点，做成之后的东西那差的就不是一点两点了。