html+css登录界面验证码自适应浏览器

最新推荐文章于 2024-01-13 23:54:18 发布

酸柠涛啊

最新推荐文章于 2024-01-13 23:54:18 发布

阅读量4.2k

点赞数 3

文章标签： html js css

本文链接：https://blog.csdn.net/weixin_44019875/article/details/106349967

版权

1.项目构图## 2.login.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>wisdombank_login</title>
		<link rel="stylesheet" href="css/login.css">
	</head>
	<body>
		<div id="content">
			<div id="login_form">
				<div class="login_title">
					欢迎登录
				</div>
				<form action="" >
					<div id="login_content">
					<br>
					<div><img src="img/user.png" class="icon_btn"></div>
					<input type="text" placeholder="请输入账号" name="username" class="text"/>
					<br>
					<div><img src="img/password.png" class="icon_btn"></div>
					<input type="password" placeholder="请输入密码" name="password" class="text"/>
					<br>	
					<div><img src="img/vercode.png" class="icon_btn"></div>
					<input type="text" placeholder="请输入验证码" name="vcode" id="vcode" />
					<img  id="icode" src="img/code.png" style="margin-top: -10%; margin-left: 55%;" />                	
					<div id="login_passwd">
						<a href="#">忘记密码？</a>
					</div>					
					<input  type="submit" value="登录" class="btn" >
					<br>
					<div id="login_copyright">
						Power By 李洪涛 &copy;CopyRight 2020
					</div>					
					</div>			
				</form>
			</div>
		</div>	
	</body>
</html>

3.login.css

#content{
			    height: 680px;
			    border: solid black;
				margin: 0 auto;
				background-image: url(../img/back.jpg);
				background-repeat:no-repeat;
			    background-size: cover;
}
#login_form{
				width:35%;
				height:400px;
				margin-top: 10%;
				margin-left:60% ; 
				background-color: rgba(0,0,0,0.1);
				
}
#login_form .login_title{
				width: 100%;
				height: 45px;
				color:#ffffff;
				border-bottom:1px solid #ffffff;
				font-size:20pt;
				font-family:"微软雅黑";
				line-height:45px;
				text-align:center;
}
#login_content{
				width:100%;
				height:355px;
				background-color: rgba(0,0,0,0.1);
	
}
#login_content .icon_btn{
	width: 10%;
	height: 10%;
	margin-bottom: -10%;
	margin-left: 2%;
}
#login_content .text{
				display:block;/*设置为独立块（换行）*/
				width:70%;
				margin:0 auto;
				height:35px;
				font-size:15pt;
				border-radius:50px;/*设置圆角样式*/
				border:0;
				padding-left:8px;
			}
#login_content #vcode{
				display:block;/*设置为独立块（换行）*/
				width:30%;
				margin-left: 15%;
				height:35px;
				font-size:15pt;
				border-radius:50px;/*设置圆角样式*/
				border:0;
				padding-left:8px;
			}
			#login_passwd{
				width:70%;
				text-align:right;
				margin:0 auto;
				padding:5px;
			}
			/*层级选择器*/
			#login_passwd a{
				color:#000000;
				text-decoration:none;				
			}
			/*伪类*/
			#login_passwd a:hover{
				color:#ff0000;
				text-decoration:underline;
			}
			.btn{
				width:70%;
				margin-left:15%;
				height:40px;
				border:0;
				font-size:14pt;
				font-family;"微软雅黑";
				background-color:#FC5628;
				color:#ffffff;
				cursor:pointer;/*设置指针鼠标的样式*/
				border-radius:20px;/*设置圆角样式*/
				border:0;
			}	
			#login_copyright{
				width:100%;
				text-align:center;
				padding-top:20px;
				font-family:"微软雅黑";
				color:#e0e0e0;
			}		
@media only screen and (min-width: 400px) {
	
}

4.运行图：

在这里插入图片描述

酸柠涛啊

关注

3
点赞
踩
26

收藏

觉得还不错? 一键收藏
2
评论
html+css登录界面验证码自适应浏览器

1.项目构图## 2.login.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>wisdombank_login</title> <link rel="stylesheet" href="css/login.css"> </head> <body> <div id="content">
复制链接

扫一扫