page language=java import=javautil pageEncoding=UTF-8!DOCTYPE htmlhtmlhead link rel=stylesheet href=httpscdnstaticfileorglayui256csslayuicss script src=httpscdnstaticfileorglayui256layuijsscript
您可以使用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-repeat和background-size: cover来控制背景图片的重复和适应窗口大小。
请注意替换代码中的your_background_image.jpg为您自己的背景图片路径。
原文地址: https://www.cveoy.top/t/topic/hMMC 著作权归作者所有。请勿转载和采集!