这里以纵向登录框为例子来进行说明。先来看看效果,以下是我帮别人做的登录框。美工不是我做的。
第1步、用记事本打开checklogin.js
第2步、查找logins_01.gif，为什么找这个,这是从登录图片的名称得到的,这样就可以定位到这个图片的位置。
第3步、以logins_01.gif为中心有很多代码。主要修改下面的内容:
if(showtype==0){
tempstr += "<table align=\"center\" width=\"100%\"
border=\"0\"
cellspacing=\"0\" cellpadding=\"0\">";
tempstr += "<table width=\"100%\" border=\"0\"
cellspacing=\"0\"
cellpadding=\"0\" class=\"userbox\">";
tempstr += "<tr><td height=\"25\" align=\"right\"><span
class=\"userlog\">用户名：</span></td><td
height=\"25\"
colspan=\"2\"><input name=\"UserName\" type=\"text\" id=\"UserName\"
size=\"16\"
maxlength=\"20\" style=\"width:110px;\"></td></tr>";
tempstr += "<tr><td height=\"25\" align=\"right\"><span
class=\"userlog\">密　码：</span></td><td
height=\"25\"
colspan=\"2\"><input name=\"UserPassword\" type=\"password\"
id=\"UserPassword\"
size=\"16\" maxlength=\"20\" style=\"width:110px;\"></td></tr>";
if(root.item(0).getElementsByTagName("checkcode").item
(0).text=='1'){
tempstr += "<tr><td height=\"25\" align=\"right\"><span
class=\"userlog\">验证码：</span></td><td
height=\"25
\"><input name=\"CheckCode\" type=\"text\" id=\"CheckCode\" size=\"6\"
maxlength=\"6\" style=\"width:49px;\"></td><td><a
href=\"javascript:refreshimg()
\"
title=\"看不清楚，换个图&#x
7247;\
"><img id=\"checkcode\" src=\"" + siteroot + "inc/checkcode.asp\"
style=\"border:
1px solid #ffffff\"></a></td></tr>";
}
tempstr += "</table><table align=\"center\" width=\"100%\"
border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
tempstr += "<tr><td colspan=\"2\" align=\"center\">";
tempstr += "<table align=\"center\" width=\"100%\"
border=\"0\"
cellspacing=\"5\" cellpadding=\"0\">";
tempstr += "<tr><td colspan=\"2\" align=\"center\"><input
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 + ");\">　<input
type=\"checkbox\" name=\"CookieDate\" value=\"3
\">永久登录";
tempstr += "</td></tr></table>";
tempstr += "<table border=\"0\" align=\"center\"
cellpadding=\"0
\" cellspacing=\"0\">";
tempstr += "<tr><td rowspan=\"2\"><img src=\""+ siteroot
+"Images/loginr_01.gif\" alt=\"\"></td><td><a href=\""+ siteroot
+"Reg/User_Reg.asp\" target=\"_blank\"><img src=\""+ siteroot
+"Images/loginr_02.gif\" alt=\"新用户注册\"
border=\"0\"></a></td></tr>";
tempstr += "<tr><td><a href=\""+ siteroot
+"User/User_GetPassword.asp\" target=\"_blank\"><img src=\""+ siteroot
+"Images/loginr_03.gif\" alt=\"忘记密码？\"
border=\"0\"></a></td></tr>";
tempstr += "</table>";
tempstr += "</tr></table>";
}else{
第4步、分析上面的代码(如果要修改里面的中文字，可能你会用到什么UTF-8字符转换工具，但是我这里的方法不用这个玩意。)
tempstr += " 这是代码的开始部分，具体什么意义暂时不管
"; 这是代码的结束部分，具体什么意义暂时不管
上面这两部分之间的就是内容,仔细看看其他代码的写法和平时的代码有什么不同：
比如一个表格就写成：（注意属性的前后都有\"）
tempstr += "<table align=\"center\" width=\"100%\" border=\"0\"
cellspacing=\"0\" cellpadding=\"0\">";
tempstr += "<tr><td colspan=\"2\" align=\"center\">";
tempstr += "</tr></table>";
仔细看看其他代码的写法有什么不同。然后就可以进行修改了。
第5步、现在你可以试着修改上面第3条的代码中红色的部分，每修改一次都查看一下效果。有的内容你可以用自己喜欢的单词来代替来看看。得到了什么变化。
第6步、现在你进一步看看删除里面部分代码来看看效果。
好了，还要看自己如何大胆去实践了，相信不久你就可以打造出自己喜欢的登录框了。
