下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML><HTML lang="en-US"><head> <Meta charset="UTF-8"> <Title>CSS3制作分步注册表单|w3cplus</Title> <Meta name="keywords" content="CSS3学习,CSS3属性详解,CSS3 Transition,如何学好CSS3"> <Meta name="description" content="W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于CSS,CSS3,HTML,HTML5,jquery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。"> <link rel="shortcut icon" href="http://www.w3cplus.com/sites/all/themes/marvin/favicon.ico"> <link rel="stylesheet" type="text/CSS" href="http://www.w3cplus.com/demo/CSS3/base.CSS" media="all" /> <style type="text/CSS" >body{background:#1e1f20;Font-size:18px;}.login{ wIDth: 330px; margin: 40px auto 0;text-align: center;}.login h2{Font:italic 32px/40px "Impact";letter-spacing:1px;color:rgba(0,0);background: -webkit-linear-gradIEnt(top,#ffcf6b,#ffc54c 10%,#ffb320 40%,#c16e05);background: -moz-linear-gradIEnt(top,#c16e05);background: linear-gradIEnt(top,#c16e05);-webkit-background-clip:text;/*-webkit-text-stroke: 2px #000;*/}.login p{ color:#070606;Font-size:28px;Font-style:italic;Font-weight:bold;text-shadow:1px 1px 0 rgba(255,255,.2),-1px -1px 0 rgba(255,.2);}.control-round{ position:relative; List-style:none;height:5px;border:1px solID #222222;background:#101010;margin:50px 0 40px;}.control-round label{position:absolute; top:-18px;Font-family:"Impact";wIDth:36px;color:#151515;line-height:36px;text-shadow:-1px -1px 1px #666,1px 1px 1px #666;border-radius:18px;border:1px solID #686868;Box-shadow:0 0 2px 2px rgba(0,.2);background:-webkit-linear-gradIEnt(top,#656565,#393939);background:-moz-linear-gradIEnt(top,#393939);background:linear-gradIEnt(top,#393939);}.control-round label.active{ text-shadow:0 1px 0 #f5b738;border:1px solID #c4883b;background:-webkit-linear-gradIEnt(top,#f6ae1b,#b46001);background:-moz-linear-gradIEnt(top,#b46001);background:linear-gradIEnt(top,#b46001);}.control-round label.active:after,.control-round label.active:before{position:absolute; display:block; content:"";border-style:solID;left:50%;top:40px;}.control-round label.active:after{margin:5px 0 0 -6px;border-wIDth:6px;border-color:#dc8e0f transparent transparent transparent;z-index:3;}.control-round label.active:before{margin:4px 0 0 -7px; border-wIDth:7px;border-color:#000 transparent transparent transparent;z-index:2;}.control-round label:nth-child(1){left:0;}.control-round label:nth-child(2){left:50%;margin-left:-18px;}.control-round label:nth-child(3){right:0;}.control-group{position:relative;margin:20px 0;}.control-group:after{position:absolute;display:block;top:10px;left:12px;wIDth:25px;color:rgba(255,.6);text-align:center;Font-size:16px;content: "";Font-family: 'icomoon';Font-style: normal;speak: none;Font-weight: normal;-webkit-font-smoothing: antialiased;}.control-group:nth-child(2):after{content: "";}.control-group input{padding-left:40px;wIDth:100%; height:44px; border-radius:22px;border:1px solID #2b2b2b;Box-shadow:inset 0 0 10px rgba(0,1);background:#151515;-webkit-Transition: border linear 0.2s,Box-shadow linear 0.2s;-moz-Transition: border linear 0.2s,Box-shadow linear 0.2s;-o-Transition: border linear 0.2s,Box-shadow linear 0.2s;-ms-Transition: border linear 0.2s,Box-shadow linear 0.2s;Transition: border linear 0.2s,Box-shadow linear 0.2s;-webkit-Box-sizing: border-Box;-moz-Box-sizing: border-Box;-o-Box-sizing: border-Box;-ms-Box-sizing: border-Box;Box-sizing: border-Box;}.control-group input:focus{Box-shadow: inset 0 1px 3px rgba(255,0.1),0 0 8px rgba(255,0.6);}.form-actions{text-align:right;}.form-actions .btn{position:relative;padding:0 20px;margin-left:5px;height:35px;line-height:35px;color:#000;text-shadow:0 1px 0 #7f7f7f; border-radius:17px;border:1px solID #4f4f4f;Box-shadow:0 0 3px #000;background:-webkit-linear-gradIEnt(top,#666666,#414141);background:-moz-linear-gradIEnt(top,#414141);background:linear-gradIEnt(top,#414141);}.form-actions .btn:hover{background:-webkit-linear-gradIEnt(top,#757575,#4e4e4e);background:-moz-linear-gradIEnt(top,#4e4e4e);background:linear-gradIEnt(top,#4e4e4e);}.form-actions .btn:active{top:1px;border:1px solID #111;Box-shadow:0 1px 1px #111 inset;background:-webkit-linear-gradIEnt(top,#4e4e4e,#4e4e4e);}.form-actions .btn[type=submit]{border:1px solID #c36e0e;text-shadow:0 1px 0 #f4a922; background:-webkit-linear-gradIEnt(top,#f6ab15,#b46001); background:-moz-linear-gradIEnt(top,#b46001);}.form-actions .btn[type=submit]:hover{background:-webkit-linear-gradIEnt(top,#ffc145,#c26905);background:-moz-linear-gradIEnt(top,#c26905);background:linear-gradIEnt(top,#c26905);}.form-actions .btn[type=submit]:active{border:1px solID #492700;Box-shadow:0 1px 2px #492700 inset;background:-webkit-linear-gradIEnt(top,#c16e05,#c16e05);background:-moz-linear-gradIEnt(top,#c16e05);background:linear-gradIEnt(top,#c16e05);}@Font-face {Font-family: 'icomoon';src:url('Fonts/icomoon.eot');src:url('Fonts/icomoon.eot?#IEfix') format('embedded-opentype'),url('Fonts/icomoon.svg#icomoon') format('svg'),url('Fonts/icomoon.woff') format('woff'),url('Fonts/icomoon.ttf') format('truetype');Font-weight: normal;Font-style: normal;} </style> <script type="text/JavaScript">window.onload=function(){ var oForm=document.getElementByID('form-control'); var aLabel=oForm.getElementsByTagname('label'); var ainput=oForm.getElementsByTagname('input') for(var i=0;i<aLabel.length;i++){ ainput[i].index=i; aLabel[i].onclick=function(){ for(var i=0;i<aLabel.length;i++){ aLabel[i].classname=''; } this.classname='active'; } ainput[i].onclick=function(){ for(var i=0;i<aLabel.length;i++){ aLabel[i].classname=''; } aLabel[this.index].classname='active'; } }} </script></head><body><div > <nav ID="top_nav"> <ul > <li><a href="http://www.w3cplus.com" target="_blank">w3cplus</a></li> <li><a href="http://www.w3cplus.com/resources/CSS3-tutorial-and-case" target="_blank">CSS3详解教程</a></li> <li><a href="http://www.w3cplus.com/demos/List.HTML" target="_blank">CSS3实例</a></li> <li><a href="http://www.w3cplus.com/demo/Tags/242.HTML" target="_blank">藤藤每日一练</a></li> </ul> <a ID="read" href="http://www.w3cplus.com/demo/sign-up-form.HTML" target="_blank">查看原文>></a> </nav></div><div > <header ID="header"> <hgrounp > <h1>CSS3制作分步注册表单</h1> <h2>作者：藤藤(如有更好建议或疑问请加群：1041263)<h2> </hgrounp> </header> <section > <div > <h2>Sign Up Form</h2> <p>with steps</p> <form method="post" action="" ID="form-control" > <div ID="control-round"> <label for="email" >1</label> <label for="password">2</label> <label for="vpassword">3</label> </div> <div > <input type="text" name="loginname" ID="email" placeholder="Email Address"> </div> <div > <input type="text" name="loginname" ID="password" placeholder="Password"> </div> <div > <input type="text" name="loginname" ID="vpassword" placeholder="Verify Password"> </div> <div > <button type="submit" >Sign Up</button> <button type="button" >Clear</button> </div> </form> </div> </section></div></body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的CSS3制作分步注册表单全部内容，希望文章能够帮你解决CSS3制作分步注册表单所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）