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-width: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-width: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>

转载于:https://www.cnblogs.com/nullbaby/p/7064716.html

web登录框，div半透明相关推荐

拒绝平庸--浅谈WEB登录页面设计
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...
拒绝平庸——浅谈WEB登录页面设计
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...
拒绝平庸：优秀WEB登录页面设计
@Mr-Koki 关于登陆估计大家每天使用的都很频繁了,每次上网都会习惯性登陆下微博,淘宝,邮箱,空间等,在每天进进出出无数门户的时候有谁又曾在密码不错误的情况下停留在WEB登陆页面看一眼呢?下面就谈 ...
vue登录框半透明写法
<template> <div><div class="background"><img :src="imgSrc" ...
JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
html写登录框中的字,一个登录界面的PS设计和HTML/CSS实现
这样的登录界面可用在网站.桌面软件.Web软件等上面,你可以根据自己的需求改变界面配色.好的,先看看界面最终设计的效果: 1.创建登录界面的背景在Photoshop中,选择"圆角矩形工具& ...
三种方法实现弹出框边框半透明和圆角的效果
发现支付宝的一个充值抽红包的系统里面有个弹出对话框,边框半透明效果,就想着自己做一个弹出对话框效果, 用三种方法实现弹出框边框半透明和圆角的效果 1.用rgba来实现背景半透明,设置内边距 2.设置b ...
百度网盘web登录页-原生js实现
html <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
h5 淘宝web登录注册1:1还原响应式页面源码
可算把淘宝web版本的登录注册页面 1:1的复制过来了,效果图如下 1.账号密码登录 2.短信验证码登录 3.账号注册废话不多说,直接开分享源码. 本次源码仅有html和css,js写在html文件 ...
2020-2-15一个web登录注册小程序与Spring初始+作业
文章目录建立一个Web登录注册小程序 1.先在Mysql数据库中新建一个数据库 2.在IDEA中新建一个工程 3.对项目进行简单分层 4.设计一个实体类 5.引入一个jdbc工具类 6.写一个测试类 ...

web登录框，div半透明

web登录框，div半透明相关推荐

最新文章

热门文章