DEDE5.7首页会员横排登录代码

时间:2013-12-26

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

  DEDE5.7首页会员横排登录代码 教程

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

  首先在indexhtml中删掉原来的登陆代码在头部文件headhtml加入以下新的代码

<div class="header_top">
 <div class="w center">
  <span class="time" id="time">
<table border="" align="center" >
<tr><td>
<div id="_userlogin">
<div class="userlogin">
<form name="userlogin" action="{dede:globalcfg_memberurl/}/index_dophp" method="POST">
<input type="hidden" name="fmdo" value="login" />
<input type="hidden" name="dopost" value="login" />
<input type="hidden" name="keeptime" value="" />
<div class="fb">用户名:<input type="text" name="userid" size="" class="ipttxt" />
密码:<input type="password" name="pwd" size="" class="ipttxt" />
验证码:<input type="text" name="vdcode" size="" class="ipttxt" />
<img align="center" src="{dede:globalcfg_cmsurl/}/include/vdimgckphp" />

  <button type="submit" class="btn">登录</button>
<a href="{dede:globalcfg_memberurl/}/index_dophp?fmdo=user& dopost=regnew">注册帐号</a> <a href="{dede:globalcfg_memberurl/}/resetpasswordphp">忘记密码?</a>
</form>
</div>
</div>
<! /userlogin >
<script language="javascript" type="text/javascript">CheckLogin();</script>
</td></tr></table>

  </span>
  <div class="toplinks"><a href=""onclick="thisstylebehavior=url(#default#homepage); thissetHomePage({dede:globalcfg_basehost/});">设为首页</a> | <a href="javascript:windowexternalAddFavorite({dede:globalcfg_basehost/}{dede:globalcfg_webname /})">加入收藏</a> | <a href="{dede:globalcfg_cmsurl/}/data/sitemaphtml" target="_blank">网站导航</a> | <a href="联系我们</a></div>
 </div>
</div>

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

/* head */
header{
 width:%;
 width:px;
 margin:auto;
 overflow:hidden;
}
header_top{
 height:px!important;
 height:px;
 lineheight:px;
 color:#;
 overflow:hidden;
    background:url(/images/top_bggif) repeatx;
}
center{
 margin:px auto;
}
w{
 width:px;
 /*position:relative;*/
}
header_top time{
 float:left;
 paddingleft:px;
}
header_top toplinks{
 float:right;
 textalign:right;
}
header_top toplinks a{
 margin: px;
}
header top{
 clear:both;
 overflow:hidden;
 margintop:px;
}
header title{
 float:left;
}
header title h a{
 width:px;
 height:px;
 display:block;
 overflow:hidden;
}
header banner{
 width:px;
 height:px;
 float:right;
 marginleft:px;
 overflow:hidden;
}
ipttxt{
 width:px;
 border:px #CFCFCF solid;
}
fb{
 color:#;
}
btn{
 background: url("/images/commbtgif") norepeat scroll transparent;
    border: medium none;
    color: #;
    cursor: pointer;
    height: px;
    letterspacing: px;
    lineheight: px;
    overflow: hidden;
    width: px;
}

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

<script language="javascript" type="text/javascript" src="{dede:globalcfg_cmsurl/}/include/dedeajaxjs"></script> 
<script language="javascript" type="text/javascript">
<!
    $(function(){
        $("a[_for]")mouseover(function(){
            $(this)parents()children("a[_for]")removeClass("thisclass")parents()children("dd")hide();
            $(this)addClass("thisclass")blur();
            $("#"+$(this)attr("_for"))show();
        });
        $("a[_for=uc_member]")mouseover();
        $("a[_for=flink_]")mouseover();
    });
   
    function CheckLogin(){
      var taget_obj = documentgetElementById(_userlogin);
      myajax = new DedeAjax(taget_objfalsefalse);
      myajaxSendGet("{dede:globalcfg_cmspath/}/member/ajax_loginstaphp");
      DedeXHTTP = null;
    }
>
</script>

  现在都全了再看看效果

  下在是CSS中出现的图片

  下载地址DEDE横向登入图片zip

上一条:DEDE的搜索页面支持dede标签的操作方法 下一条:dede在首页调用文章页全部内容的方法

相关文章

最新文章