这里以纵向登录框为例子来进行说明。先来看看效果,以下是我近期帮别人做的登录框。美工不是我做的。{先天美工色彩不足,正在修炼中,,,,,} 
  此主题相关图片如下:
  
 
  此主题相关图片如下:
  
 
  此主题相关图片如下:
  
 
  
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=\"看不清楚,换个图片\ 
"><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 += "</td></tr></table>";  仔细看看其他代码的写法有什么不同。然后就可以进行修改了。 5、现在你可以试着修改上面第3条的代码中红色的部分,每修改一次都查看一下效果。有的内容你可以用自己喜欢的单词来代替来看看。得到了什么变化。 
6、现在你进一步看看删除里面部分代码来看看效果。 
7、禁用永久登录: 
修改原代码:<input type=\"checkbox\" name=\"CookieDate\" value=\"3\">永久登录"; 改成这样:<input type=\"hidden\" name=\"CookieDate\" value=\"3\">永久登录"; 
后面不变,“永久登录”几个字不要,就直接删除即可。 
相信不久你就可以打造出自己喜欢的登录框了。  |