潜力无限 發表於 2023-10-11 00:00:00

dedecms实现首页顶部会员登陆框的方法

<p>很多做网站的人在做门户资讯网站的时候，都喜欢在首页顶部的位置来个横向的会员登陆。而dede的会员登陆则是在右边的。那到底要如何来实现这个功能呢？请先看效果图。<br/>&nbsp;&lt;img title=&quot;dedecms实现首页顶部会员登陆框的方法&quot; alt=&quot;dedecms实现首页顶部会员登陆框的方法&quot; src=&quot;/uploads/img/202305/0ba5bf2016021a9f1f3f6c942e43e500.jpg&quot; style=&quot;max-width:100%!important;height:auto!important;border: 1px solid rgb(204, 204, 204); vertical-align: middle; padding: 1px; overflow: hidden; max-width: 696px; &nbsp;font-size: 14px; width: 600px; height: 21px;&#39;&gt;<br/>下面我们来一步一步修改！&nbsp;<br/>首先在index.html中删掉原来的登陆代码，在头部文件head.html加入以下新的代码：&nbsp;</p><pre class="brush:html;toolbar:false">&lt;div&nbsp;class=&quot;header_top&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;w960&nbsp;center&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;&lt;br/&gt;&lt;span&nbsp;class=&quot;time&quot;&nbsp;id=&quot;time&quot;&gt;&amp;nbsp;&lt;br/&gt;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;table&nbsp;border=&quot;0&quot;&nbsp;align=&quot;center&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&nbsp;class=&quot;firstRow&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;_userlogin&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;userlogin&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;form&nbsp;name=&quot;userlogin&quot;&nbsp;action=&quot;{dede:global.cfg_memberurl/}/index_do.php&quot;&nbsp;method=&quot;POST&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;&lt;br/&gt;&lt;input&nbsp;type=&quot;hidden&quot;&nbsp;name=&quot;fmdo&quot;&nbsp;value=&quot;login&quot;/&gt;&amp;nbsp;&lt;br/&gt;&lt;input&nbsp;type=&quot;hidden&quot;&nbsp;name=&quot;dopost&quot;&nbsp;value=&quot;login&quot;/&gt;&amp;nbsp;&lt;br/&gt;&lt;input&nbsp;type=&quot;hidden&quot;&nbsp;name=&quot;keeptime&quot;&nbsp;value=&quot;604800&quot;/&gt;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;fb&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名:&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;userid&quot;&nbsp;size=&quot;18&quot;&nbsp;class=&quot;ipt-txt&quot;/&gt;&amp;nbsp;&lt;br/&gt;
        密码:&lt;input&nbsp;type=&quot;password&quot;&nbsp;name=&quot;pwd&quot;&nbsp;size=&quot;18&quot;&nbsp;class=&quot;ipt-txt&quot;/&gt;&amp;nbsp;&lt;br/&gt;
        验证码:&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;vdcode&quot;&nbsp;size=&quot;8&quot;&nbsp;class=&quot;ipt-txt&quot;/&gt;&amp;nbsp;&lt;br/&gt;&lt;img&nbsp;style=&quot;max-width:100%!important;height:auto!important;&quot;&nbsp;align=&quot;center&quot;&nbsp;src=&quot;{dede:global.cfg_cmsurl/}/include/vdimgck.php&quot;/&gt;&amp;nbsp;&lt;br/&gt;&lt;button&nbsp;type=&quot;submit&quot;&nbsp;class=&quot;btn-1&quot;&gt;登录&lt;/button&gt;&amp;nbsp;&lt;br/&gt;&lt;a&nbsp;href=&quot;{dede:global.cfg_memberurl/}/index_do.php?fmdo=user&amp;dopost=regnew&quot;&gt;注册帐号&lt;/a&gt;&nbsp;&lt;a&nbsp;href=&quot;{dede:global.cfg_memberurl/}/resetpassword.php&quot;&gt;忘记密码?&lt;/a&gt;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&amp;nbsp;&lt;br/&gt;&lt;!--&nbsp;/userlogin&nbsp;--&gt;&amp;nbsp;&lt;br/&gt;
        &amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tbody&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/table&gt;&amp;nbsp;&lt;br/&gt;&lt;/span&gt;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;toplinks&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href&nbsp;onclick=&quot;this.style.behavior=&amp;#39;url(#default#homepage)&amp;#39;;this.setHomePage(&amp;#39;{dede:global.cfg_basehost/}&amp;#39;);&quot;&gt;设为首页&lt;/a&gt;&nbsp;|&nbsp;&lt;a&nbsp;href=&quot;javascript:window.external.AddFavorite(&#39;{dede:global.cfg_basehost/}&#39;,&#39;{dede:global.cfg_webname/}&#39;)&quot;&gt;加入收藏&lt;/a&gt;&nbsp;|&nbsp;&lt;a&nbsp;href=&quot;{dede:global.cfg_cmsurl/}/data/sitemap.html&quot;&nbsp;target=&quot;_blank&quot;&gt;网站导航&lt;/a&gt;&nbsp;|&nbsp;&lt;a&nbsp;href=&quot;#&quot;&gt;联系我们&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&amp;nbsp;&lt;br/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&amp;nbsp;&lt;br/&gt;
