layui布局实现一个pc端网站注册页面代码
代码语言：html
所属分类：布局界面
代码描述：layui布局实现一个pc端网站注册页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
<title>注册</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,iframe,input,legend,li,ol,p,pre,td,textarea,th,ul {
margin: 0;
padding: 0;
vertical-align: baseline
}
.clearfix:after,.clearfix:before {
display: table;
content: ''
}
.clearfix:after {
clear: both;
overflow: hidden
}
.clearfix {
zoom: 1
}
iframe {
border: 0
}
a,button,img,input,select {
outline: 0 none
}
img {
border: 0 none;
vertical-align: top
}
em,i {
font-style: normal
}
ol,ul {
list-style: none
}
button,h1,h2,h3,h4,h5,h6,input,select {
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0
}
a {
color: #333;
text-decoration: none
}
a:hover {
cursor: pointer
}
input:focus,
textarea:focus {
outline: 0;
border: 1px solid #16C09C!important;
box-shadow: 0 0 0 2px rgba(22, 192, 156, 0.2);
}
.fl {
float: left;
}
.fr {
float: right;
}
body {
color: #333;
background: #EFF4F5;
font-size: 14px;
line-height: 1.6;
font-family: Gotham,Helvetica, "Pingfang SC", "Microsoft YaHei", STHeiti, Verdana, Arial, Tahoma, sans-serif;
}
.header {
background: #16C09C;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2);
z-index: 1000;
height: 60px;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.header-inner {
padding: 0 20px;
height: 60px;
}
.header-inner .logo img {
height: 40px;
}
.logo {
margin-top: 10px;
}
.footer {
text-align: center;
color: #a8a8a8;
font-size: 12px;
padding: 20px 0;
line-height: 30px;
}
.footer.fixed {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.grid {
width: 1200px;
margin: 0 auto;
height: 100%;
position: relative;
}
/*register.html*/
.rgst-content {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin: 40px auto;
background: #fff;
width: 800px;
border-radius: 10px;
overflow: hidden;
}
.rgst-content h2 {
color: #16C09C;
font-size: 24px;
font-weight: 500;
letter-spacing: 2px;
border-bottom: 1px solid #f0f0f0;
padding: 10px;
}
.ui-label {
color: #4c4c4c;
float: left;
margin-right: 10px;
text-align: right;
width: 85px;
line-height: 42px;
font-size: 15px
}
.ui-label span {
color: red;
margin-left: 5px
}
.ui-input {
font-family: Gotham,Helvetica, "Pingfang SC", "Microsoft YaHei", STHeiti, Verdana, Arial, Tahoma, sans-serif;
height: 20px;
line-height: 20px;
padding: 12px 10px;
width: 350px;
background: #fbfbfb;
border: 1px solid #c4cccc;
font-size: 14px;
transition: border .2s linear 0s,box-shadow .2s linear 0s;
vertical-align: middle;
border-radius: 4px;
}
.ui-form-item select {
font-family: Gotham,Helvetica, "Pingfang SC", "Microsoft YaHei", STHeiti, Verdana, Arial, Tahoma, sans-serif;
height: 20px;
line-height: 46px;
height: 46px;
width: 372px;
background: #fbfbfb;
border: 1px solid #c4cccc;
font-size: 14px;
transition: border .2s linear 0s,box-shadow .2s linear 0s;
vertical-align: middle;
border-radius: 4px;
}
.error {
display: none;
color: #ff5b5b;
background: url(../images/error.png) no-repeat left center;
height: 18px;
line-height: 18px;
padding-left: 24px
}
.ui-input-correct {
background: url(../loginimages/ui-correct.png) no-repeat right center;
border-color: #5fb500
}
.ui-input-wrong {
border-color: #ff5b5b
}
.ui-form-item {
margin-top: 20px;
position: relative
}
.ui-form-item .error {
margin-left: 95px;
margin-top: 5px
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 11px 12px;
text-align: center;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap
}
.btn-default {
background-color: #fff;
border-color: #ccc;
color: #333
}
.btn-primary {
background-color: #2398ea;
border-color: #2289e0;
color: #fff
}
.btn-primary:hover {
background-color: #2289e0;
border-color: #2289e0;
color: #fff
}
.btn-primary-new {
background-color: #5fb500;
border-color: #529a03;
color: #fff
}
.btn-primary-new:hover {
background-color: #529a03;
border-color: #529a03;
color: #fff
}
.ui-form-item .btn {
width: 358px;
display: block;
margin-left: 95px;
color: #fff;
font-size: 16px;
}
.rgst-content .ui-form-item .btn {
box-shadow: 0 6px 15px rgba(29, 182, 94, 0.4);
}
/*login.html*/
.banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../loginimages/sectionlg.png) no-repeat center center /cover;
}
.banner1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../loginimages/1.png) no-repeat center center /cover;
}
.banner2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../loginimages/logBg.jpg) no-repeat center center /cover;
}
.login-area {
box-shadow: 0 9px 30px rgba(0, 0, 0, 0.2);;background: rgba(255,255,255,1);
width: 382px;
padding: 20px 40px 40px;
position: absolute;
top: 50%;
margin-top: -172px;
right: 0;
}
.login-area h3 {
border-bottom: 1px solid #f0f0f0;
font-size: 22px;
padding-bottom: 15px;
font-weight: 300;
}
.login-area .error {
margin-left: 0;
}
.login-info {
position: absolute;
left: 0;
top: 50%;
margin-top: -100px;
}
.login-info h3 {
font-size: 30px;
letter-spacing: 2px;
margin-top: 20px;
color: #fff;
}
.login-info p {
margin-top: 20px;;font-size: 16px;
color: #999;
background: #2289E0;
color: #fff;
display: inline-block;
padding: 2px 15px;
position: relative;
box-shadow: 3px 3px 0 #85bfef;
letter-spacing: 2px;
}
.login-info span {
line-height: 30px;
color: #f8f8f8;
letter-spacing: 2px;
display: block;
}
.login-info h3 label {
font-weight: 100;
margin: 0 10px;
}
.login-form em {
left: 10px;
position: absolute;
top: 10px;
width: 20px;
height: 20px;
background: url(../loginimages/ico-login.png) no-repeat;
}
.login-form em.ico-pwd {
background-position: 0 -20px;
}
.login-form .ui-form-item .ui-input {
text-indent: 30px;
}
.upload_btn {
vertical-align: middle;
margin-right: 10px;
width: 96px;
height: 96px;
display: inline-block;
background: url(../images/yyzz.png) no-repeat;
border: 1px solid #e0e0e0;
}
.upload_cell img {
vertical-align: middle;
width: 96px;
height: 96px;
display: inline-block;
border: 1px solid #e0e0e0;
margin-right: 10px;
}
.upload-example {
vertical-align: middle;
position: relative;
width: 98px;
height: 98px;
display: inline-block;
}
.upload-example span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0,0,0,0.5);
text-align: center;
color: #fff;
}
.stepLine {
width: 98%;
margin-bottom: 40px;
}
.stepLine .stepLineTable {
width: 100%;
text-align: center;
}
.stepLine .stepName {
font-size: 12px;
}
.stepLine .stepPlan {
position: relative;
}
.stepLine .stepPlanLine {
width: 100%;
height: 4px;
border-radius: 2px;
}
.stepLine .lineFinsh {
background-color: #000;
}
.ThemeBGColor3 {
background-color: #FFB800!important;
}
.stepLine .stepCircle {
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: -4px;
}
.stepLine .circleLeft {
left: 15px;
}
.stepLine .lineUnfinsh {
background-color: #dbdbdb;
}
.stepLine .circleRight {
right: 15px;
}
.stepLine .stepCircleS {
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: auto;
margin-top: 2px;
}
.stepLine .step-leftRadius-line {
width: 100%;
height: 4px;
border-radius: 2px 0 0 2px;
}
.stepLine .step-rightRadius-line {
width: 100%;
height: 4px;
border-radius: 0 2px 2px 0;
}
.payWay .icon-shuaqia,.payWay .icon-xianjin,.payWay .icon-shenghuozhuanzhang {
font-size: 24px;
vertical-align: middle;
margin: 0 10px;
}
.payWay a {
display: inline-block;
border-radius: 4px;
border: 1px solid #ccc;
padding: 0 10px;
color: #696969;
margin-right: 8px;
}
.payWay a.active {
border-color: #3296fa;
box-shadow: 0 2px 8px 0 rgba(152,202,252,.5);
}
.pay_top {
background: url(../images/payBg.png) no-repeat #2280f6 right bottom;
background-size: auto 100%;
padding: 10px 20px;
color: #fff;
height: 68px;
}
.pay_top h3 {
font-size: 16px;
font-weight: 600;
margin-top: 10px;
}
.pay_top span {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
background: url(../images/16015.png) no-repeat;
background-size: cover;
border: 4px solid #4e99f8;
margin-right: 10px;
}
.pay_top p {
margin-top: 5px;
}
.pay_top h3 small {
font-weight: normal;
background: #00C094;
font-size: 10px;
border-radius: 2px;
padding: 2px 5px;
vertical-align: middle;
margin-left: 10px;
}
.pay_top h3 small.shizhu {
background: #f9be00;
}
@font-face {
font-family: "iconfont";
src: url('../registFont/iconfont.eot?t=1503628819377');
/* IE9*/
src: url('../registFont/iconfont.eot?t=1503628819377#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../registFont/iconfont.woff?t=1503628819377') format('woff'), /* chrome, firefox */
url('../registFont/iconfont.ttf?t=1503628819377') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../registFont/iconfont.svg?t=1503628819377#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: middle;
}
.icon-shangyedichan:before {
content: "\e607";
}
.icon-jiating:before {
content: "\e73d";
}
.icon-yiliao:before {
content: "\e61c";
}
.icon-hugong:before {
content: "\e608";
}
.icon-jigou:before {
content: "\e6b5";
}
.icon-check_box:before {
content: "\e606";
}
.icon-queren-zhengque:before {
content: "\e609";
}
.icon-check-active {
color: #3296fa;
}
.icon-check-active:before {
content: "\e87c";
}
.payWay .icon-shangyedichan, .payWay .icon-jiating, .payWay .icon-yiliao, .payWay .icon-hugong, .payWay .icon-jigou {
font-size: 24px;
vertical-align: middle;
margin: 0 10px;
color: #007AFF;
}
.success_tip {
color: #00C094;
font-size: 18px;
text-align: center;
padding: 40px 0 200px;
}
.success_tip i {
display: block;
margin: 0 auto;
margin-bottom: 20px;
width: 80px;
height: 80px;
background: #00C094;
color: #fff;
border-radius: 50%;
line-height: 80px;
text-align: center;
font-size: 34px;
}
.xex_container {
width: 1200px;
position: absolute;
top: 84px;
left: 50%;
bottom: 0;
margin-left: -600px;
}
.xexloginArea .login-area {
left: 0%;
box-shadow: none;
padding: 0;
margin-top: -245px;
}
.xexloginArea .login-area h3 {
border-bottom: none;
font-weight: 400;
font-size: 34px;
margin-top: 30px;
}
.xexloginArea .ui-input {
border: 1px solid #7f8182;
padding: 15px 10px;
background: rgba(255,255,255,0.8);
}
.xexloginArea .btn-primary {
background: #f60;
border: 1px solid #f60;
}
.xexloginArea .btn-primary:hover {
background: #f26100;
border: 1px solid #f26100;
}
.xexloginArea .icon-check {
vertical-align: middle;
margin-right: 5px;
width: 16px;
height: 16px;
}
.xexloginArea .ui-input:focus {
border: 1px solid #f60;
outline: none;
box-shadow: 0 0 0px 2px #ffdcc5;
}
.xexloginArea .login-form em {
top: 15px;
}
.xexloginArea .icon-check-active {
color: #f63;
}
.logo span {
line-height: 30px;
display: inline-block;
border-left: 1px solid #0260ad;
padding-left: 10px;
font-weight: 400;
vertical-align: middle;
}
.logo span {
font-size: 20px;
letter-spacing: 1px;
}
.logo {
display: inline-block;
line-height: 32px;
font-size: 16px;
color: #0260ad;
margin-top: 9px;
line-height: 40px;
}
.side-nav {
float: right;
line-height: 62px;
height: 62px;
}
.logo img {
height: 44px;
float: left;
margin-right: 10px;
vertical-align: middle;
}
.xex_tag {
text-align: center;
font-weight: 600;
color: #000;
letter-spacing: 6px;
font-size: 14px;
margin-top: 60px;
}
/*.mb_en{font-family:CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;}*/
.mb_en .banner2 {
background: url(../loginimages/logBg.jpg) no-repeat center center /cover;
}
.mb_en .header {
background: rgba(0,0,0,0.4);
}
.mb_en .login-area h3 {
font-weight: 600;
font-size: 32px;
color: #151e27;
}
.mb_en .login-area {
border-radius: 6px;
left: 50%;
margin-left: -231px;
}
.mb_en .ui-input {
border-radius: 0;
border: 1px solid transparent;
border-bottom: 1px solid #aaa;
}
.mb_en .ui-input:focus {
border-bottom: 1px solid #2280F6;
}
.mb_en input::-webkit-input-placeholder {
color: #bbb;
}
.newLogin .header {
background: none;
box-shadow: 0 1px 1px rgba(255,255,255,0.2);
}
.newLogin .btn-primary {
background: #00a8ff;
}
.newLogin .ui-form-item .btn {
padding: 0;
line-height: 48px;
width: 200px;
border-radius: 30px;
border: none;
}
.newLogin .ui-input {
height: 20px;
line-height: 20px;
padding: 12px 10px;
width: 350px;
font: 14px/1.5 "Varela Round", "Hiragino Kaku Gothic Pro", PingFangSC-Thin,"Hiragino Sans GB","Microsoft YaHei Light","Microsoft YaHei",Arial,sans-serif;
}
.newLogin .login-area {
height: 470px;
padding: 0;
background: none;
width: 800px;
margin-left: -400px;
left: 50%;
margin-top: -220px;
}
.newlogin_side {
width: 350px;
float: left;
height: 100%;
position: relative;
letter-spacing: 1px;
}
.newlogin_side img {
width: 100%;
}
.newLogin .newlogin_area {
width: 450px;
float: left;
background: #fff;
height: 100%;
border-radius: 0 10px 10px 0;
}
.newLogin .login-form {
padding: 20px 40px 40px;
}
.newLogin .login-area .error {
font-size: 12px;
}
.newLogin .error {
background-size: 16px;
}
.newLogin p {
margin-bottom: 5px;
}
.newLogin .login-form .ui-form-item .ui-input {
text-indent: 0;
background: #f5f5f5;
border: none;
}
.newLogin .newlogin_area h3 {
border-bottom: none;
color: #00a8ff;
font-size: 24px;
font-weight: 800;
padding: 40px 40px 0;
letter-spacing: 2px;
}
.newlogin_side h3 {
opacity: 0.85;
position: absolute;
top: 100px;
color: #fff;
font-size: 30px;
font-weight: 800;
border-bottom: none;
text-align: center;
width: 100%;
letter-spacing: 4px;
}
.newlogin_side p {
position: absolute;
top: 280px;
color: #fff;
font-size: 16px;
text-align: center;
width: 100%;
letter-spacing:.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0