简单的html登录页面

编程知识行业动态更新时间:2024-06-13 00:17:57

这篇主要给大家介绍好看的HTML登录页面，代码简洁，具有一定的价值，希望大家用到（♥可以大家在浏览的时候不兼容，这根据具体的情况改一下代码♥）。

个人博客：♥默一♥
浏览效果链接：
http://tingfeng77521.xyz/1.html

效果图如下

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<title>默一博客</title>
<style type="text/css">
*{
	padding:0;
	margin:0;
}
html{
	height:100%;
	}
body{
	height:100%;
	}
.kuangjia{
	height:100%;
	background-image: linear-gradient(to right, #FED0FC, #63D1EC);
	overflow:auto;
	}
.gujia{
	height:800px;
	width:1200px;

	border-radius:20px;
	position:relative;
	margin:80px auto;
	}
.huanying{
	height: 200px;
	width: 1200px;
	font-size: 144px;
	padding-top: 50px;
	text-align: center;
	}
.kaishi{
	height:80px;
	width:1200px;
	font-size:36px;
	padding-top:20px;
	text-align:right;
	}
.denglu{
	height:100px;
	width:700px;
	float:left;
	margin-left:50px;
	margin-top:50px;
	font-size:30px;
	border-radius:20px;
	position:relative;
	border: 0;
	border-bottom: 1px solid rgb(128, 125, 125);
	outline:none;
	display:block;
	}
.zouni{
	height: 80px;
	width: 200px;
	float: right;
	background: #FFF;
	margin-right: 150px;
	margin-left: 50px;
	margin-top: 50px;
	font-size: 36px;
	text-decoration:none;
	padding-top:22px;
	border-radius: 20px;
	position: relative;
	border: 0;
	border-bottom: 1px solid rgb(128,125,125);
	outline: none;
	display: block;
	text-align: center;
	}
</style>
</head>
<body>
<div class="kuangjia">
  <div class="gujia">
       <div class="huanying">Welcome</div>
    <div class="kaishi">Let's have a good day from now on!</div>
       <input name="Account number" type="text" class="denglu" placeholder="Account number" size="3" maxlength="8">
    <a class="zouni" href="https://blog.csdn/weixin_59064057">Anter</a>
    </div>
</div>
</body>
</html>