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 {
	dis.........完整代码请登录后点击上方下载按钮下载查看