很多做网站的人在做门户资讯网站的时候，都喜欢在首页顶部的位置来个横向的会员登岸。而dede的会员登岸则是在右边的。那到底要如何来实现这个功能呢？请先看效果图。

下面我们来一步一步修改！

首先在index.html中删失落原来的登岸代码，在头部文件head.html插手以下新的代码：

<div class="header_top"><div class="w960 center"> <span class="time" id="time"><table border="0" align="center" ><tr><td><div id="_userlogin"><div class="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" /><div class="fb">用户名:<input type="text" name="userid" size="18" class="ipt-txt" />密码:<input type="password" name="pwd" size="18" class="ipt-txt" />验证码:<input type="text" name="vdcode" size="8" class="ipt-txt" /><img align="center" src="{dede:global.cfg_cmsurl/}/include/vdimgck.php" />

<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></form></div></div><!-- /userlogin --><script language="javascript" type="text/javascript">CheckLogin();</script></td></tr></table>

</span> <div class="toplinks"><a href=""onclick="this.style havior='url(#default#homepage)';this.setHomePage('{dede:global.cfg_basehost/}');">设为首页</a> | <a href="javascript:window.external.AddFavorite('{dede:global.cfg_basehost/}','{dede:global.cfg_webname/}')">插手收藏</a> | <a href="{dede:global.cfg_cmsurl/}/data/sitemap.html" target="_blank">网站导航</a> | <a href=".56mp">联系我们</a></div></div></div>

HTML代码现在我们已经有了，下面把上面代码中用到的CSS样式完善了：

/*---------- head ---------*/.header{width:100%;width:960px;margin:auto;overflow:hidden;}.header_top{height:32px!important;height:31px;line-height:32px;color:#676767;overflow:hidden; background:url(../images/top_bg.gif) repeat-x;} {margin:0px auto;}.w960{width:960px;/*position:relative;*/}.header_top .time{float:left;padding-left:10px; }.header_top links{ float:right;text-align:right;}.header_top links a{margin:0 5px;}.header {clear:both;overflow:hidden;margin-top:10px;}.header .title{float:left;}.header .title h1 a{width:386px;height:58px;display:block;overflow:hidden;}.header .banner{width:434px;height:55px;float:right;margin-left:20px;overflow:hidden;}.ipt-txt{width:100px;border:1px #CFCFCF solid;}.fb{color:#333333;}.btn-1{background: url("../images/comm-bt.gif") no-repeat scroll 0 0 transparent; border: medium none; color: #585858; cursor: pointer; height: 24px; letter-spacing: 1px; line-height: 25px; overflow: hidden; width: 70px;}

HTML代码和CSS都有了，现在显示是没问题了，但要正常登入，还少一些JS文件要加载：

<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script> <script language="javascript" type="text/javascript"><!-- $(function(){ $("a[_for]").mou搜索引擎优化ver(function(){ $(this).parents().children("a[_for]").removeClass("thisclass").parents().children("dd").hide(); $(this).addClass("thisclass").blur(); $("#"+$(this).attr("_for")) (); }); $("a[_for=uc_member]").mou搜索引擎优化ver(); $("a[_for=flink_1]").mou搜索引擎优化ver(); }); 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>

现在都全了，再看看效果。

下在是CSS中呈现的图片

下载地址：DEDE5.7横向登入图片.zip

原创文章如转载，请注明：转载自逸诚科技

本文链接：.56mp/post/108.html