css布局实现大气登录页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现大气登录页面效果代码，包含账户与密码登录、验证码登录、第三方登录及注册
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name='TTUNION_verify' content='b846c3c2b85efabc496d2a2b8399cd62'>
    <meta name="sogou_site_verification" content="gI1bINaJcL" />
    <meta name="360-site-verification" content="37ae9186443cc6e270d8a52943cd3c5a" />
    <meta name="baidu_union_verify" content="99203948fbfbb64534dbe0f030cbe817">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Hiragino Sans GB","Microsoft Yahei",SimSun,Arial,"Helvetica Neue",Helvetica;
            color: #333;
            word-wrap: break-word;
            -webkit-font-smoothing: antialiased;
           
        }

        article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
            display: block
        }

        progress {
            display: inline-block;
            vertical-align: baseline
        }

        a {
            background-color: transparent;
            outline: 0;
            text-decoration: none
        }

        a:hover {
            color: #00b38a;
            text-decoration: underline
        }

        h1,h2,h3,h4,h5,h6 {
            margin: 10px 0;
            font-weight: 400
        }

        h1 {
            font-size: 24px
        }

        h2 {
            font-size: 20px
        }

        h3 {
            font-size: 18px
        }

        h4 {
            font-size: 16px
        }

        h5 {
            font-size: 14px
        }

        h6 {
            font-size: 12px
        }

        p {
            margin: 0
        }

        p+p {
            margin-top: 10px
        }

        img {
            border: 0;
            vertical-align: top;
            display: inline-block
        }

        button,input,optgroup,select,textarea {
            margin: 0;
            padding: 0;
            border: 1px solid #ededed;
            font-family: inherit
        }

        input {
            font-family: Arial,"Hiragino Sans GB","Microsoft Yahei",SimSun
        }

        label,select,button,input[type=button],input[type=reset],input[type=submit],input[type=radio],input[type=checkbox] {
            cursor: pointer
        }

        input[type=checkbox],input[type=radio] {
            padding: 0
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        th,td {
            padding: 0
        }

        em,strong {
            font-weight: 400
        }

        i {
            font-style: normal
        }

        dl,dt,dd {
            margin: 0
        }

        ::selection {
            color: #fff;
            background-color: #00b38a;
        }

        ::-moz-focus-inner {
            border: 0
        }

        ul {
            margin: 0;
            padding: 0
        }

        li {
            list-style: none
        }

        .fl {
            float: left
        }

        .fr {
            float: right
        }

        .clearfix {
            zoom: 1;
        }

        .clearfix:before,.clearfix:after {
            content: "";
            display: table
        }

        .clearfix:after {
            clear: both
        }

        html {
            font-size: 14px
        }

        body {
            min-width: 1024px;
            min-height: 100%;
          background: url("//repo.bfw.wiki/bfwrepo/image/607aa1b0d81d0.png");
          background-size: cover;
        }

        a:hover {
            text-decoration: none;
        }

        .aui-input {
            font-size: 14px;
            position: relative;
            z-index: 1;
            height: 44px;
            line-height: 44px\9;
            vertical-align: middle;
            color: #333;
            border-width: 1px;
            border-style: solid;
            outline: 0;
        }

        button, input, optgroup, select, textarea {
            margin: 0;
            padding: 0;
            border: 1px solid #ededed;
            font-family: inherit;
        }

        input {
            -webkit-appearance: textfield;
            background-color: white;
            -webkit-rtl-ordering: logical;
            cursor: text;
            padding: 1px;
            border-width: 2px;
            border-style: inset;
            border-color: initial;
            border-image: initial;
        }

        input, textarea, select, button {
            text-rendering: auto;
            color: initial;
            letter-spacing: normal;
            word-spacing: normal;
            text-transform: none;
            text-indent: 0px;
            text-shadow: none;
            display: inline-block;
            text-align: start;
            margin: 0em;
            font: 400 11px system-ui;
        }

        .aui-btn {
            font-size: 16px;
            line-height: 44px;
            display: inline-block;
            height: 44px;
            padding: 0 30px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            border: 1px solid #fff;
            outline: 0;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -webkit-transition: .05s linear;
            -o-transition: .05s linear;
            transition: .05s linear;
        }
        .aui-header-box {
            width: 100%;
            height: 370px;
            position: relative;
           
            border: none;
        }

        .aui-header-box-logo {
            position: absolute;
            z-index: 9999;
            top: 76px;
            left: 50%;
            margin-left: -350px;
            width: 112px;
            height: 42px;
          
            background-repeat: no-repeat;
            background-size: contain;
        }

        .aui-content-box {
            width: 552px;
            margin: -205px auto 60px;
            padding: 70px 65px 70px 75px;
            background-color: #ffffff;
            display: table;
            -webkit-border-radius: 1px;
            -moz-border-radius: 1px;
            border-radius: 1px;
            border: 1px solid #d6d6d6;
            z-index: 1;
            position: relative;
            z-index: 1;
        }

        .aui-content-box-fl {
            width: 315px;
            height: 265px;
            /* background:#900; */
            float: left;
            border-right: 1px dashed #d4d4d4;
            padding-right: 40px;
        }

        .aui-content-box-fr {
            width: 165px;
            height: 220px;
            /* background:#00b38a; */
            padding-top: 26px;
            float: right;
            padding-left: 20px;
        }

        .aui-form-header {
            position: relative;
            z-index: 1;
            height: 35px;
            margin-bottom: 30px;
            border-bottom: 1px solid #e2e0e0;
        }

        .aui-form-header .aui-form-header-item {
            font-size: 16px;
            line-height: 24px;
            position: relative;
            float: left;
            width: 50%;
            height: 33px;
            cursor: pointer;
            text-align: center;
            color: #121212;
        }

        .aui-form-header li a {
            color: #121212;
        }

        .aui-form-content-item {
            display: none;
        }

        .aui-form-header .on {
            margin-bottom: -1px;
            color: #ed4242;
            border-bottom: 2px solid #ed4242;
        }

        .aui-form-header .on:after {
            position: absolute;
            z-index: 2;
            top: -12px;
            left: 50%;
            margin-left: -3px;
            content: "";
            width: 0;
            height: 0;
            line-height: 0;
            border: 6px solid transparent;
            border-bottom-color: #ed4242;
        }

        .aui-form-header .on:after {
            z-index: 3;
            top: -11px;
            width: 0;
            height: 0;
            line-height: 0;
            border: 6px solid transparent;
            border-bottom-color: #fff;
        }

        .aui-form-header .on:after {
            position: absolute;
            z-index: 2;
            top: 21px;
            left: 50%;
            margin-left: -3px;
            content: "";
            width: 0;
            height: 0;
            line-height: 0;
            border: 6px solid transparent;
            border-bottom-color: #ed4242;
        }

        .aui-form-list {
            position: relative;
            z-index: 1;
            width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
        }

        .aui-form-list .aui-input {
            box-sizing: border-box;
            width: 100%;
            border-radius: 0;
            border-left: 0;
            border-top: 0;
            border-right: 0;
            border-color: #ededed;
            background: 0 0;
        }

        .aui-form-pwd {
            padding-top: 20px;
        }

        .aui-form-pwd a {
            position: relative;
            float: right;
            font-size: 14px;
            display: block;
            text-align: right;
            text-decoration: none;
            color: #ed4242;
            margin-top: -5px;
            z-index: 3;
        }

        .aui-form-btn {
            position: relative;
            margin-top: 20px;
        }

        .aui-form-btn .aui-btn {
            color: #fff;
            border-color: #FC4349;
            background-color: #FC4349;
            display: block;
            width: 100%;
            font-size: 18px;
            line-height: 46px;
            height: 46px;
        }

        .aui-child {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
            height: 43px;
            font-size: 14px;
            padding: 0;
            border: 0;
            color: #ed4242;
        }

        .aui-child-img img {
            width: 75px;
            display: block;
            border: none;
        }

        .aui-content-box-text h3 {
            margin: 44px 0 8px;
            color: #555;
            font-size: 14px;
        }

        .aui-content-box-text .aui-ll-link {
            display: inline-block;
            height: 22px;
            font-size: 15px;
            color: #FC4349;
            padding-right: 23px;
            background: url("//repo.bfw.wiki/bfwrepo/image/60e0084638107.png") right center no-repeat;
            background-size: 20px;
        }

        .aui-content-box-text-link {
            margin-top: 12px;
            text-align: center;
        }

        .aui-content-box-text-link li {
            display: block;
            margin-left: 22px;
            float: left;
        }

        .aui-content-box-text-link li:first-child {
            margin: 0;
        }

        .aui-content-box-text-link li a {
            display: inline-block;
            width: 22px;
            height: 22px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .aui-form-list .aui-input:active {
            border-bottom: 1px solid #ed4242;
        }

        .aui-form-list .aui-input:active {
            border-bottom: 1px solid #ed4242;
        }

        .aui-form-list .aui-input:hover {
            border-bottom: 1px solid #ed4242;
        }

        .aui-form-ty {
            width: 100%;
            position: relative;
            padding-top: 10px;
            text-align: center;
            color: #999;
        }

        .aui-icon-sina {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEj0lEQVRYR81YTXraSBCtaiyxDDcIPsGYBbSyGnyCkBOEnMDkBLFPEOcEgRMMcwKLVSR5gXyCODcgu0QYVb5qWkxLtH4w5JtoZ9Pqel393qsqIfzhD/7h+OBogMsvX7rrVuslpmkHEC/UgYliEmLlbDbfeq9ePR6ThGcBjKKIgbylNB0hYrcKABE9ohBzAJgNBoP4ULAHAby/vx/SZvMBEIeHBtKZ9bHVuun3+37T9xsBXC6XnfXPnx8Bcdx048p1RFOn3X7f6/VWdfvVAlTXSfQZALb8Ot0TA+K7umuvBKiuNE3/AYDO6XDldloB4mUVyFKAOnN3vxFchrQSpBWg4lySMLhjr/U7EE0JcQVEF7gV1wvLbcSO617aOGkFGIXhlG3kBNc6G0iZE1YURWMgurUA3VvL8fcAat5x9k7zEPmcQQEQn6XpjI2bzT0RYo4Af5lBUIjLogXtAYyC4O4An1sQwK0QYkVE3ZLMABF9Q8SXCsxWuVPN8WUuC0T+wPMuc6DNP6wvWfLIAUWrNS6eNgzDEQKw6ncPAbyRUs41r/lq3zppes6ZDINgjoivcyEQe6aqcxmMguAWEK+q7paI/nXb7bGN0CX0YIHEhPiJgYZB8IiIPnMzDMNrBPhQyOKngedNsv/lAIZB8LWmtlqJnG2mBAAAzmbjZ02CybeBlKiTcDGQcmg7ENdu6XnnewBVVyLE14rsVYKrynoGRAHcOkSXAdoooQ6oKZBTcY16nw2Og2hr+QxEvhZgPJCyV0YpU827Ky47DQE8uK47rCrsSgDrtbIMx3EeimutYgDg1staCDJh5TJoJSy7gsWb+EUG9ZQkVwQwsgRiYcwdopsdF5fLTpIkkz1R2FwC4EZKeV0LkLMnpdw75X0QTAiR1fcAiFPHcebw40cnEYLXsjIzA14RwDtWb4ZDv/ux0ilKANo8bHcSS4AdLxU9EB/ZvzizSZL4JkjHdc/Na4/CkGoAKu+sFQkZJ1HXqpXORu222xccVP0PcQJCxFwheF2Rz0j0vu95bNLqqQNoFUmJzeTUa/B04bjuKOt4igCKjmCSvkm1stqMOvnW5bc1Uz/m4p1dAMycNL1eCxET0colGprTm7FO1WHpebvBqq5TKvK+SalTnpUpd50kPEa+gELNzA6kKgfina5I39n3stpqAi/lIFF5qStNP5HvtNtvmHN6DU9lRAATKeUsA58kyWsEYK7xiLBw0nScZTYKgitA3PGwFGBVs6AJzMH/tmyw4uB9KW+0MY+AaMxtlkGLBTcGIMQ0y9qBo+qCS6AZ+zkNqzJhQvQR8aE48GRVBYmGJSZenrwmDavO4qla/iq7K/7WrOU3+GSa7SGBDl5bVe/rxk7mo20KOxhExQs5pRfXVQ7uhmJ/F8hKcAy20acPIpoWJ7BjU8jXiojjoz597Mx3O8irgedYYPr9meO6k5N8PDIB6RrLfZrNJ5tgX6AQ1yf//FaMrLiZpmP2uWLtLq5VMzHA3DTvJifJ1tRysG4zrr1PZ2fdlD8B/9fCxzzMnz09Pf4vn4DrQJ/y96MzeEowtr1+ARGY10ejpXM+AAAAAElFTkSuQmCC');
        }

        .aui-icon-sina:hover {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEoUlEQVRYR82YXXLaSBDH/60RVeRpuUHsEyw5QWTI1sJTyAmMT2ByAtsniHOCwAnCPkHVLqA9weITBN+APOEqa9RbPUIgiUEShlTCo5iP3/THv3uG8Iv/6Bfnw9GA7LXOQPRaI6wRUV0OzMxzBWcJ5kfyx4tjjPAiQPb+qAeOe0ngDojOcgGYFwwaumEwIP/v+aGwBwE+v2t5xLgByDt0o2g8+0y4q/wz9svOLwXInlfTTvUTiLplFy6wal+FTx/J95dF6xUCGncq9wsBJr5O9WNg7urgqsjtuYDGpSF9BaF2KrDUOoylCoOLPMi9gGI57bizHwYXkxZAWgEl5gL1ana8W/k7M/UBXhKZEPEA+i3rjcjdqwtbTFoBg2arD9Dl8W7lgTsZpxIraLS6INzvgu6Olf13ACMpodnxcBsf+gAtiXnuhBiIcIu4Bw6GRPR7ch8mvshK0A5g0GzNyuocM/4lwj0TLynEmd0yIn94BOF1JIV85U7HfRPjyv0vbQj23cn4IvktBWifZLEl45Ed7mZPGzTbHQBfMzM+uJPR0GipqoprL5Xmc7Fk0GwNAXqfHK908CaZ1SnA50b7ngjX+e7lv5R+6toC2hoejCWI5wB9FtCg0V6AjKW6z43WLRHdpNzM+FyZjnrxtxRg0Gh9y6+t9kCOFzMJAECF8OMmIRlv7mREYgQA9cp05NkPxAt3Oj7fAZSFtKJv+62XD5dn9RhEAEUhmOlMAPeEBOIQSGVxfva+HE42iaSFvkizIAkouleZjN7sC6lkNm9cvO80zPzghk9eXmGXBAC9iiSDVw/ZsbZkEMicQmASK21BS8Ca/SzaZL57Xi10qtchUWdnI0kM8FCFuNvGolcLnGovmxS20GDmu8p0fFsIKNarTMc7XYxutHsM3DDwQGBpnYZAtaYV1ZlZMnNtTclgXMXWkA3NXMKnvJi1AtpcnBwYL7jdYBuXMlfpYCH6Zeq4U/WTkCpcnSfdHjTbXFCpLC62lLgs4CbTGY8qXNVl00hGqEfguVQIkxQZwSbGRzUdibyYXxGgNUnsMpPO3lhYpcS54aoTdzxZAIsibCxSplpZZSaSA1H5dc1cnzY5OCEXA6VxqxXmYFqqkL3k7W07LqrD7nS0uVgVdUrZuC8sdbFmxZmrVXUhrVK2ZsbuM55wMIsqEn9XWntxbU2B7wlCzit1+83PvtJPH6KYky5E+aI/IO65k/EgAf8eTPfShUdhwN3Ysrr55zXD2cThviTJbRZk0nOj7RPh7c4CjCWB79V0fLe+5XUY1CWYNsu0UgIF6Y7DoB9b7ZCrqsyXEpjc+/CGdS3CIPhK64fshSeuKiGxZxXxHH0p1bBGMnCqlr9A7VJ/l2z543hKie0h+7xgbF69z792SjJYbmEvYMhzbCrTswNzL+6bjP1hkGkZsp2i3NOHo/rZG9ixVozcqrtHPX1sxXd74TkWLJrPA6Wfeid5PEoCiaYhpFurTpYgNzrp8O3Jn9+ye68fMEWkO9nabRH4RwbkAXMj3iXOshlSGINFi5l2y8UZMdWY2TS3RDSXy7wbYPFTnoCLoE/5/9EWPCWMba3/AZAd50eeU74rAAAAAElFTkSuQmCC');
        }

        .aui-icon-wechat {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEQklEQVRYR8.........完整代码请登录后点击上方下载按钮下载查看