div+css实现简洁自适应登录注册表单页面代码-html代码-BFW代码库

div+css实现简洁自适应登录注册表单页面代码

代码语言：html

代码描述：div+css实现简洁自适应登录注册表单页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
        
	*,*:after,*:before {
	box-sizing:border-box
}
body {
	font-family:"DM Sans",sans-serif;
	line-height:1.5;
	background-color:#f1f3fb;
	padding:0 2rem
}
img {
	max-width:100%;
	display:block
}
input {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border-radius:0
}
.card {
	margin:2rem auto;
	display:-webkit-box;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	flex-direction:column;
	width:100%;
	max-width:425px;
	background-color:#FFF;
	border-radius:10px;
	box-shadow:0 10px 20px 0 rgba(153,153,153,0.25);
	padding:.75rem
}
.card-image {
	border-radius:8px;
	overflow:hidden;
	padding-bottom:65%;
	background-image:url("//repo.bfw.wiki/bfwrepo/image/6466d96ec6742.png");
	background-repeat:no-repeat;
	background-size:150%;
	background-position:0 5%;
	position:relative
}
.card-heading {
	position:absolute;
	left:10%;
	top:15%;
	right:10%;
	font-size:1.75rem;
	font-weight:700;
	color:#735400;
	line-height:1.222
}
.card-heading small {
	display:block;
	font-size:.75em;
	font-weight:400;
	margin-top:.25em
}
.card-form {
	padding:2rem 1rem 0
}
.input {
	display:-webkit-box;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:reverse;
	flex-direction:column-reverse;
	position:relative;
	padding-top:1.5rem
}
.input+.input {
	margin-top:1.5rem
}
.input-label {
	color:#8597a3;
	position:absolute;
	top:1.5rem;
	-webkit-transition:.25s ease;
	transition:.25s ease
}
.input-field {
	border:0;
	z-index:1;
	background-color:transparent;
	border-bottom:2px solid #eee;
	font:inherit;
	font-size:1.125rem;
	padding:.25rem 0
}
.input-field:focus,.input-fie.........完整代码请登录后点击上方下载按钮下载查看