zoukankan html css js c++ java

web登录框，div半透明

目的效果如图：

网上搜索了一上午，终于被我整出来了。

css就可以实现，开始我以为要把效果图直接当背景，通过定位去获取鼠标是否停留在按钮区域。业余的想法终究很业余O(∩_∩)O哈！

贴代码：

<html>
<! Copyright (c) Realtek Semiconductor Corp., 2003. All Rights Reserved. ->
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<style type="text/css">
body {
  background-image: url(background_l.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position: 650px 0px;
}

#background_login{
  background-image: url(backgroundright.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position: 0px 0px;
  background-size: cover;
}

#Log_login{
  float:left
}

    #login-container {
        /*display:none;*/
        width:700px;
        height:300px;
        position:relative;
        border:2px solid #BDBFC1;
        background:rgba(255,255,255,0.6);
        margin:0 auto;
    }
    .login-title {
        width:130px;
        height:50px;
        position:absolute;
        left:20px;
        top:-50px;
        line-height: 100px;
        text-align: center;
        font-weight:bold;
        color:#FF0000;
        background-color:#FFFFFF;
        font-size:18px;
        font-family: arial;
    }
.testbutton_login {
  font-family: arial;
  font-weight: bold;
  color: #000000 !important;
  font-size: 16px;
  box-shadow: 1px 1px 1px #BEE2F9;
  padding: 9px 60px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  border: 2px solid #D9E403;
  background: #D9E403;
  text-decoration:none;
}
.testbutton_login:hover {
  color: #000000 !important;
  background: #D9E403;
}

.testbutton_clear {
  font-family: arial;
  font-weight: bold;
  color: #000000 !important;
  font-size: 16px;
  box-shadow: 1px 1px 1px #BEE2F9;
  padding: 9px 60px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  border: 2px solid #CBCBCB;
  background: #CBCBCB;
  text-decoration:none;
}
.testbutton_clear:hover {
  color: #000000 !important;
  background: #CBCBCB;
}

input {
    margin: 0;
    border: 0px solid rgb(180,180,180);
    border-radius: 6px;
    -webkit-border-radius:6px;
    -moz-border-radius :6px; 
    height:37px;
    width:260px;
    font-size: 14px;
    text-align: left;
}
input:hover {
    border: 1px solid rgb(255, 0, 0);
}
</style>
</head>
<body id="background_login">
<div id="login-container">
   <div class="login-title">LOGIN PAGE</div>
   <br><br><br>
   <table width="500" border="0" align="center" height="240">
     <tr>
       <td height="37">
         <table align="center" style="border-radius:5px;border-top-0px;border:1px solid #B7B7B7; background-color:#DFDFDF" width="450" height="37">
           <tr>
             <td height="37" style="font-family:Arial; font-weight:bold">
               <div align="right">USERNAME&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <input type="text" name="textfield2">
               </div>
             </td>
           </tr>
         </table>
       </td>
     </tr>
     <tr>
       <td height="70">
         <table align="center" style="border-radius:5px;border-top-0px;border:1px solid #B7B7B7; background-color:#DFDFDF" width="450" height="37">
           <tr>
             <td height="37" style="font-family:Arial; font-weight:bold">
               <div align="right">PASSWORD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <input type="text" name="textfield2">
               </div>
             </td>
           </tr>
         </table>
       </td>
     </tr>
     <tr>
       <td><div align="center"><a class="testbutton_login" href="#">LOGIN</a>&nbsp;&nbsp;&nbsp;<a class="testbutton_clear" href="#">CLEAR</a></div></td>
     </tr>
</table>
</div>
<script src="md5.js" type="text/javascript"></script>
    <script type="text/javascript">
        var windowHeight = document.body.clientHeight || window.innerHeight || window.screen.height;
        var containerObj = document.getElementById('login-container');
        var containerHeight = containerObj.clientHeight;
        console.log(containerHeight);
        var marginTop = (windowHeight - containerHeight)/2;
        containerObj.style.marginTop = marginTop + "px";
        // containerObj.style.display="block";
</script>
</body>
</HTML>

查看全文

相关阅读:
项目上线之期初数据调整
 系统升级时，数据库脚本执行注意事项，血的教训
 数据精度问题的处理
 系统发布说明文档
 SQLServer中数据库文件的存放方式，文件和文件组
 数据库的持续集成和版本控制
 SQL Server 远程链接服务器详细配置【转载】
批处理中的IF ERRORLEVEL
asp.net用url重写URLReWriter实现任意二级域名
 关于excel导入access问题(已解决)

原文地址：https://www.cnblogs.com/nullbaby/p/7064716.html