css实现极简登录注册表单页面效果代码-html代码-BFW代码库

css实现极简登录注册表单页面效果代码

代码语言：html

所属分类：其他

代码描述：css实现极简登录注册表单页面效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="//repo.bfw.wiki/bfwrepo/js/eruda.js"></script>
    <script>
        eruda.init();
    </script>
    <meta charset="UTF-8">

    <style>
        *{font-family:微软正黑体}body{background-color:white}#username,#password,h3,#fullname,#comfirm_password,#username2,#password2{width:200px;height:20px;margin:10px;color:#df5334}h5{margin:20px;color:#a3a2a3}h5:hover{color:black}#container1,#container2{//margin:50px;padding:10px;width:230px;height:300px;background-color:white;border-radius:5px;border-top:10px solid #df5334;box-shadow:0 0 70px rgba(0,0,0,0.1);position:relative;margin:auto;top:100px;//text-align:center}.system_name{position:relative;margin:auto;top:100px;text-align:center}.submit{color:white;background:#df5334;width:200px;height:30px;margin:10px;padding:5px;border-radius:5px;border:0}.submit:hover{background:#db6937}#container2{visibility:hidden;height:350px}#copyright{text-align:center;color:#a3a2a3;margin:-200px 0 0 0;font-size:14px}input{padding:5px;border:0;border:solid 1px #ccc;border-radius:5px}
    </style>
</head>

<body>

    <div class="system_name">
        <h2>OA系统</h2>
    </div>
    <div class="login_page">
        <div id="container1">
            <div class="login">
                <h3>登入 Login</h3>
                <form action=""><input type="text" id="username" name="username" placeholder="帐号" required>
                    <div class="tab"></div><input type="text" id="password" name="password" placeholder="密码" required>
                    <div class="tab"></div><input type="submit" value="登入" class="submit" onclick="location.href=''"></form>
                <h5 onclick="show_hide()">注册帐号</h5>
            </div>
            <!-- login end-->
        </div>
        <!-- container1 end-->
    </div>
    <!-- login_page end-->
    <div class="signup_page" <div id="container2">
        <div .........完整代码请登录后点击上方下载按钮下载查看