[组图]如何打造个性化的登录框

作者:龙卷风 来源:动易论坛 点击数: 发布时间:2007年02月08日

这里以纵向登录框为例子来进行说明。先来看看效果,以下是我近期帮别人做的登录框。美工不是我做的。{先天美工色彩不足,正在修炼中,,,,,}


此主题相关图片如下:


此主题相关图片如下:


此主题相关图片如下:


1、用记事本打开checklogin.js
2、查找logins_01.gif
为什么找这个,这是从登录图片的名称得到的,这样就可以定位到这个图片的位置。
3、以logins_01.gif为中心有很多代码,主要修改下面的内容:
if(showtype==0){
                tempstr += "
cellspacing="0" cellpadding="0">";
                tempstr += "
cellpadding="0" class="userbox">";
                tempstr += "


(0).text=='1'){
                   tempstr += "

                tempstr += "
";                tempstr += " ";                if(root.item(0).getElementsByTagName("checkcode").item ";                }
class="userlog">用户名:
colspan="2">
maxlength="20" style="width:110px;">
class="userlog">密 码:
colspan="2">
size="16" maxlength="20" style="width:110px;">
class="userlog">验证码:
maxlength="6" style="width:49px;">
title="看不清楚,换个图片
border="0" cellspacing="0" cellpadding="0">";
                tempstr += "
";
                tempstr += "
cellspacing="5" cellpadding="0">";
                tempstr += "
name="Login" type="image" id="Login" src=""+ siteroot
+"Images/logins_01.gif" style="width:45px;height:39px;border:0px;"
align="middle" value=" 登 录 " onclick="CheckUser(" + root.item
(0).getElementsByTagName("checkcode").item(0).text + ");"> 
type="checkbox" name="CookieDate" value="3
">永久登录";
                tempstr += "
";
                tempstr += "


";                tempstr += " ";                tempstr += " ";                tempstr += "
+"Images/loginr_01.gif" alt="">
";
                tempstr += "
";
            }else{
4.分析上面的代码(如果要修改里面的中文字,可能你会用到什么UTF-8字符转换工具,但是我这里的方法不用这个玩意。)
tempstr += "   这是代码的开始部分,具体什么意义暂时不管,
";             这是代码的结束部分,具体什么意义暂时不管,
上面这两部分之间的就是内容,仔细看看其他代码的写法和平时的代码有什么不同
比如一个表格就可以写成(不限于):(注意属性的前后都有" )
     tempstr += "
  cellspacing="0" cellpadding="0">";       tempstr += "
";
     tempstr += "
";
仔细看看其他代码的写法有什么不同。然后就可以进行修改了。
5、现在你可以试着修改上面第3条的代码中红色的部分,每修改一次都查看一下效果。有的内容你可以用自己喜欢的单词来代替来看看。得到了什么变化。
6、现在你进一步看看删除里面部分代码来看看效果。
7、禁用永久登录:
修改原代码: 永久登录";
改成这样: 永久登录";
后面不变,“永久登录”几个字不要,就直接删除即可。
相信不久你就可以打造出自己喜欢的登录框了。