您现在的位置是:首页 > 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

本文标签:

很赞哦! ()

相关源码

  • (自适应)WordPress二次元博客主题SakurairoSakurairo主题为二次元内容创作者设计,提供丰富的动漫风格元素和个性化的展示效果。该主题在原有Sakura主题基础上进行了功能增强,支持多种自定义设置,满足动漫爱好者建立个人博客的需求。查看源码
  • (自适应响应式)超市仓储仓库货架展架网站pbootcms源码下载本模板为货架展架、仓储货架行业量身打造,采用PbootCMS内核开发,充分考虑了货架产品展示和企业形象展示的需求。模板设计简洁大方,突出产品特点,能够有效展示各类货架产品的规格参数和应用场景,帮助访客快速了解企业核心业务和产品优势。查看源码
  • 帝国cms7.2淘宝客导购自媒体博客网站模板源码本模板基于帝国CMS7.2内核深度开发,为淘宝客、商品导购类自媒体及博客网站设计。通过可视化后台管理,可快速搭建具备商品推荐、比价功能的内容平台,帮助用户实现流量高效转化。查看源码
  • (自适应响应式)绿色环保材料设备科技类营销型网站pbootcms源码下载本模板基于PbootCMS开发,主要面向环保设备、环保材料及相关科技企业。采用HTML5+CSS3技术构建,具备响应式特性,确保在各类设备上均有良好展示效果。查看源码
  • (自适应)科技产品设备技术作品pbootcms网站模板带下载和招聘基于PbootCMS内核开发的高端科技企业模板,采用响应式布局技术,适配各类移动终端设备。模板设计聚焦科技行业特性,通过模块化结构实现企业形象展示、技术成果发布与人才招募等核心需求查看源码
  • (自适应响应式)绿色环保防腐木材轻钢别墅建材pbootcms模板下载本模板为环保防腐木材、轻钢别墅建材类企业设计开发,基于PbootCMS内核构建,充分考虑了建材行业的展示需求与产品特点。模板设计风格自然环保,布局清晰合理,呈现建材产品特性与专业优势,帮助访客直观了解产品特点并建立信任感。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