bootstrap自适应极简登录注册表单页面代码
代码语言:html
所属分类:表单美化
代码描述:bootstrap自适应极简登录注册表单页面代码
代码标签: bootstrap 自适应 极简 登录 注册 表单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Minimal and Clean Sign up / Login and Forgot Form by FreeHTML5.co</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Template by FreeHTML5.co" /> <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content="" /> <meta property="og:image" content="" /> <meta property="og:url" content="" /> <meta property="og:site_name" content="" /> <meta property="og:description" content="" /> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" /> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="shortcut icon" href="favicon.ico"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.css"> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <style> /* ======================================================= * * Template Style * Edit this section * * ======================================================= */ body { font-family: "Open Sans", Arial, sans-serif; line-height: 1.5; font-size: 16px; color: #848484; background-color: #f0f0f0; } body.style-2 { background-color: #ffffff; background-size: cover; background-position: -30% center; background-repeat: no-repeat; background-image: url(../images/bg_2.jpg); height: 100%; } body.style-3 { background: #ffffff url(../images/geometry2.png) repeat; } a { color: #33cccc; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } a:hover { color: #29a3a3; } .menu { padding: 0; margin: 30px 0 0 0; } .menu li { list-style: none; margin-bottom: 10px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } .menu li a { padding: 5px; } .menu li.active a { color: #b3b3b3; } .fh5co-form { padding: 30px; margin-top: 4em; -webkit-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); background: #ffffff; } .style-2 .fh5co-form { -webkit-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1); } @media screen and (max-width: 768px) { .fh5co-form { padding: 15px; } } .fh5co-form h2 { text-transform: uppercase; letter-spacing: 2px; font-size: 20px; margin: 0 0 30px 0; color: #000000; } .fh5co-form .form-group { margin-bottom: 30px; } .fh5co-form .form-group p { font-size: 14px; color: #9f9f9f; font-weight: 300; } .fh5co-form .form-group p a { color: #000000; } .fh5co-form label { font-weight: 300; font-size: 14px; font-weight: 300; } .fh5co-form .form-control { font-size: 16px; font-weight: 300; height: 50px; padding-left: 0; padding-right: 0; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .fh5co-form .form-control::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.3); text-transform: uppercase; } .fh5co-form .form-control::-moz-placeholder { color: rgba(0, 0, 0, 0.3); text-transform: uppercase; } .fh5co-form .form-control:-ms-input-placeholder { color: rgba(0, 0, 0, 0.3); text-transform: uppercase; } .copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden; } .fh5co-form .form-control:-moz-placeholder { color: rgba(0, 0, 0, 0.3); text-transform: uppercase; } .fh5co-form .form-control:focus, .fh5co-form .form-control:active { border-bottom: 1px solid rgba(0, 0, 0, 0.4); } .btn-primary { height: 50px; padding-right: 20px; padding-left: 20px; border: none; background: #33cccc; color: #ffffff; -webkit-box-shadow: -2px 10px 20px -1px rgba(51, 204, 204, 0.4); -moz-box-shado.........完整代码请登录后点击上方下载按钮下载查看
网友评论0