page language=java import=javautil pageEncoding=utf-8!DOCTYPE htmlhtmlhead link rel=stylesheet href=httpscdnstaticfileorglayui256csslayuicssheadbody div class=layui-container div class=
要实现登录窗口居中,可以使用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 著作权归作者所有。请勿转载和采集!