透明登录界面的简单实现

最新推荐文章于 2024-06-05 23:56:34 发布

Leonarode

最新推荐文章于 2024-06-05 23:56:34 发布

阅读量8.1k

点赞数 7

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42321336/article/details/99645800

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.直接上效果图：
在这里插入图片描述
不同浏览器兼容不同，效果有差异。
2.源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>透明登录界面</title>
		<style type="text/css">
			body {
				width: 800px;
				height: 520px;
			    background-image: url("img/back.jpg");;
			    background-repeat: no-repeat;
			}
			 
			#login_frame {
			    width: 400px;
			    height: 260px;
			    padding: 13px;
			    position: absolute;
			    left: 40%;
				right: 50%;
			    top: 60%;
				margin-bottom: 50%;
			    margin-left: -100px;
			    margin-top: -200px;
			 
			    background-color: rgba(240, 255, 255, 0.25);
			 
			    border-radius: 10px;
			    text-align: center;
			}
			 
			
			 
			 
			
			 
			.text_class {
			    width: 280px;
			    height: 26px;
				border-top-left-radius: 5px;
			    border-top-right-radius: 5px;
			    border-bottom-right-radius: 5px;
			    border: 0;
			}
			 
			#btn_login {
			    font-size: 14px;
			    font-family: 宋体;
			 
			    width: 120px;
			    height: 28px;
			    line-height: 28px;
			    text-align: center;
			 
			    color: white;
			    background-color: #3BD9FF;
			    border-radius: 6px;
			    border: 0;
				
			    float: 160px;
			}
			#btn_regis {
			    font-size: 14px;
			    font-family: 宋体;
			    width: 120px;
			    height: 28px;
			    line-height: 28px;
			    text-align: center;
			    color: white;
			    background-color: #3BD9FF;
			    border-radius: 6px;
			    border: 0;
				
			    float: 160px;
		
			 
			 
			#forget_pwd:hover {
			    color: blue;
			    text-decoration: underline;
			}
			 
			#login_control {
			    padding: 0 28px;
			
			}
		</style>
	</head>
	<body>
		<div id ="login_frame">
			<from method ="post" action="login.js">
				<div>
					<p>账号  <input type="text" id="username" placeholder="请输入用户名" class="text_class"></lable></p>
				</div>
				
				<div
					<p>密码  <input type="text" id="password" placeholder="请输入密码" class="text_class"></lable></p>
				</div>
				
				
				<div id="login_control">
					<input type="button" id="btn_login" value="登录" οnclick="login();"/>

					<input type="button" id="btn_regis" value="注册" οnclick="login();"/>
				</div>	
        </div>


			</from>
		</div>
	</body>
</html>

希望对你有帮助！

Leonarode

关注

7
点赞
踩
43

收藏

觉得还不错? 一键收藏
1
评论
透明登录界面的简单实现

1.直接上效果图：不同浏览器兼容不同，效果有差异。2.源码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>透明登录界面</title> <style type="text/css"> body { wi...
复制链接

扫一扫