css实现一个清爽自适应登录表单效果代码-html代码-BFW代码库

css实现一个清爽自适应登录表单效果代码

代码语言：html

代码描述：css实现一个清爽自适应登录表单效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*--reset--*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    	margin:0;
    	padding:0;
    	border:0;
    	font-size:100%;
    	font:inherit;
    	vertical-align:baseline;
    }
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    	display:block;
    }
    ol,ul {
    	list-style:none;
    	margin:0px;
    	padding:0px;
    }
    blockquote,q {
    	quotes:none;
    }
    blockquote:before,blockquote:after,q:before,q:after {
    	content:'';
    	content:none;
    }
    table {
    	border-collapse:collapse;
    	border-spacing:0;
    }
    /*--start editing from here--*/a {
    	text-decoration:none;
    }
    .txt-rt {
    	text-align:right;
    }
    /* text align right */.txt-lt {
    	text-align:left;
    }
    /* text align left */.txt-center {
    	text-align:center;
    }
    /* text align center */.float-rt {
    	float:right;
    }
    /* float right */.float-lt {
    	float:left;
    }
    /* float left */.clear {
    	clear:both;
    }
    /* clear float */.pos-relative {
    	position:relative;
    }
    /* Position Relative */.pos-absolute {
    	position:absolute;
    }
    /* Position Absolute */.vertical-base {
    	vertical-align:baseline;
    }
    /* vertical align baseline */.vertical-top {
    	vertical-align:top;
    }
    /* vertical align top */nav.vertical ul li {
    	display:block;
    }
    /* vertical menu */nav.horizontal ul li {
    	display:inline-block;
    }
    /* horizontal menu */img {
    	max-width:100%;
    }
    /*--end reset--*/body {
    	font-family:Verdana;
    	background:url(//repo.bfw.wiki/bfwrepo/image/60987bfc5afa0.png)no-repeat center 0px;
    	background-attachment:fixed;
    	background-size:cover;
    }
    h1 {
    	font-size:3em;
    	text-align:center;
    	color:#fff;
    	font-weight:100;
    }
    /*-- main --*/h2 {
    	font-size:1.1em;
    	text-align:center;
    	padding:1.2em;
    	background:#02a299;
    	color:#fff;
    	font-weight:200;
    	letter-spacing:10px;
    }
    .main {
    	padding:3em 0 0;
    }
    .login-form {
    	width:35%;
    	margin:3.5em auto;
    	background:rgba(12,85,105,0.51);
    	padding-bottom:4em;
    }
    .agileits-top {
    	padding:2em 3em 3em;
    }
    .login-form input[type="text"],.login-form input[type="password"] {
    	font-size:1em;
    	color:#fff;
    	padding:0.8em 1em;
    	border:0;
    	width:93%;
    	bo.........完整代码请登录后点击上方下载按钮下载查看