css布局实现自适应简洁预约表单效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现自适应简洁预约表单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="robots" content="all">


    <style>
     
        .tc-btn {
            border-top: none;
            border-right: none;
            border-bottom: none;
            background-color: transparent;
        }
        .tc-btn:focus {
            outline: none;
        }
    </style>

    <style type="text/css">
@keyframes animate_dots {
        0% {
            opacity: 1
        }}



        body,div,h4,h5,input,li,p,ul {
            margin: 0;
            padding: 0
        }

        header,nav {
            display: block
        }

        img {
            border: 0
        }

        ul {
            list-style: none
        }

        h4,h5 {
            font-size: 100%
        }

        i {
            font-style: normal;
            font-weight: 400
        }

        a {
            color: #333;
            text-decoration: none
        }

        a:active,a:hover {
            color: #42a4ff
        }

        button,input,select {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit
        }

        input,select {
            outline: 0;
            *font-size: 100%;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none
        }

        input,select {
            vertical-align: middle
        }

        body {
            height: 100%;
            background: #fff;
            color: #333;
            font-size: 18px;
            font-family: 'Microsoft Yahei','Sim sun',tahoma,'Helvetica ,Neue',Helvetica,STHeiTi,Arial,sans-serif;
            line-height: 1.5;
            -webkit-font-smoothing: auto;
            -moz-font-smoothing: auto;
            font-smoothing: auto
        }

        .row {
            width: 100%
        }

        .topbar {
            max-width: 100%;
            min-width: 1000px;
            font-size: 16px;
            -webkit-box-shadow: 3px 3px 15px #efefef;
            box-shadow: 3px 3px 20px #efefef
        }

        .topbar .container {
            margin: 0 auto;
            width: 1000px;
            height: 80px;
            position: relative;
            z-index: 100
        }

        .topbarfixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            width: 100%
        }

        .navbar {
            height: 80px;
            color: #fff
        }

        .topbarwhite .navbar {
            background: #fff;
            margin-bottom: 0;
            border: none
        }

        .topbarwhite .logo {
            background-position: 0 0!important
        }

        .topbarfixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            width: 100%
        }

        .tc-btn,.tc-btn:active,.tc-btn:hover,.tc-btn:link,.tc-btn:visited {
            display: inline-block;
            width: 260px;
            height: 48px;
            text-align: center;
            font-size: 18px;
            line-height: 48px;
            text-decoration: none;
            color: #fff;
            vertical-align: middle;
            cursor: pointer
        }

        .tc-input-text {
            display: inline-block;
            padding: 9px 0;
            font-size: 20px;
            vertical-align: middle;
            border: 1px solid #ccc;
            border-radius: 2px;
            font-family: 'Microsoft YaHei',Helvetica,Droid Sans Fallback;
            outline: 0
        }

        .tc-input-text::-webkit-input-placeholder {
            font-size: 20px
        }

        body.reg-bgc {
            background-color: #eee
        }

        .hotline {
            position: relative;
            float: right;
            padding-left: 20px;
            height: 80px;
            line-height: 78px;
            color: #666;
            font-size: 16px
        }

        .hotline:before {
            display: inline-block;
            position: absolute;
            content: '';
            left: 0;
            top: 50%;
            margin-top: -8px;
            width: 16px;
            height: 16px;
            background: no-repeat;
            background-position: -330px -342px
        }

        .hotline span {
            color: #008fe4
        }

        .reg-wrap {
            margin: 0 auto;
            width: 800px;
            vertical-align: middle
        }

        .step-cnt {
            text-align: center
        }

        .tc-reg-form>ul>li:last-of-type {
            margin-bottom: 0
        }

        .tc-reg-form {
            margin: 0 auto;
            width: 320px;
            font-size: 14px
        }

        .tc-reg-form>ul>li {
            position: relative;
            width: 318px;
            height: 40px;
            border: 1px solid #e0e0e0;
            margin-bottom: 15px;
            text-align: left;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: height .4s,margin-bottom .4s;
            transition: height .4s,margin-bottom .4s
        }

        .tc-reg-form>ul>li>i {
            position: absolute;
            width: 26px;
            height: 26px;
            top: 6px;
            left: 10px;
            overflow: hidden;
            z-index: 1
        }

        .tc-reg-form>ul>li input,.tc-reg-form>ul>li select {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            width: 100%;
            padding: 10px;
            top: 0;
            bottom: 0;
            font-size: 14px;
            border: none;
            border-radius: 0;
            line-height: 18px
        }

        .tc-reg-form>ul>li input::-webkit-input-placeholder {
            font-size: 14px
        }

        .tc-reg-form>ul>li.hide {
            height: 0!important;
            margin-bottom: 0!important;
            border-color: #fff!important;
            overflow: hidden
        }

        .tc-reg-form .error-info {
            display: none;
            position: absolute;
            bottom: -26px;
            left: 0;
            height: 24px;
            line-height: 24px;
            color: #e33244;
            font-size: 14px
        }

        .tc-reg-form .error-info:before {
            display: inline-block;
            content: '';
            width: 12px;
            height: 12px;
            margin-top: -2px;
            margin-right: 5px;
            background: no-repeat;
            background-position: -519px -198px;
            overflow: hidden;
            vertical-align: middle
        }

        .tc-reg-form>ul>li.verifi input {
            width: 189px;
            left: 0;
            right: 106px
        }

        .tc-reg-form>ul>li.verifi .tc-btn {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            width: 105px;
            height: 38px;
            top: 0;
            right: 0;
            line-height: 38px;
            font-size: 14px;
            border: 1px solid transparent
        }

        .tc-reg-form>ul>li.verifi.readonly input {
            background: #f9f9f9
        }

        .tc-reg-form>ul>li.verifi.readonly .tc-btn {
            height: 36px;
            background: #f9f9f9!important;
            border-left: 1px solid #dedede;
            color: #999
        }

        .tc-reg-form>ul>li.form-error {
            border: 1px solid #e33244;
            margin-bottom: 34px
        }

        .tc-reg-form>ul>li.form-error input {
            color: #e33244
        }

        .tc-reg-form>ul>li.form-error .error-info {
            display: block
        }

        .tc-reg-form .reg-protocol {
            line-height: 20px;
            margin-top: 15px;
            margin-bottom: 23px
        }

        .tc-reg-form .tc-btn {
            width: 100%
        }

        .reg-intro {
            line-height: 36px;
            color: #666;
            font-size: 16px;
            text-align: center;
            margin-bottom: 50px
        }

        .reg-qr {
            text-align: center
        }

        .reg-qr .img,.reg-qr .img img {
            margin: 0 auto;
            width: 100px;
            height: 100px
        }

        .reg-qr .txt {
            line-height: 1.5;
            font-size: 12px;
            color: #666
        }

        .reg-success {
            text-align: center;
            margin-bottom: 40px
        }

