您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程

dedecms5.7首页会员横排登录代码修改实例

盼山2023-10-06DedeCMS教程已有人查阅

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

很多做网站的人在做门户资讯网站的时候都喜欢在首页顶部的位置来个横向的会员登陆而dede的会员登陆则是在右边的那到底要如何来实现这个功能呢?
下面我们来一步一步修改!
首先在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

本文标签:

很赞哦! ()

相关源码

  • (自适应响应式)教育培训机构集团网站pbootcms源码下载本模板基于PbootCMS系统开发,为教育培训机构设计,特别适合展示课程体系、师资团队和教学成果。采用响应式技术,确保在各类设备上都能提供良好的浏览体验。查看源码
  • (自适应)绿色新闻生活百科资讯文章博客类网站pbootcms模板源码本模板基于PbootCMS开发,为生活百科、资讯文章和博客类网站设计。采用清新绿色系风格,提供舒适的阅读体验,同时适配PC和移动设备。适用于生活技巧分享、健康知识传播查看源码
  • 自适应建材瓷砖卫浴大理石类pbootcms网站模板源码下载为建材瓷砖、卫浴瓷砖企业打造的高端响应式门户模板,基于PbootCMS内核深度开发。采用前沿HTML5自适应架构,无缝兼容手机端触控交互与PC端展示场景。查看源码
  • (自适应)简繁双语响应式服装服饰西装工装校服定制pbootcms模板本模板基于PbootCMS内核开发,为服装服饰行业量身打造,尤其适合西装定制、工装生产、校服订制等服装类企业使用。模板采用响应式布局设计,确保在手机、平板、电脑查看源码
  • (自适应)个人图集图片相册画册pbootcms网站模板源码本模板基于PbootCMS系统开发,为图片展示类网站设计,特别适合个人作品集、摄影画册、艺术图集等内容展示。采用响应式布局技术,确保各类图片在不同设备上查看源码
  • (自适应手机端)英文外贸电子产品通用pbootcms模板源码下载为电子产品外贸企业设计的响应式网站模板,采用PbootCMS开发内核,支持多语言展示。模板默认集成产品展示系统、询价表单模块和企业资质展示区,满足跨境贸易基础需求。整站采用模块化设计,便于扩展业务场景。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