您可以使用CSS来实现登录窗口居中和背景的效果。以下是一个示例代码:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
    <style>
        body {
            background-image: url("your_background_image.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            padding: 20px;
            background-color: white;
            border-radius: 5px;
        }
        
        .login-title {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
    </style>
    <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
</head>

<body>
    <div class="login-container">
        <h1 class="login-title">注册用户</h1>
        <form class="layui-form" action="reg" method="post">
            <!-- 表单内容 -->
        </form>
    </div>

    <script>
        layui.use('form', function () {
            var form = layui.form;

            //监听提交
            form.on('submit(formSubmit)', function (data) {
                //提交表单逻辑
                //...

                return false; //阻止表单跳转
            });
        });
    </script>
</body>

</html>

在上述代码中,我们使用了CSS的position: absolute来将登录窗口定位在页面的中心。通过top: 50%left: 50%将登录窗口的左上角定位在页面的中心点,然后使用transform: translate(-50%, -50%)将登录窗口向左上方移动自身宽度和高度的一半,以实现居中效果。

同时,我们使用了CSS的background-image来设置背景图片,并使用background-repeat: no-repeatbackground-size: cover来控制背景图片的重复和适应窗口大小。

请注意替换代码中的your_background_image.jpg为您自己的背景图片路径。

page language=java import=javautil pageEncoding=UTF-8!DOCTYPE htmlhtmlhead link rel=stylesheet href=httpscdnstaticfileorglayui256csslayuicss script src=httpscdnstaticfileorglayui256layuijsscript

原文地址: https://www.cveoy.top/t/topic/hMMC 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录