CSS 实现系统登录界面（一）

快来打我* 2022-07-19 11:48 394阅读 0赞

设置页面背景被全部覆盖实现过程中出现，图片周边存在边框，白边。这个边是 body 标签的边框，去除边框实现代码详细如下：

可除去页面的边界。

设置登录界面中提交表单的文本框位置，可以通过 div 标签的相对位置实现。同时，设置文本是否显示在图层之上可以通过图层索引实现。

保证在div之中，各个模块的排列分布。

详细代码实现如下：

<!DOCTYPE html>

登陆界面

管理系统

        <!--<div  style="position: absolute;z-index:5;left:42%;top:20%; width:100%;">-->
            <!--<div class="container">-->
                <!--<h1 class="gdName" style="text-align: center;font-size: 48px"> **** 系统</h1>-->
                <!--<div class="login">-->
                    <!--<form id="loginForm">-->
                        <!--<input class="form-control" type="text"  name="username" id="inputEmail" value=""  placeholder="12位员工编号" required autofocus>-->
                        <!--<input class="form-control" type="password"  name="password" id="inputPassword" value="" placeholder="密码" required>-->
                        <!--<p id="loginInfo"></p>-->
                        <!--<button type="button" class="btn btn-primary btn-block" id="loginButton">登录</button>-->
                        <!--<div class="checkbox">-->
                            <!--<input id="me" value="me" name="rememberMe" type="checkbox" value="remember-me" style="position: relative;"><label for="me" style="padding-left: 1px">记住密码</label>-->
                        <!--</div>-->
                    <!--</form>-->
                <!--</div>-->
            <!--</div>-->
        <div style="position: absolute;z-index:5;left:0;top:20%; width:100%;">
            <center>
            <form action = "login_check.jsp" method = "post">
                <table border = "1">
                    <tr>
                    <td colspan = "2">
                        用户登录
                    </td>
                    </tr>
                    <tr>
                        <td>
                            用户昵称
                        </td>
                    <td>
                        <input class="form-control" type="text"  name="username" id="inputEmail" value=""  placeholder="12位员工编号" required autofocus>
                    </td>
                    </tr>
                    <tr>
                        <td>
                            用户密码
                        </td>
                    <td>
                        <input class="form-control" type="password"  name="password" id="inputPassword" value="" placeholder="密码" required>
                    </td>
                    </tr>
                    <tr>
                    <td colspan = "2">
                        <input type = "submit" value = "登陆">
                        <input type = "reset" value = "重置">
                    </td>
                    </tr>
                    <tr>
                    </tr>
                </table>
            </form>
            </center>
        </div>
    </div>
</div>
</body>
</html>