简单登录界面（HTML+CSS)

最新推荐文章于 2024-05-12 16:02:18 发布

qq阙继婷

最新推荐文章于 2024-05-12 16:02:18 发布

阅读量3.7k

点赞数 5

分类专栏：前端文章标签： html css bootstrap

本文链接：https://blog.csdn.net/qq_40306074/article/details/105788167

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

界面效果图：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
		 <link rel="stylesheet" href="css/iconfont.css" />
		 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
		<style>
			body{
				background: url(img/bg1.png);
				 background-size:100% 100%;	
			}
			#container{
				width: 400px;
				height: 430px;
				border: solid black 1px;
				background-color:#0A4D42;
				opacity:0.75;
				padding-left: 20px;
				padding-right: 20px;
				margin-left: 500px;
				margin-top: 100px;	
			}
			#container_h3{
				text-align: center;
				color: white;
			}
			
			.btn{
				height: 45px;
			}
			
			.input1{
				height: 45px;
			}
			.container2{
				margin-top:20px;
				margin-bottom: 10px;
			}
			.container2 a{
				color: white;
				display: block;
				text-align: right;
			}
			.btn1{
				width: 100%;
				height: 45px;
				font-size: 18px;
				
			}
		</style>
	</head>
	<body>
		<div id="container" >
			<h3 id="container_h3">账户登录</h3>
			<br />
			<div class="input-group">
			      <span class="input-group-btn">
			        <button class="btn btn-default" type="button"><i class="iconfont">&#xe651;</i></button>
			      </span>
			      <input type="text" class="input1 form-control" placeholder="用户名">
		    </div>
		    <br />
		    <div class="input-group">
			      <span class="input-group-btn">
			        <button class="btn btn-default" type="button"><i class="iconfont">&#xe61b;</i></button>
			      </span>
			      <input type="text" class="input1 form-control" placeholder="密码">
		    </div>
		    
		    <div class="container2">
		    	<a href="#">忘记密码？</a>
		    </div>
		    
		     <div>
			     <button class="btn1 btn-warning">登录</button>
		    </div>
		    
		     <div class="container2">
		    	<a href="#">立即注册</a>
		    </div>
		</div>
	</body>
</html>

qq阙继婷

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
简单登录界面（HTML+CSS)

界面效果图：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/boot...
复制链接

扫一扫

专栏目录