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

天外飘仙

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

下面我们来一步一步修改！
首先在index.html中删掉原来的登陆代码，在头部文件head.html加入以下新的代码：

复制代码代码如下:

1. <div class="header_top">
   
2. <div class="w960 center">
   
3. <span class="time" id="time">
   
4. <table border="0" align="center" >
   
5. <tr><td>
   
6. <div id="_userlogin">
   
7. <div class="userlogin">
   
8. <form name="userlogin" action="{dede:global.cfg_memberurl/}/index_do.php" method="POST">
   
9. <input type="hidden" name="fmdo" value="login" />
   
10. <input type="hidden" name="dopost" value="login" />
    
11. <input type="hidden" name="keeptime" value="604800" />
    
12. <div class="fb">用户名:<input type="text" name="userid" size="18" class="ipt-txt" />
    
13. 密码:<input type="password" name="pwd" size="18" class="ipt-txt" />
    
14. 验证码:<input type="text" name="vdcode" size="8" class="ipt-txt" />
    
15. <img align="center" src="{dede:global.cfg_cmsurl/}/include/vdimgck.php" />
    
16. <button type="submit" class="btn-1">登录</button>
    
17. <a href="{dede:global.cfg_memberurl/}/index_do.php?fmdo=user&dopost=regnew">注册帐号</a> <a href="{dede:global.cfg_memberurl/}/resetpassword.php">忘记密码?</a>
    
18. </form>
    
19. </div>
    
20. </div>
    
21. <!-- /userlogin -->
    
22. <script language="javascript" type="text/javascript">CheckLogin();</script>
    
23. </td></tr></table>
    
24. </span>
    
25. <div class="toplinks"><a href=""onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('{dede:global.cfg_basehost/}');">[url=http://bbs.piaoxian.net/thread-76924-1-1.html]设为首页[/url]</a> | <a href="javascript:window.external.AddFavorite('{dede:global.cfg_basehost/}','{dede:global.cfg_webname/}')">[url=http://bbs.piaoxian.net/thread-76924-1-1.html]加入收藏[/url]</a> | <a href="{dede:global.cfg_cmsurl/}/data/sitemap.html" target="_blank">网站导航</a></div>
    
26. </div>
    
27. </div>
    
28. 
    
29. HTML代码现在我们已经有了，下面把上面代码中用到的CSS样式完善了：
    
30. 
    
31. 代码如下:
    
32. 
    
33. /*---------- head ---------*/
    
34. .header{
    
35. width:100%;
    
36. width:960px;
    
37. margin:auto;
    
38. overflow:hidden;
    
39. }
    
40. .header_top{
    
41. height:32px!important;
    
42. height:31px;
    
43. line-height:32px;
    
44. color:#676767;
    
45. overflow:hidden;
    
46. background:url(../images/top_bg.gif) repeat-x;
    
47. }
    
48. .center{
    
49. margin:0px auto;
    
50. }
    
51. .w960{
    
52. width:960px;
    
53. /*position:relative;*/
    
54. }
    
55. .header_top .time{
    
56. float:left;
    
57. padding-left:10px;
    
58. }
    
59. .header_top .toplinks{
    
60. float:right;
    
61. text-align:right;
    
62. }
    
63. .header_top .toplinks a{
    
64. margin:0 5px;
    
65. }
    
66. .header .top{
    
67. clear:both;
    
68. overflow:hidden;
    
69. margin-top:10px;
    
70. }
    
71. .header .title{
    
72. float:left;
    
73. }
    
74. .header .title h1 a{
    
75. width:386px;
    
76. height:58px;
    
77. display:block;
    
78. overflow:hidden;
    
79. }
    
80. .header .banner{
    
81. width:434px;
    
82. height:55px;
    
83. float:right;
    
84. margin-left:20px;
    
85. overflow:hidden;
    
86. }
    
87. .ipt-txt{
    
88. width:100px;
    
89. border:1px #CFCFCF solid;
    
90. }
    
91. .fb{
    
92. color:#333333;
    
93. }
    
94. .btn-1{
    
95. background: url("../images/comm-bt.gif") no-repeat scroll 0 0 transparent;
    
96. border: medium none;
    
97. color: #585858;
    
98. cursor: pointer;
    
99. height: 24px;
    
100. letter-spacing: 1px;
     
101. line-height: 25px;
     
102. overflow: hidden;
     
103. width: 70px;
     
104. }

复制代码

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

代码如下:

1. <script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script>
   
2. <script language="javascript" type="text/javascript">
   
3. <!--
   
4. $(function(){
   
5. $("a[_for]").mouseover(function(){
   
6. $(this).parents().children("a[_for]").removeClass("thisclass").parents().children("dd").hide();
   
7. $(this).addClass("thisclass").blur();
   
8. $("#"+$(this).attr("_for")).show();
   
9. });
   
10. $("a[_for=uc_member]").mouseover();
    
11. $("a[_for=flink_1]").mouseover();
    
12. });
    
13. function CheckLogin(){
    
14. var taget_obj = document.getElementById('_userlogin');
    
15. myajax = new DedeAjax(taget_obj,false,false,'','','');
    
16. myajax.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php");
    
17. DedeXHTTP = null;
    
18. }
    
19. -->
    
20. </script>

复制代码