css实现透明简洁自适应登录表单页面效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现透明简洁自适应登录表单页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <!-- Meta tag Keywords --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Meta tag Keywords --> <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 p,h1,h2,h3,h4,h5,h6,a{ } body { font-family:Verdana;/*-- background:pink; */ background: url('//repo.bfw.wiki/bfwrepo/image/604a26e01dd36.png') no-repeat 62% 34%; background-size: cover; text-align:center; } /*--header--*/ .agileheader h1 { font-size: 51px; text-transform: uppercase; letter-spacing: 10px; color: #fff; font-weight: 600; margin: 70px 0px; } .w3layouts-main h2 { color: #fff; font-size: 29px; letter-spacing: 2px; text-transform: uppercase; padding-bottom: 15px; } .w3layouts-main { width: 25%; margin: 0 auto; background:rgba(0, 0, 0, 0.34); padding: 42px 35px; } /*--//header--*/ /*--main--*/ input[type="email"], input[type="password"] { width: 88%; padding: 15px 0px 15px 42px; border: 1px solid #fff; outline: none; font-size: 14px; color: #fff; margin: 14px 0px; } input[type="email"] { background: url("//repo.bfw.wiki/bfwrepo/icon/5df4a6cf498ab.png") no-repeat 10px 11px; background-size: 20px; } input[type="password"] { background: url("//repo.bfw.wiki/bfwrepo/icon/5df4a6dc04f4f.png") no-repeat 8px 9px; background-size: 20px; } .w3layouts-main span { font-size: 16px; color: #fff; float: left; width: 32%; margin-top: 8px; } .w3layouts-main h6 { font-size: 16px; float: right; width: 37%; color: #fff; letter-spacing: 1px; margin-top: 8px; text-decoration:underline; } .w3layouts-main a { color: #fff; transition:0.5s all; -webkit-transition:0.5s all; -o-transition:0.5s all; -moz-transition:0.5s all; -ms-transition:0.5s all; } .w3layouts-main a:hover{ color:rgba(208, 95, 216, 0.9); transition:0.5s all; -webkit-transition:0.5s all; -o-transition:0.5s all; -moz-transition:0.5s all; -ms-transition:0.5s all; } input[type="submit"] { padding: 12px 38px; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; background: #003b64; color: white; border: none; outline: none; cursor: pointer; margin: 45px auto 31px; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } input[type="submit"]:hover { background:rgba(213, 38, 133, 0.64); transition:0.5s all; -webkit-transition:0.5s all; -o-transition:0.5s all; -moz-transition:0.5s all; -ms-transition:0.5s all; } .w3layouts-main p a { text-transform: uppercase; font-size: 18px; text-decoration:underline; letter-spacing: 1px; color: #fff; padding: 10px; } .w3layouts-main p { font-size: 17px; color: #fff; } /*--//main--*/ /*--footer--*/ .footer-w3l p { margin: 4em 0em; color: #fff; font-size: 15px; font-weight: 300; letter-spacing: 2px; } .footer-w3l a { color:rgba(208, 95, 216, 0.9); } .footer-w3l a:hover { color:rgba(19, 129, 206, 0.82);; text-decoration: underline; } /*--//footer--*/ /*--responsive--*/ @media(max-width:1440px){ .w3layouts-main { width: 28%; } } @media(max-width:1366px){ .w3layouts-main { width: 30%; } } @media(max-width:1280px){ .w3layouts-main { width: 33%; } .agileheader h1 { font-size: 41px; } .w3layouts-main h2 { font-size: 27px; } } @media(max-width:1080px){ .w3layouts-main { width: 49%; } } @media(max-width:1024px){ .w3layouts-main { width: 40%; } } @media(max-width:991px){ .w3layouts-main { width: 42%; } .agileheader h1 { font-size: 38px; } .w3layouts-main h2 { font-size: 25px; } } @media(max-width:800px){ .w3layouts-main { width: 51%; } .agileheader h1 { font-size: 34px; letter-spacing: 9px; } .w3layouts-main h2 { font-size: 23px; } } @media(max-width:768px){ .w3layouts-main { width: 54%; } .agileheader h1 { font-size: 33px; letter-spacing: 8px; } .w3layouts-main h2 { font-size: 22px; } .footer-w3l { padding: 2em 0em 8.7em; } } @media(max-width:736px){ .w3layouts-main { width: 56%; } .agileheader h1 { margin: 60px 0px; } .footer-w3l { padding: 0em; } } @media(max-width:667px){ .w3layouts-main { width: 61%; } .agileheader h1 { font-size: 31px; } .w3layouts-main h2 { font-size: 21px; } .agileheader h1 { margin: 52px 0px; } } @media (max-width.........完整代码请登录后点击上方下载按钮下载查看
网友评论0