要实现登录窗口居中,可以使用CSS的flex布局来实现。将登录窗口的外层div设置为flex布局,并设置justify-content和align-items属性为center,即可实现居中对齐。

要实现动态背景,可以使用CSS的background-image属性来设置背景图片,并使用CSS的animation属性来实现动画效果。

以下是修改后的代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
   <style>
      body {
         background-image: url("动态背景图片的URL");
         animation: backgroundAnimation 10s infinite;
      }

      @keyframes backgroundAnimation {
         0% { background-position: 0 0; }
         50% { background-position: 100% 0; }
         100% { background-position: 0 0; }
      }

      .login-container {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
      }
   </style>
</head>
<body>
   <div class="login-container layui-container">
      <div class="layui-row">
         <div class="layui-col-md-offset3 layui-col-md6">
            <h1>登录</h1>
            <form class="layui-form" action="login" method="post">
               <div class="layui-form-item">
                  <label class="layui-form-label">用户名</label>
                  <div class="layui-input-block">
                     <input type="text" name="name" placeholder="请输入用户名" class="layui-input">
                  </div>
               </div>
               <div class="layui-form-item">
                  <label class="layui-form-label">密码</label>
                  <div class="layui-input-block">
                     <input type="password" name="pwd" placeholder="请输入密码" class="layui-input">
                  </div>
               </div>
               <div class="layui-form-item">
                  <div class="layui-input-block">
                     <button class="layui-btn" lay-submit lay-filter="login">登录</button>
                     <a href="reg.jsp">注册</a>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
   <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
   <script>
      layui.use('form', function(){
         var form = layui.form;
         //监听提交
         form.on('submit(login)', function(data){
            //提交表单后的操作
            return true;
         });
      });
   </script>
</body>
</html>

请将"动态背景图片的URL"替换为实际的背景图片URL。


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

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