Div+Css实现屏蔽效果的登陆窗体

最新推荐文章于 2024-05-20 22:08:52 发布

Terran5

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量979

点赞数

文章标签： div css stylesheet login server border

本文链接：https://blog.csdn.net/terran5/article/details/3111202

版权

 
 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無題のページ</title>
    <link  rel="stylesheet" href="StyleSheet.css" type ="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    
    <script language ="jscript" type ="text/javascript">
    
    function ShowLogin()
    {
     var ele=document.getElementById("loginForm");
     var block=document.getElementById("block");
     ele.style.display="";
     block.style.display="";
    }
    
    function Reset()
    {
         document.getElementById("loginForm").style.display="none";
         document.getElementById("block").style.display="none";
    }
    
//    window.onload=Reset();
        
    </script> 
    
    <div id="loginForm">
        <table>
            <tr>
                <td>
                </td>
                <td>
                    <input type="hidden" value="Login" name="Login" />
                </td>
            </tr>
            <tr>
                <td>
                     用户名：
                </td>
                <td>
                    <input name="userName" />
                </td>
            </tr>
            <tr>
                <td>
                     密码：
                </td>
                <td>
                    <input id="password" name="password" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="登陆" />
                </td>
                <td>
                    <input type="reset" value="取消" onclick="Reset()" />
                </td>
            </tr>
        </table>
    </div>
    <div id="block">
    </div>
    </form>
</body>
</html>
 

 
 /*登陆Form*/
#loginForm
{
     border:solid 1px #AED5FD;
     position:absolute;
     top:35%;
     left:40%;
     z-index:2000;
     background-color:#EAF4FE;
}
/**//*屏蔽Div*/
#block
{
     background-color:#CCCCCC;
      position:absolute;
      top:0px;
      left:0px;
     z-index:1000;
     display:block;
     width:100%;
     height:210%;
    /**//*设置屏蔽div的透明度*/
     filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=true , style=0 , opacity=40); 
  }
 

Terran5

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Div+Css实现屏蔽效果的登陆窗体

%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>html xmlns="http://www.w3.org/1999/xhtml" >head runat="server"> title>無題のページtitle>
复制链接

扫一扫