当
DIV1里面嵌套有一个
DIV2,当
DIV2设置了浮动,那么
DIV1是无法被撑开的,也就是说
DIV2在这里相当于浮在了页面上方,跟
DIV1不在同一个层面,导致了
DIV2无法把
DIV1给撑开,这是一个老生常谈的问题,也是困扰很多刚接触
DIV+CSS的朋友的一个问题。
先来看看这个问题的实际效果
这里本来
DIV1是套在了
DIV2的外面的,如果是使用表格做的话,那么
DIV1肯定被撑开了,效果应该是如下所示
那如何解决这个浮动了之后无法把容器撑开的局面呢?解决的方法这里介绍2仲。
第一种:在浮动结束的容器后面加上这段代码
<
div xss=removed></
div>
这次写博客的原因就是自己在学习过程中,想通过点击按钮,然后给
后台传递更新表的参数,当时我查阅很多网上的文章,遇到了很多问题,基本上他们给出的方案都是很简单的解答,但是我的是根据后端返回的数据,动态的生成前端列表,所以那种简单的设置ID的方法不适用,我也费很大力气才解决的,所以,把完整的前后端代码都分享给大家,希望能够给大家带来帮助。
以上是最后的基本界面图,我的目标就是可以通过点击更新状态按钮,将列表中的任务加载日期和任务状态返回给
后台,然后
后台接收到数据后给前端返回success,
一般表單當送出後,需要執行比較長的時間,往往畫面留著,有些使用者等不及會再按看看,造成表單重複送出。其實這個問題可以用一個絕對位置的div搭配簡單的JavaScript就可以把表單遮蓋,讓等待的人按不到按鈕。 程式很簡單,先看一下畫面的部分: <div>
<asp:Button ID="Button1" runat="s...
<meta charset="utf-8">
<title>
后台登录</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<
div class="layui-container">
<
div class="layui-row">
<
div class="layui-col-md12">
<
div class="layui-card">
<
div class="layui-card-header">
后台登录</
div>
<
div class="layui-card-body">
<form class="layui-form" action="">
<
div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<
div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" 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="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" 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>
<
button type="reset" class="layui-btn layui-btn-primary">重置</
button>
</
div>
</
div>
<
div class="layui-form-item">
<
div class="layui-inline">没有账号?</
div>
<
div class="layui-inline">
<
button type="
button" class="layui-btn layui-btn-primary" id="register">立即注册</
button>
</
div>
</
div>
</form>
</
div>
</
div>
</
div>
</
div>
</
div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
//登录表单
提交
form.on('
submit(login)', function(data){
//模拟登录成功
layer.msg('登录成功!');
return false;
//注册按钮点击事件
$('#register').on('click', function(){
//打开注册页面
layer.open({
type: 2,
title: '注册',
area: ['520px', '380px'],
content: 'register.html'
</script>
</body>
</html>
这里使用了layui框架的表单和弹窗功能,实现了一个简单的
后台登录页面。其中,用户名和密码输入框都设置了必填验证,登录按钮绑定了表单
提交事件,点击登录按钮时会弹出登录成功提示框。同时,还添加了一个立即注册按钮,点击时会打开一个注册页面的弹窗。
需要注意的是,这里只是一个简单的示例代码,没有实现真正的登录和注册功能,需要根据具体需求进行修改和完善。