📄 default.aspx

📁 一个很酷的登录界面
💻 ASPX
字号:
<%@ 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 id="Head1" Runat="Server">
    <title>登录</title>
    <style type="text/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;
        }
        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 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;
        }
    </style>
    <link href="login.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
          function $(elem){
             return document.getElementById(elem);
         }
         function Login(isbackDiv){
          if($('floatDiv')==null){
           var floatDiv = document.createElement('div');
           floatDiv.id = "floatDiv"; 
           floatDiv.style.position = "absolute";
           floatDiv.style.width = 300 + "px";
           floatDiv.style.height = 200 + "px";
           floatDiv.style.left =(document.documentElement.clientWidth/2 + document.documentElement.scrollLeft - 150)+"px";
           floatDiv.style.top =(document.documentElement.clientHeight/2 + document.documentElement.scrollTop - 100)+"px";
           floatDiv.style.zIndex  = 1001;
           var loginText = "<iframe id=\"iframe1\" frameborder=\"0\" scrolling=\"no\" src=\"login.aspx\" width=\"100%\" height=\"200\"></iframe>";
           floatDiv.innerHTML = loginText;
           document.body.appendChild(floatDiv);
          }
          else{
           $('floatDiv').style.display = "block";
          }
          if($('backDiv')==null && isbackDiv ==true){
           var backDiv = document.createElement('div');
           backDiv.id = "backDiv";
           backDiv.style.backgroundColor = "Black";
           backDiv.style.filter = "alpha(opacity=70)";
           backDiv.style.MozOpacity = "0.70";
           backDiv.style.position = "absolute";
           backDiv.style.left = "0px";
           backDiv.style.top = "0px";
           backDiv.style.width = Math.max(document.body.scrollWidth, document.documentElement.clientWidth) +"px";
           backDiv.style.height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight)+"px";
           document.body.appendChild(backDiv);
           $('backDiv').style.zIndex = 1000;
          }
          else if(isbackDiv ==true){
           $('backDiv').style.display = "block";
          }  
         }
         function moveDiv(event, elem)
         {
          $('floatDiv').style.filter = "alpha(opacity=50)";
          var oObj = $(elem); 
          oObj.onmousemove = mousemove;
          oObj.onmouseup = mouseup;
          oObj.setCapture ? oObj.setCapture() : function(){};
          oEvent = window.event ? window.event : event;
          var dragData = {x : oEvent.clientX, y : oEvent.clientY};
          var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
          function mousemove()
          {
           var oEvent = window.event ? window.event : event;
           var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
           var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
           oObj.style.left = iLeft;
           oObj.style.top = iTop;
           dragData = {x: oEvent.clientX, y: oEvent.clientY};
          }
          function mouseup()
          {
           var oEvent = window.event ? window.event : event;
           oObj.onmousemove = null;
           oObj.onmouseup = null;
           $('floatDiv').style.filter = "";
           if(oEvent.clientX < 1 || oEvent.clientY < 1)
           {
            oObj.style.left = backData.y;
            oObj.style.top = backData.x;
           }
            oObj.releaseCapture ? oObj.releaseCapture() : function(){};
          }
         }
         function CloseFloatDiv(){
          $('floatDiv').style.display = "none";
          if($('backDiv')){
           $('backDiv').style.display = "none";
          }
         }
    </script>
</head>
<body style="margin: 0 0 0 0;">
<form id="form1" Runat="Server">
    <div id="loginform"><a href="#" onclick="javascript:Login(true);">用户登陆</a></div>
</form>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -