PLM之家PLMHome

[前端框架] 一个简单的登录和注册HTML CSS开发页面

2019-11-27 15:14:40 172 2

  [复制链接]
admin 发表于 2019-11-12 08:06:54 |阅读模式

admin 楼主

2019-11-12 08:06:54

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有帐号?注册

x
一个简单的登录和注册HTML CSS开发页面9 u) \5 X: d+ w

; o; G: ~' j; }( O login.JPG register.JPG
  i( W3 Y" l3 p7 \3 L登录代码:
: r' J2 N% u) J: Z( `8 X8 F
+ _% y' C9 I% i$ e
[HTML] 纯文本查看 复制代码
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>This is a login form</title>

    <style>
        .modal {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            overflow: auto;
            z-index: 1;
            left: 0;
            top: 0;
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
            padding-top: 60px;

        }

        .modal-content {
            width: 60%;
            background-color: #fefefe;
            margin: 5% auto 15% auto;
            border: 1px solid #888;

        }

        /* The Close Button (x) */
        .closeButton {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }

        .cancelbutton {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }

        span.password {
            float: right;
            padding-top: 16px;
        }

        .closeButton:hover,
        .closeButton:focus {
            color: firebrick;
            cursor: pointer;

        }

        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
            position: relative;
        }

        .avtar {
            width: 40%;
            border-radius: 50%;
        }

        .container {
            padding: 16px;
        }

        /* Full-width input fields */
        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        /* Set a style for all buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }


        button:hover {
            opacity: 0.8;
        }

        /* Add Zoom Animation */
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }

        @-webkit-keyframes animatezoom {
            from {
                -webkit-transform: scale(0)
            }

            to {
                -webkit-transform: scale(1)
            }
        }

        @keyframes animatezoom {
            from {
                transform: scale(0)
            }

            to {
                transform: scale(1)
            }
        }
        /* Change styles for span and cancel button on extra small screens */
        @media screen and (max-width: 300px) {
            span.password {
                display: block;
                float: none;
            }

            .cancelbutton {
                width: 100%;
            }
        }
    </style>
</head>

<body>

    <button id="login">login</button>
    <button id="register">register</button>

    <div id="formPanel" class="modal">
        <form action="./img/logo.png" class="modal-content animate">
            <!-- image -->
            <div class="imgcontainer">
                <span id="closeButton" class="closeButton"
                   
                    title="close form">×</span>
                <img src="./img/img_avatar.png" alt="avatar" class="avtar">
            </div>
            <!-- information -->
            <div class="container">
                <label><b>UserName</b></label>
                <input type="text" placeholder="username" class="username" required>
                <label><b>Password</b></label>
                <input type="password" placeholder="password" class="password" required>
                <button class="loginButton">Login</button>
                <input type="checkbox" checked>Remember Me
            </div>

            <div class="container">
                <button class="cancelbutton" type="button"
                   >Cancel</button>
                <span class="password">Forgot
                    <a href="#">password?</a>
                </span>
            </div>
        </form>
    </div>


    <script>

        function loginForm() {
            var formx = document.getElementById("formPanel")
            formx.style.display = "block"
        }
    </script>


</body>

</html>

. T0 K1 j" S* ?7 K( P5 W, n
. \- Z8 b, D! X7 D6 a( j+ N" a, A( y  F$ j7 j: A! J; q8 X
注册代码9 {& a! q2 y5 N* k: a! N8 a

& i( c& g5 Q, D+ @/ p
[HTML] 纯文本查看 复制代码
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>register form</title>

    <style>
        .panel {
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0, 0.2);
            padding-top: 30px;
            overflow: auto;
            position: fixed;
            left: 0;
            right: 0;
            z-index: 1;
        }

        .modal-content {
            background: #fefefe;
            width: 60%;
            border: 1px solid #888;
            margin: 5% auto 25% auto;

        }

        .container {
            padding: 16px;
        }

        .close {
            font-size: 40px;
            position: absolute;
            top: 15px;
            right: 20px;
        }

        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }

        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px auto;
            border: 1px solid #cccccc;
            display: inline-block;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        .cancelbutton {
            padding: 14px 20px;
            background-color: #f44336;
        }

        .cancelbutton,
        .registerbutton {
            float: left;
            width: 50%
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>



</head>

<body>

    <div id="modal" class="panel">
        <span class="close">x</span>
        <form action="#" class="modal-content">
            <div class="container">
                <label>Email</label>
                <input type="text" placeholder="Emmail" required>
                <label>Username</label>
                <input type="text" placeholder="username" required>
                <label>password</label>
                <input type="password" placeholder="password" required>
                <input type="checkbox" checked> remember me
                <p>Follow the policy <a href="#">terms & privacy</a></p>


                <div class="clearfix">
                    <button class="cancelbutton">Cancel</button>
                    <button class="registerbutton">Register</button>
                </div>
            </div>
        </form>
    </div>





</body>

</html>

4 k4 C6 f: b0 N$ t) R, {7 w) h
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

全部回复2

lacconi 发表于 2019-11-27 15:11:50

lacconi 沙发

2019-11-27 15:11:50

PLM之家二次开发源码分享
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

lacconi 发表于 2019-11-27 15:14:40

lacconi 板凳

2019-11-27 15:14:40

PLM之家二次开发源码分享
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

关闭

站长推荐上一条 /1 下一条

  • 发布新帖
  • 在线客服1
  • 在线客服2
  • 微信
  • 客户端
  • 返回顶部
  • x
    火热推荐

    PLM之家(plmhome.com)提供专业的实施开发培训

    NX二次开发基础培训 | 已 80 学员 参加

    NX二次开发高级培训 | 最高性价比

    CAA二次开发 | 值的一试

    Teamcenter用户基础入门 | 虚拟机赠送

    限时优惠,原价3000,现价888

    哥已知晓