大家都知道,很多博客或网站都有一个点击弹出登陆窗口的功能,非常漂亮。本文就介绍一下制作方法。
首先在你需要显示用户登陆的地方添加以下代码:
其中javascript:Login()中的参数是控制是否有背景层的,ture是有背景层,false是无背景层。
然后编写css代码:
/*---------- 用户登陆*/
* {
padding: 0px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
html, body{
text-align: center;
width: 100%;
font-size: 12px;
}
a:link, a:visited {
text-decoration: none;
}
a:hover{
text-decoration:underline;
}
ul {
list-style: none;
}
img {
border: 0px;
vertical-align:middle;
}
#loginform{
display:inline;
}
#loginform span a{
color:#FF0000;
font-weight:bold;
}
#floatDiv {
background: #EEF7FE;
border: 1px #B8D2F5 solid;
}
#headDiv{
height:30px;
background-color:#E9F1FC;
cursor:move;
}
#headDiv h3{
font-size: 14px;
font-weight: bold;
color: #1A73C5;
float:left;
text-indent:10px;
line-height:30px;
}
#headDiv span {
margin-right:6px;
margin-top:7px;
float:right;
}
#bodyDiv {
margin:0px 6px 6px 6px;
padding:10px;
background: #FFF;
border: 1px #D9E9F9 solid;
clear:both;
line-height:32px;
}
#bodyDiv a{
color:#666;
}
#bodyDiv ul{
width:200px;
color:#1973C1;
margin-bottom:6px;
vertical-align:middle;
}
#bodyDiv .tbx{
border:1px #B7D1F4 solid;
width:125px;
height:18px;
}
#bodyDiv .code{
border:1px #B7D1F4 solid;
width:60px;
height:18px;
}
#bodyDiv .submit{
width:58px;
height:19px;
border:0px;
background:url(images/login.gif) no-repeat;
}
接着用JavaScript来生成一个id为floatDiv的层,您也可以事先在html中写好代码了,然后把它隐藏,在调用的时候把它显示出来就行了,这样做比较简单一点。但是在这里我们采用第JavaScript生成的方法。代码如下:
之后在想要登陆的地方放上以上代码即可。
讲的不错。。对新手用处很大
怎么改进一下才能实现,打开某链接时要求验证登陆。我试了一下这个把#号换成链接就不行了,要怎么做呢?谢谢
怎么只能是用#号啊,换别的链接就不行了。怎么才能做到在打开某链接时要求验证登陆呢?