这里以纵向登录框为例子来进行说明。先来看看效果,以下是我近期帮别人做的登录框。美工不是我做的。{先天美工色彩不足,正在修炼中,,,,,}
此主题相关图片如下:
此主题相关图片如下:
此主题相关图片如下:
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\">永久登录";
后面不变,“永久登录”几个字不要,就直接删除即可。
相信不久你就可以打造出自己喜欢的登录框了。 |