&lt;/div&gt;</pre><p><br/>HTML代码现在我们已经有了，下面把上面代码中用到的CSS样式完善了：&nbsp;</p><p class="msgborder" style="margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; "><br/>
        /*---------- head ---------*/&nbsp;<br/>
        .header{&nbsp;<br/>
        width:100%;&nbsp;<br/>
        width:960px;&nbsp;<br/>
        margin:auto;&nbsp;<br/>
        overflow:hidden;&nbsp;<br/>
        }&nbsp;<br/>
        .header_top{&nbsp;<br/>
        height:32px!important;&nbsp;<br/>
        height:31px;&nbsp;<br/>
        line-height:32px;&nbsp;<br/>
        color:#676767;&nbsp;<br/>
        overflow:hidden;&nbsp;<br/>
        background:url(../images/top_bg.gif) repeat-x;&nbsp;<br/>
        }&nbsp;<br/>
        .center{&nbsp;<br/>
        margin:0px auto;&nbsp;<br/>
        }&nbsp;<br/>
        .w960{&nbsp;<br/>
        width:960px;&nbsp;<br/>
        /*position:relative;*/&nbsp;<br/>
        }&nbsp;<br/>
        .header_top .time{&nbsp;<br/>
        float:left;&nbsp;<br/>
        padding-left:10px;&nbsp;<br/>
        }&nbsp;<br/>
        .header_top .toplinks{&nbsp;<br/>
        float:right;&nbsp;<br/>
        text-align:right;&nbsp;<br/>
        }&nbsp;<br/>
        .header_top .toplinks a{&nbsp;<br/>
        margin:0 5px;&nbsp;<br/>
        }&nbsp;<br/>
        .header .top{&nbsp;<br/>
        clear:both;&nbsp;<br/>
        overflow:hidden;&nbsp;<br/>
        margin-top:10px;&nbsp;<br/>
        }&nbsp;<br/>
        .header .title{&nbsp;<br/>
        float:left;&nbsp;<br/>
        }&nbsp;<br/>
        .header .title h1 a{&nbsp;<br/>
        width:386px;&nbsp;<br/>
        height:58px;&nbsp;<br/>
        display:block;&nbsp;<br/>
        overflow:hidden;&nbsp;<br/>
        }&nbsp;<br/>
        .header .banner{&nbsp;<br/>
        width:434px;&nbsp;<br/>
        height:55px;&nbsp;<br/>
        float:right;&nbsp;<br/>
        margin-left:20px;&nbsp;<br/>
        overflow:hidden;&nbsp;<br/>
        }&nbsp;<br/>
        .ipt-txt{&nbsp;<br/>
        width:100px;&nbsp;<br/>
        border:1px #CFCFCF solid;&nbsp;<br/>
        }&nbsp;<br/>
        .fb{&nbsp;<br/>
        color:#333333;&nbsp;<br/>
        }&nbsp;<br/>
        .btn-1{&nbsp;<br/>
        background: url(&quot;../images/comm-bt.gif&quot;) no-repeat scroll 0 0 transparent;&nbsp;<br/>
        border: medium none;&nbsp;<br/>
        color: #585858;&nbsp;<br/>
        cursor: pointer;&nbsp;<br/>
        height: 24px;&nbsp;<br/>
        letter-spacing: 1px;&nbsp;<br/>
        line-height: 25px;&nbsp;<br/>
        overflow: hidden;&nbsp;<br/>
        width: 70px;&nbsp;<br/>
        }&nbsp;</p><p><br/>HTML代码和CSS都有了，现在显示是没问题了，但要正常登入，还少一些JS文件要加载：&nbsp;</p><p class="msgborder" style="margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; "><br/>
        &nbsp;<br/>
        &nbsp;</p>
頁: [1]
查看完整版本: dedecms实现首页顶部会员登陆框的方法