@media all and (-ms-high-contrast:none) {
            ::-ms-backdrop {
                height: auto
            }
        }

        .hotline:before,.tc-reg-form .error-info:before {
            background-image: url(../images/new/new_resprit.png)
        }

        .hotline:before,.tc-reg-form .error-info:before {
            background-image: url(../images/new/new_resprit.png);
            background-size: 472px auto
        }

        .hotline:before {
            background-position: -189px -28.5px
        }

        .tc-reg-form .error-info:before {
            background-position: -191px -61.5px
        }

        html {
            height: 100%
        }

        body,div,h4,h5,input,li,p,ul {
            margin: 0;
            padding: 0
        }

        header,nav {
            display: block
        }

        img {
            border: 0
        }

        ul {
            list-style: none
        }

        h4,h5 {
            font-size: 100%
        }

        i {
            font-style: normal;
            font-weight: 400
        }

        a {
            text-decoration: none
        }

        button,input,select {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit
        }

        input,select {
            outline: 0;
            *font-size: 100%
        }

        input,select {
            vertical-align: middle
        }

        body {
            font-family: 'Microsoft Yahei','Sim sun',tahoma,'Helvetica,Neue',Helvetica,STHeiTi,Arial;
            background-color: transparent;
            font-smoothing: auto
        }

        ::-webkit-scrollbar {
            width: 15px;
            height: 15px;
            background-color: transparent;
            border-radius: 9px
        }

        ::-webkit-scrollbar:hover {
            background-color: #fafafa
        }

        ::-webkit-scrollbar-track:hover {
            background: #f6f6f6
        }

        ::-webkit-scrollbar-thumb {
            background: #e0e0e0;
            border-radius: 9px;
            background-clip: content-box;
            border: 5px solid transparent
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #c2c2c2;
            background-clip: content-box
        }

        ::-webkit-scrollbar-thumb:vertical:active {
            background-color: #9da1a5;
            border: 5px solid transparent
        }

        .icon {
            display: inline-block;
            font-size: 0;
            line-height: 0;
            height: 10px;
            width: 16px;
            position: relative
        }

        a {
            color: #296bef
        }

        a:hover {
            color: #0045cc
        }

        .g-header {
            display: none
        }

@media (max-width: 1023px) {
            .g-header {
                display: block
            }
        }

        .g-header.........完整代码请登录后点击上方下载按钮下载查看