织梦会员登录状态（样式）代码调用方法(3)_dedecms教程_php教程

二、竖向登陆

通过横向登陆的示例，其实我们很容易理解。要做一个竖向登陆的这个效果，只需要将登陆前后的样式分别修改一下即可，不需要修改其它任何功能文件。

这是我修改的竖向登陆的登录前样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>首页登陆样式测试 ——最模板网建站工作室（www.lazybirdfly.com）</title>

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>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<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控制样式，所以如果你的模板上的登录样式不一样，你可以通过提取这两种登录框所需要的代码，来做出自己的登录框。

好了，快去试试吧。

(责任编辑：最模板)