<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></li>
</ul>
</div>
<script language="javascript" type="text/javascript">CheckLogin();</script><!--本函数必须加载，用于获取上面的function CheckLogin()函数-->
<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>
</html>
通过上面的查看，我们已经知道要美化这个样式，只需要修改 /member/ajax_loginsta.php 文件的代码即可。
我们打开这个文件，将里面的代码全部替换为如下代码：
<?php
require_once(dirname(__FILE__)."/config.php");
AjaxHead();
if($myurl == '')
{
exit('');
}
$uid = $cfg_ml->M_LoginID;
!$cfg_ml->fields['face'] && $face = ($cfg_ml->fields['sex'] == '女')? 'dfgirl' : 'dfboy';
$facepic = emptyempty($face)? $cfg_ml->fields['face'] : $GLOBALS['cfg_memberurl'].'/templets/images/'.$face.'.png';
?>
你好：<strong><?php echo $cfg_ml->M_UserName; ?></strong>，欢迎登录！<a href=http://www.dede58.com/"<?php echo $cfg_memberurl; ?>/guestbook_admin.php">我的留言</a> | <a href=http://www.dede58.com/"<?php echo $cfg_memberurl; ?>/mystow.php">我的收藏</a> | <a href=http://www.dede58.com/"<?php echo $cfg_memberurl; ?>/index.php">会员中心</a> | <a href=http://www.dede58.com/"<?php echo $cfg_memberurl; ?>/edit_fullinfo.php">修改资料</a> | <a href=http://www.dede58.com/"<?php echo $myurl;?>">空间</a> | <a href=http://www.dede58.com/"<?php echo $cfg_memberurl; ?>/index_do.php?fmdo=login&dopost=exit">退出登录</a>
我们也顺道来看一下修改后的效果：
怎么样？大家知道应该如何来制作这个效果了吧。好了，我们再来看看竖向的登录框。
二、竖向登陆
(责任编辑：模板天下)
通过横向登陆的示例，其实我们很容易理解。要做一个竖向登陆的这个效果，只需要将登陆前后的样式分别修改一下即可，不需要修改其它任何功能文件。
这是我修改的竖向登陆的登录前样式：
<!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>