一、横向样式
1.实现过程
第一步：我们首先新建一个空白的默认首页模板（通常为index.htm），并设置为启用状态，然后掏空里面的所有代码。
第二步：然后在<head></head>区域内加入以下代码：
<script language="javascript" type="text/javascript" src=http://www.dede58.com/"{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script>
<script language="javascript" type="text/javascript">
function CheckLogin(){
var taget_obj = document.getElementById('_userlogin');
myajax = new DedeAjax(taget_obj,false,false,'','','');
myajax.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php");
DedeXHTTP = null;
}
</script>
第三步：然后再在<body></body>区域增加如下代码：
<div id="_userlogin">
<form name="userlogin" action="{dede:global.cfg_memberurl/}/index_do.php" method="POST">
<input type="hidden" name="fmdo" value="login" />
<input type="hidden" name="dopost" value="login" />
<input type="hidden" name="keeptime" value="604800" />
<ul>
<li>
<label>用户名：</label> <input type="text" name="userid" class="text" style="width:80px"/>
<li>
<li>
<label>密 码：</label> <input type="password" name="pwd" class="text" style="width:80px"/>
</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=http://www.dede58.com/"../include/vdimgck.php"/>
</li>
<li><button type="submit" class="btn-1">登录</button> <a href=http://www.dede58.com/"{dede:global.cfg_memberurl/}/index_do.php?fmdo=user&dopost=regnew" >注册帐号</a> <a href=http://www.dede58.com/"{dede:global.cfg_memberurl/}/resetpassword.php">忘记密码?</a></li>
</ul>
</div>
<script language="javascript" type="text/javascript">CheckLogin();</script>
<style>
#_userlogin{font-size:12px; height:22px;}
#_userlogin ul {margin:0;}
#_userlogin ul li{ float:left; padding:0 5px;}
#_userlogin ul li input.text{font-size:12px; height:14px;}
</style>
</body>
第四步：代码添加完毕，我们生成首页或者直接浏览动态首页看看效果：
第五步：我们输入正确的账号密码，回到首页的效果图：
到此，我们的横向登陆样式就制作完毕了。
但是很明显，登陆后的样式非常丑陋，我们应该美化一下，但在美化之前我们应该要来了解一下代码中的含义。
2）代码解释
所谓的代码解释就是要让大家能够看得懂，所以大家可以看一下整个页面的注释版代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>首页登陆样式测试 —— 旭日站长织梦教程网（）</title>
<script language="javascript" type="text/javascript" src=http://www.dede58.com/"{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:80px"/><!--用户名-->
<li>
<li>
<label>密 码：</label> <input type="password" name="pwd" class="text" style="width:80px"/><!--密码-->
</li>
<li>