css实现自适应7款清爽注册登录订阅任务表单效果代码

代码语言:html

所属分类:表单美化

代码描述:css实现自适应7款清爽注册登录订阅任务表单效果代码,还有重置密码、恢复密码、发送邮件。

代码标签: css 自适应 清爽 注册 登录 订阅 任务 表单

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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/609636b3b27fe.png) no-repeat 0px 0px;
    	background-size:cover;
    	background-attachment:fixed;
    }
    .main-agile  h1 {
    	font-size:3em;
    	text-align:center;
    	color:#fff;
    	font-weight:100;
    }
    /*-- main --*/.main-agile {
    	padding:2em 0;
    }
    .content {
    	width:50%;
    	margin:0 auto;
    }
    .top-grids {
    	margin:3em 0 0 0;
    }
    .top-grids-left,.top-grids-right {
    	width:47%;
    	float:left;
    }
    .signin-form {
    	background:rgba(0,0,0,0.78);
    	padding:2em;
    	-webkit-appearance:none;
    }
    .signin-form h2,.signin-form h3,.signin-form h3 {
    	font-size:1.2em;
    	color:#FFFFFF;
    	text-align:center;
    	margin:0 0 1em 0;
    	font-weight:400;
    	text-transform:uppercase;
    	letter-spacing:3px;
    }
    .signin-form input[type="text"],.signin-form input[type=".........完整代码请登录后点击上方下载按钮下载查看

网友评论0