• 懒鸟飞:精品网站源码、帝国cms模板专业分享平台

织梦会员登录状态(样式)代码调用方法


二、竖向登陆
通过横向登陆的示例,其实我们很容易理解。要做一个竖向登陆的这个效果,只需要将登陆前后的样式分别修改一下即可,不需要修改其它任何功能文件。
这是我修改的竖向登陆的登录前样式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; CHARSET=utf88" /> 
<title>首页登陆样式测试 ——懒鸟飞建站工作室(www.lazybirdfly.com)</title> 
<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script><!--这段是显示整个效果必须要存在的ajax框架--> 
<script language="javascript" type="text/javascript"> 
    function CheckLogin(){ //判断是否登陆的函数  
      var taget_obj = document.getElementById('_userlogin'); //登陆后动态加载的区块,也就是<body>区域的id="_userlogin"的所有内容  
      myajax = new DedeAjax(taget_obj,false,false,'','','');  
      myajax.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php"); //登陆后的要显示的具体内容  
      DedeXHTTP = null;  
    }  
</script> 
</head> 
<body> 
<div id="_userlogin"><!--动态显示的内容区块,ID值必须与上面的document.getElementById('_userlogin') 中 的_userlogin保持一致--> 
    <form name="userlogin" action="{dede:global.cfg_memberurl/}/index_do.php" method="POST"><!--登陆提交的处理页面--> 
    <input type="hidden" name="fmdo" value="login" /><!--定义操作为login--> 
    <input type="hidden" name="dopost" value="login" /><!--定义操作为login--> 
    <input type="hidden" name="keeptime" value="604800" /><!--记住登陆状态的时间,单位秒--> 
    <ul> 
        <li> 
            <label>用户名:</label><input type="text" name="userid" class="text" style="width:100px"/><!--用户名--> 
        </li> 
        <li> 
            <label>密 码:</label> <input type="password" name="pwd" class="text" style="width:100px"/><!--密码--> 
        </li> 
        <li> 
            <label>验证码:</label><input type="text" name="vdcode" class="text" style="width:40px"/> <img id="vdimgck" align="absmiddle" onClick="this.src=this.src+'?'" style="cursor: pointer; margin-left: 0px;" alt="看不清?点击更换" src="../include/vdimgck.php"/> 
        </li> 
        <li><button type="submit" class="btn-1">登录</button>                  <a href="{dede:global.cfg_memberurl/}/index_do.php?fmdo=user&dopost=regnew" >注册帐号</a> <a href="{dede:global.cfg_memberurl/}/resetpassword.php">忘记密码?</a> </li>       
    </ul> 
</div> 
<script language="javascript" type="text/javascript">CheckLogin();</script><!--本函数必须加载,用于获取上面的function CheckLogin()函数--> 
<style> 
#_userlogin{font-size:12px; height:22px; text-align:left;}  
#_userlogin ul {margin:0;}  
#_userlogin ul li{ list-style:none; margin:0; padding:5px 0;}  
#_userlogin ul li input.text{font-size:12px; height:14px;}  
#_userlogin .userinfo{  
    width:220px;  
}  
#_userlogin .userinfo .welcome{  
    width:220px;  
    height:24px;  
    margin:12px auto;  
    background:#F9F9F9;  
    border-top:1px solid #EEE;  
    border-bottom:1px solid #EEE;  
    line-height:23px;  
    text-indent:10px;  
    color:#666;  
}  
#_userlogin .userinfo .welcome strong{  
    color:#F60;  
    font-weight:bold;  
}  
#_userlogin .userinfo .userface{  
    width:60px;  
    height:64px;  
    overflow:hidden;  
    padding-left:16px;  
    padding-top:2px;  
    float:left;  
}  
#_userlogin .userinfo .userface a{  
    display:block;  
    margin:0px auto;  
    text-align:center;  
}  
#_userlogin .userinfo .userface a img{  
    width:52px;  
    height:52px;  
    display:block;  
    margin:0px auto 6px;  
    padding:2px;  
    border:1px solid #DDD;  
}  
#_userlogin .userinfo .mylink{  
    width:144px;  
    float:left;  
    overflow:hidden;  
}  
#_userlogin .userinfo .mylink ul{  
    margin:0;  
    padding:0;  
}  
#_userlogin .userinfo .mylink ul li{  
    width:50%;  
    float:left;  
    line-height:21px;  
    text-indent:12px;  
    padding:0;  
}  
#_userlogin .userinfo .mylink ul li a{  
    color:#555;   
}  
.userinfo .uclink{  
    height:31px;  
    line-height:31px;  
    clear:both;  
    overflow:hidden;  
    text-align:center;  
    color:#DDD;  
}  
.userinfo .uclink a{  
    color:#690;  
    margin:0px 2px;  
}  
</style> 
</body> 
</html>

    这两种织梦登录框就演示完成了,我们总结一下可以看出,其实就是用的js代码、html代码是内容、css控制样式,所以如果你的模板上的登录样式不一样,你可以通过提取这两种登录框所需要的代码,来做出自己的登录框。
    好了,快去试试吧。
 
QQ在线咨询
QQ客服
淘宝官网