登录注册表单效果

代码语言:html

所属分类:布局界面

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  
    <title> - Daily UI :: 001 - Sign Up Page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
    <style>
        /**
* Daily UI :: 001
* Design a sign up page, modal, form, app screen, etc.
**/
        /**
* Style Declarations
**/
        html, body {
            height: 100%;
        }

        body {
            background: url("https://res.cloudinary.com/exards/image/upload/v1447941004/Majestic_mountains_1920x1080-blue_rr4ucd.jpg");
            background-size: cover;
            font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
        }

        #page-wrapper {
            display: table;
            width: 100%;
            height: 100%;
        }
        #page-wrapper #modal-wrapper {
            display: table-cell;
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }

        #modal {
            margin: 0 auto;
            box-shadow: 0px 34px 27px rgba(0, 0, 0, 0.32), inset 0 0 1px rgba(0, 0, 0, 0.2);
            max-width: 430px;
            background: white;
        }

        .box {
            background: #3b8686;
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjM2I4Njg2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc5YmQ5YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0