当前位置： 首页 > news >正文

【宿舍管理系统】注册登录页面的实现(前端）

news 2025/8/26 19:30:45

目录

一.创建一个jsp文件，命名为login.jsp

代码：

1.

2.

3.

 4.

 5.

6.

​编辑

二. 创建一个css文件，并命名为style.css

1.

​编辑效果如下：

​编辑 代码解析：

2.

效果如下：

代码解析：

 3.

效果如下：

 代码解析：

4.

效果如下：

 代码解析：

5.

效果如下：

​编辑

代码解析：

6.

效果如下：

​编辑

代码解析：

 7.

效果如下：

 代码解析：

8.

效果如下：

代码解析：

9.

10.

效果如下：

11.

 效果如下：

三.代码

效果图

一.创建一个jsp文件，命名为login.jsp

制作如下样本

代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body>
<body>
<form action="${pageContext.request.contextPath}/login" name="myform" method="post"><div id="particles-js"><div class="login"><div class="login-top">后台登录</div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/name.png"/></div><div class="login-center-input"><input type="text" id="username" name="username" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/><div class="login-center-input-text">用户名</div></div></div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/password.png"/></div><div class="login-center-input"><input type="password" id="password" name="password" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/><div class="login-center-input-text">密码</div></div></div><div class="login-button" onclick="check()">登录</div><span style="text-align: center;color: red;"><br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;${msg}</span></div><div class="sk-rotating-plane"></div></div>
</form></body>

此段代码只完成前端页面展示的任务

1.

<form action="${pageContext.request.contextPath}/login" name="myform" method="post"><div id="particles-js"><div class="login"><div class="login-top">后台登录</div></div></div>

效果如下：

2.

<form action="${pageContext.request.contextPath}/login" name="myform" method="post"><div id="particles-js"><div class="login"><div class="login-top">后台登录</div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/name.png"/></div></div></div></div>

效果如下：<div class="login-center-img"><img src="${pageContext.request.contextPath}/images/name.png"/></div>

此行代码调用了images文件中的name.png图像

3.

<div id="particles-js"><div class="login"><div class="login-top">后台登录</div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/name.png"/></div><div class="login-center-input"><input type="text" id="username" name="username" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/><div class="login-center-input-text">用户名</div></div></div></div></div>


            <div class="login-center-input">
                <input type="text" id="username" name="username" placeholder="请输入您的用户名" οnfοcus="this.placeholder=''" οnblur="this.placeholder='请输入您的用户名'"/>
                <div class="login-center-input-text">用户名</div>
            </div>

type="text"：表示该输入框是一个文本框。

id="username"：为该输入框指定了一个唯一的标识符，可以通过该标识符来访问和操作该输入框。

name="username"：指定了该输入框的名称，可以在表单提交时将输入框的值与名称一起提交到服务器。

placeholder="请输入您的用户名"：该属性为输入框提供了一个提示文本，当用户未输入任何内容时，该文本将显示在输入框中。在这种情况下，它将显示"请输入您的用户名"。

οnfοcus="this.placeholder=''"：当用户将焦点放在输入框内时，该代码将清空提示文本，以便用户可以直接输入内容。

οnblur="this.placeholder='请输入您的用户名'"：当用户将焦点移出输入框时，如果该输入框中没有输入任何内容，则该代码将重新显示"请输入您的用户名"提示文本。

      效果如下：

 

 4.

<body>
<form action="${pageContext.request.contextPath}/login" name="myform" method="post"><div id="particles-js"><div class="login"><div class="login-top">后台登录</div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/name.png"/></div><div class="login-center-input"><input type="text" id="username" name="username" placeholder="请输入您的用户名"onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/><div class="login-center-input-text">用户名</div></div></div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/password.png"/></div><div class="login-center-input"><input type="password" id="password" name="password" placeholder="请输入您的密码"onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/><div class="login-center-input-text">密码</div></div></div></div></div>
</form>


<div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/password.png"/></div><div class="login-center-input"><input type="password" id="password" name="password" placeholder="请输入您的密码"οnfοcus="this.placeholder=''" οnblur="this.placeholder='请输入您的密码'"/><div class="login-center-input-text">密码</div></div>
</div>

效果如下：

 

 5.

<form action="${pageContext.request.contextPath}/login" name="myform" method="post"><div id="particles-js"><div class="login"><div class="login-top">后台登录</div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/name.png"/></div><div class="login-center-input"><input type="text" id="username" name="username" placeholder="请输入您的用户名"onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/><div class="login-center-input-text">用户名</div></div></div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/password.png"/></div><div class="login-center-input"><input type="password" id="password" name="password" placeholder="请输入您的密码"onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/><div class="login-center-input-text">密码</div></div></div><div class="login-button" onclick="check()">登录</div></div></div>
</form>

<div class="login-button" οnclick="check()">
                登录
            </div>

效果如下：

 

6.

<span style="text-align: center;color: red;"><br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;${msg}</span>

这段代码是在HTML或其他网页标记语言中使用的，它会在页面上显示一个红色文本（文字颜色为红色）的信息，其中${msg}是一个占位符，表示实际显示的消息将由程序或代码动态生成并填充到此处。通过使用居中对齐样式（text-align: center），文本将被放置在页面的中心位置。如果您使用的是某个Web框架或库，这段代码可能已经被预先定义在其中，并且可以非常方便地在您的项目中使用。

二. 创建一个css文件，并命名为style.css

要使用style.css里的样式，必须在login里添加

<link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/css1/style.css">

1.

html,body{width:100%;height:100%;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}

此段代码是关于背景图像的样式

对应如下图所示

效果如下：

 代码解析：

`width: 100%;`: 设置该元素的宽度为 100%。
- `height: 100%;`: 设置该元素的高度为 100%。
- `position: relative;`: 设置该元素在文档流中的定位为相对定位。
- `background-image: url(../images/bg.jpg);`: 设置该元素的背景图片为 `../images/bg.jpg`。
- `background-position: 50% 50%;`: 设置背景图片在元素中水平和垂直方向上的位置为 50%。
- `background-size: cover;`: 设置背景图片按比例缩放以完全覆盖整个元素。
- `background-repeat: no-repeat;`: 禁止背景图片在元素中重复显示。
- `margin-left: auto;`: 设置该元素的左侧外边距为自动。
- `margin-right: auto;`: 设置该元素的右侧外边距为自动。

2.

html,body{width:100%;height:100%;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s; transition: all 1s; -o-transition: all 1s;   }

此行代码对应

效果如下：

代码解析：

- z-index:  2;    控制元素的层级，数值越大越靠前显示。
- position: absolute;     元素的定位方式，这里是绝对定位，相对于父级元素进行定位。
- width：350px;   宽设置为350px

- height: 500px;    高设置为500px
- border-radius:  5px;   元素的圆角度数。（效果图中白色盒子四个圆角的度数）
- background: white;         元素的背景颜色。
- box-shadow:  0px 0px 5px #333333;                 元素的阴影样式。

 -top: 50%;
- left: 50%;
- top和left:    元素相对于父级元素的顶部和左侧位置。

- margin-top: -250px;
- margin-left: -175px;
- margin-top和margin-left: 元素相对于自身所在位置的上方和左侧的距离，一般用于居中元素。

transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -o-transition: all 1s;
- transition和-moz-transition和-o-transition: 控制元素变化过程的动画时长和效果。

 3.

html,body{width:100%;height:100%;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
此行代码对应

此行代码主要作用于后台登录这四个字上

效果如下：

 代码解析：

  font-size: 24px; 设置字体大小为24像素。
- margin-top: 100px; 设置该元素的顶部边缘距离它的容器顶部边缘100像素的距离。
- padding-left: 40px; 设置该元素左侧内边距为40像素。
- box-sizing: border-box; 指定元素的盒模型为border-box，也就是指定元素的宽度和高度包括边框(border)和内边距(padding)。
- color: #333333; 设置文本颜色为#333333，即十六进制颜色码之一。
- margin-bottom: 50px; 设置该元素的底部边缘距离它的容器底部边缘50像素的距离。

4.

html,body{width:100%;height:100%;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}

.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}

此段代码的作用起到居中的作用

此段代码如下：

效果如下：

 代码解析：

.login-center { width: 100%; // 设置该元素的宽度为100%

box-sizing: border-box; // 定义元素的盒模型为border-box，即元素的border和padding值不会增加元素宽度和高度

padding: 0 40px; // 设置元素内边距为0，左右间距为40px

margin-bottom: 30px; // 设置元素下方的外边距为30px }

5.

html,body{width:100%;height:100%;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}

此行代码对应：

效果如下：

代码解析：

.login-center-img表示该元素的类名；

width: 20px; 表示该元素的宽度为20像素；

height: 20px; 表示该元素的高度为20像素；

float: left; 表示该元素浮动到左侧；

margin-top: 5px; 表示该元素顶部与其上面的元素之间有5像素的间隔。

.login-center-img>img{width: 100%;}

作用是将< img >标签的宽度设置为100%。也就是说，< img >标签将会填满其父元素的宽度，而不是保持其原有的宽度。这通常用于确保图像在不同的设备上保持适当的比例和大小以便显示。

6.

html,body{ width:100%;height:100%;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input{
float: left;
width: 230px;
margin-left: 15px;
height: 30px;
position: relative;}

login-center-input input{
z-index: 2;
transition: all 0.5s;
padding-left: 10px;
color: #333333;
width: 100%;
height: 30px;
border: 0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: border-box;
outline: none;position: relative;}

.login-center-input input:focus{border: 1px solid dodgerblue;}

此段代码对应

效果如下：

代码解析：

float: left意味着该元素应该向左浮动，允许其他元素在其右侧排列。

width: 230px指定该元素的宽度为230个像素。

margin-left: 15px将该元素的左侧外边距设置为15个像素，从而在其左侧留出一些空间。

height: 30px指定该元素的高度为30个像素。

position: relative将该元素的定位类型设置为相对定位，这意味着它将相对于其正常位置进行定位，而不是相对于上级元素进行定位。

z-index: 2 - 它决定该元素的堆叠顺序（在其它重叠的元素上下文中），具有更高的 z-index 值将位于具有更低值的元素的上方。

transition: all 0.5s - 它以动画效果过渡了所有样式属性的变化，使得它们更加平滑。

padding-left: 10px - 它设置了该元素的左侧填充。

color: #333333 - 它设置了该元素的文字颜色。

width: 100% - 它设置了该元素的宽度为父元素的宽度。

height: 30px - 它设置了该元素的高度。

border: 0 - 它移除了该元素的默认边框。

border-bottom: 1px solid #cccccc - 它设置了该元素的底部边框为 1 像素宽，颜色为 #cccccc。

border-top: 1px solid #ffffff - 它设置了该元素的上部边框为 1 像素宽，颜色为 #ffffff。

border-left: 1px solid #ffffff - 它设置了该元素的左侧边框为 1 像素宽，颜色为 #ffffff。

border-right: 1px solid #ffffff - 它设置了该元素的右侧边框为 1 像素宽，颜色为 #ffffff。

box-sizing: border-box - 它设置元素框大小包括边框和内边距，但不包括外边距。这意味着该元素的宽度和高度将是指定的内容大小加上边框和填充大小。

outline: none - 它移除了该元素在获得焦点时的默认描边效果。

position: relative - 它设置了该元素的位置方式为相对位置。

.login-center-input input:focus{border: 1px solid dodgerblue;}

其作用是在用户点击一个输入框时，给这个输入框加上一个蓝色的边框。

 7.

html,body{ width:100%;height:100%;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}

.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}

此段代码作用如下

效果如下：

 代码解析：

background：背景颜色为白色。

padding：输入框左右两侧内边距为5像素，上下内边距默认。

position：输入框的定位方式为绝对定位。

z-index：图层的层级为0，即在默认层级显示。

opacity：输入框的不透明度为0，即不可见。

height：输入框的高度为20像素。

top：输入框相对父元素（登录中心）垂直居中对齐。

margin-top：使输入框在垂直方向上以自身高度的一半偏移，来实现完全垂直居中。

font-size：输入框内文字的字号为14像素。

left：输入框距离左边的间距为5像素。

color：输入框内文字的颜色为dodgerblue。

line-height：输入框内文字的行高为20像素，与输入框高度相同。

transition：所有的属性变化都会有0.5秒的过渡动画效果。

-moz-transition：指定火狐浏览器里所有的属性变化都会有0.5秒的过渡动画效果。

-webkit-transition：指定谷歌浏览器里所有的属性变化都会有0.5秒的过渡动画效果。

-o-transition：指定欧朋浏览器里所有的属性变化都会有0.5秒的过渡动画效果。

8.

html,body{ width:100%;height:100%;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}

效果如下：

代码解析：

.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}

当一个输入表单获得焦点时（例如，用户点击或按Tab键进入该表单），对于其相邻的类名为.login-center-input-text的元素，做以下操作：

把该元素的位置定位在输入框顶部（top: 0）。

在其他元素上方使其显示（z-index: 3）。

将其不透明度设置为1（opacity: 1），以便用户可以看到其内容。

将其上方的间距设置为-15像素（margin-top: -15px），以抵消文本移动而产生的留白。

9.

html,body{ width:100%;height:100%;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
.login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
.login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}
.login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}

用于设置登录按钮的样式。其中，设置了按钮的宽度、高度、行高、背景颜色、圆角等属性，并将按钮居中显示在页面上方。使用了"cursor: pointer"属性，使得鼠标悬停在上按钮时会变成手型，增强用户体验。同时，设置了文字按钮的颜色为白色。

10.

html,body{ width:100%;height:100%;
}.js-count-particles{font-size: 1.1em;
}#stats,
.count-particles{-webkit-user-select: none;margin-top: 5px;margin-left: 5px;
}#stats{border-radius: 3px 3px 0 0;overflow: hidden;
}.count-particles{border-radius: 0 0 3px 3px;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}body{margin:0;padding:0;}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
.login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
.login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}
body{margin:0;padding:0;}

body中元素的边距和内边距为0。这样可以让整个页面的内容紧贴着浏览器窗口显示，不会有额外的空白区域

效果如下：

 背景图像完全覆盖了网页页面

11.

html,body{ width:100%;height:100%;
}.js-count-particles{font-size: 1.1em;
}#stats,
.count-particles{-webkit-user-select: none;margin-top: 5px;margin-left: 5px;
}#stats{border-radius: 3px 3px 0 0;overflow: hidden;
}.count-particles{border-radius: 0 0 3px 3px;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}body{margin:0;padding:0;}
.clearfix:after{visibility:hidden;display: block;font-size:0;content:" ";clear:both;height:0;}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
.login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
.login.active{-webkit-animation: login-small 0.8s ; animation: login-small 0.8s ;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}
.clearfix:after{visibility:hidden;display: block;font-size:0;content:" ";clear:both;height:0;}

用于一个创建清除浮动的类。通过在元素上添加这个类，可以清除元素的中浮动，防止对后续元素造成影响。其中，使用了伪元素":after"来插入一个空格，达到清除浮动的效果。

 效果如下：

三.代码

相关文件，图像下载：

https://download.csdn.net/download/m0_67930426/87902949?spm=1001.2014.3001.5503

login.jsp

<%--Created by IntelliJ IDEA.User: 23502Date: 2023/6/3Time: 18:18To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/css1/style.css"><title>Title</title>
</head><body>
<form action="${pageContext.request.contextPath}/2" name="myform" method="post"><div id="particles-js"><div class="login"><div class="login-top">后台登录</div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/name.png"/></div><div class="login-center-input"><input type="text" id="username" name="username" placeholder="请输入您的用户名"onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/><div class="login-center-input-text">用户名</div></div></div><div class="login-center clearfix"><div class="login-center-img"><img src="${pageContext.request.contextPath}/images/password.png"/></div><div class="login-center-input"><input type="password" id="password" name="password" placeholder="请输入您的密码"onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/><div class="login-center-input-text">密码</div></div></div><div class="login-button" onclick="check()">登录</div><span style="text-align: center;color: red;"><br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;${msg}</span></div><div class="sk-rotating-plane"></div></div>
</form></body>
</html>

style.css

html,body{ width:100%;height:100%;
}.js-count-particles{font-size: 1.1em;
}#stats,
.count-particles{-webkit-user-select: none;margin-top: 5px;margin-left: 5px;
}#stats{border-radius: 3px 3px 0 0;overflow: hidden;
}.count-particles{border-radius: 0 0 3px 3px;
}#particles-js{width: 100%;height: 100%;position: relative;background-image: url(../images/bg.jpg);background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;margin-left: auto;margin-right: auto;
}body{margin:0;padding:0;}
.clearfix:after{visibility:hidden;display: block;font-size:0;content:" ";clear:both;height:0;}.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
.login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
.login.active{-webkit-animation: login-small 0.8s ; animation: login-small 0.8s ;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}

相关文章：

【宿舍管理系统】注册登录页面的实现(前端）

目录 一.创建一个jsp文件&#xff0c;命名为login.jsp 代码&#xff1a; 1. 2. 3. 4. 5. 6. ​编辑 二. 创建一个css文件&#xff0c;并命名为style.css 1. ​编辑效果如下&#xff1a; ​编辑 代码解析&#xff1a; 2. 效果如下&#xff1a; 代码解析&#xff1…...

编程日记 2023/6/18 11:49:13

python写入excel,(二) 言简意赅傻瓜式写法

xlrd限制条数&#xff0c;openpyxl 上限较高&#xff0c;所以推荐这种写法 import openpyxl # openpyxl引入模块 def write_to_excel(path: str, sheetStr, info, data): # 实例化一个workbook对象 workbook openpyxl.Workbook() # 激活一个sheet …...

编程日记 2023/6/18 11:15:52

我用ChatGPT写2023高考语文作文（六）：北京卷II

2023年 北京卷 II 适用地区&#xff1a;北京 舞台上&#xff0c;戏曲演员有登场亮相的瞬间。生活中也有许多亮相时刻&#xff1a;国旗下的讲话&#xff0c;研学成果的汇报&#xff0c;新产品的发布……每一次亮相&#xff0c;都受到众人关注&#xff1b;每一次亮相&#xff0c;…...

编程日记 2023/6/18 10:42:31

Vue中如何进行图表绘制

Vue中如何进行图表绘制 数据可视化是Web应用中非常重要的一部分&#xff0c;其中图表绘制是其中的重要环节。Vue作为一款流行的前端框架&#xff0c;提供了很多优秀的图表库&#xff0c;以满足不同业务场景下的需求。本文将介绍如何在Vue中进行图表绘制&#xff0c;包括使用Vu…...

编程日记 2023/6/18 10:09:10

【Soft-prompt Tuning for Large Language Models to Evaluate Bias 论文略读】

Soft-prompt Tuning for Large Language Models to Evaluate Bias 论文略读 INFORMATIONAbstract1 Introduction2 Related work3 Methodology3.1 Experimental setup 4 Results5 Discussion & Conclusion总结A Fairness metricsB Hyperparmeter DetailsC DatasetsD Prompt …...

编程日记 2023/6/18 9:35:49

Qt 定时器与定时事件

一、定时器 在头文件.h中进行声明&#xff1a; private slots:void timeOut(); // 定时器超时槽函数在.cpp中进行实现相应的功能&#xff1a; // 构造函数 Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this);// 创建一个新的定时…...

编程日记 2023/6/18 9:02:28

《UNUX环境高级编程》(1)UNIX基础

1、引言 2、UNIX体系结构 操作系统 一种软件&#xff0c;控制计算机硬件资源&#xff0c;提供程序运行环境。操作系统包含了内核和一些其他软件&#xff08;如shell、公用函数库、应用程序等&#xff09;。例如Linux就是GNU操作系统的内核&#xff0c;因此也称为GNU/Linux操作…...

编程日记 2023/6/18 8:29:07

MATLAB 入门之旅摘要

matlab官方基础课程&#xff0c;重温或者入门都是不错的选择。 MATLAB 入门之旅 MATLAB 入门之旅 | 自定进度在线课程 - MATLAB & Simulink 基本语法 示例说明x pi使用等号 () 创建变量。 左侧 (x) 是变量的名称&#xff0c;其值为右侧 (pi) 的值。y sin(-5)您可以使用括…...

编程日记 2023/6/18 7:55:46

chatgpt赋能python：Python小数运算：解决精度问题的最佳实践

Python小数运算&#xff1a;解决精度问题的最佳实践 在进行小数运算时&#xff0c;Python是一种十分常用的语言&#xff0c;但在进行小数运算时&#xff0c;由于二进制和十进制之间的转换不完全&#xff0c;可能会导致一些精度问题。为了避免这些问题&#xff0c;让我们一起了…...

编程日记 2023/6/18 7:22:25

Linux 安装Docker完整教程（六）

文章目录 背景一、Docker简介二、docker desktop 和 docker engin 区别三、Linux 安装Docker1. 安装docker的前置条件&#xff1a;2. 查看Docker版本3. 检查是否安装过Docker4. Docker自动化安装 (不想自带化安装的可跳过本步骤&#xff0c;选择手动安装)5. Docker手动安装&…...

编程日记 2023/6/18 6:49:04

手机连接adb 相关问题汇总

目录 关于端口占用问题1 关于修改adb 端口配置问题2 方法3 方法4 关于端口占用问题1 转载链接&#xff1a;https://www.jianshu.com/p/902a89b06271 报错信息&#xff1a; error: no device/emulators found error: device still connecting 解决方案&#xff1a; 重启…...

编程日记 2023/6/18 6:15:43

MySQL数据相关操作

一、介绍 MySQL数据操作&#xff1a; DML 在MySQL管理软件中&#xff0c;可以通过SQL语句中的DML语言来实现数据的操作&#xff0c;包括 使用INSERT实现数据的插入 UPDATE实现数据的更新 使用DELETE实现数据的删除 使用SELECT查询数据以及。 二、插入数据INSERT 1. 插入完整…...

编程日记 2023/6/18 5:42:21

2023年5月青少年软件编程（Python） 等级考试试卷（四级）

青少年软件编程&#xff08;Python&#xff09; 等级考试试卷&#xff08;四级&#xff09;2023.6 分数&#xff1a; 100 题数&#xff1a; 38 一、 单选题(共 25 题&#xff0c; 共 50 分) 1.下列程序段的运行结果是&#xff1f; &#xff08; &#xff09; def s(n): if n0: …...

编程日记 2023/6/18 5:09:01

Python selenium自动化测试模型图解

1、线性测试 优势&#xff1a;每一个脚本都是完整独立的&#xff0c;每一个脚本对应一个测试用例 缺点&#xff1a;开发成本高&#xff0c;会有重复操作重复脚本&#xff1b;维护成本也高&#xff0c;修改重复操作的脚本时&#xff0c;要逐一进行修改。 2、模块化驱动测试 …...

编程日记 2023/6/18 4:35:40

【详解】篮球记分牌硬件及代码

篮球记分牌设计 1 系统设计1.1 设计任务 1.2 性能指标要求1.2 设计思路及设计框图1.2.1设计思路1.2.2总体设计框图1.2.3电路原理图1.2.3 PCB布线图 2 主要程序模块的设计及原理2.1 外部中断0 2.2 菜单2.3 两队比分及两队犯规次数显示及修改2.3.1选择功能2.3.2修改功能2.3.3显示…...

编程日记 2023/6/18 4:02:18

FreeRTOS实时操作系统（二）系统文件代码学习

文章目录 前言系统配置任务创建任务创建删除实践 前言 接着学习正点原子的FreeRTOS教程&#xff0c;涉及到一些详细的系统内文件代码 系统配置 可以通过各种的宏定义来实现我们自己的RTOS配置&#xff08;在FreeRTOSconfig.h&#xff09; “INCLUDE”&#xff1a;配置API函数…...

编程日记 2023/6/18 3:28:57

分布式驱动电动汽车定速巡航控制

目录 前言 1. 电机模型 1.1电机数学模型 1.2 电机传递函数模型 2. 控制器设计...

编程日记 2023/6/18 2:55:37

如何启动和关闭分布式集群

分布式集群是由多个节点组成的系统&#xff0c;可以提供高性能、高可用、高扩展的数据处理能力。本文介绍如何启动和关闭一个包含hadoop、zookeeper、hbase和spark的分布式集群。 目录 启动顺序 关闭顺序 启动和关闭hadoop 启动hadoop 关闭hadoop 查看网页 启动和关闭z…...

编程日记 2023/6/18 2:22:15

WLAN基本概述及简单组网配置

WLAN概述 WLAN即Wireless LAN（无线局域网），是指通过无线技术构建的无线局域网络。WLAN广义上是指以无线电波、激光、红外线等无线信号来代替有线局域网中的部分或全部传输介质所构成的网络。 家庭WLAN产品： 家庭Wi-Fi路由器：通过把有线网络信号转换成无线信号，供家庭电…...

编程日记 2023/6/18 1:48:55

响应式Web设计单元测试

响应式Web设计单元测试 一. 单选题 &#xff08;共8题&#xff0c;40.0分&#xff09;二. 多选题 &#xff08;共5题&#xff0c;25.0分&#xff09;三. 判断题 &#xff08;共7题&#xff0c;35.0分&#xff09; 一. 单选题 &#xff08;共8题&#xff0c;40.0分&#xff09; …...

编程日记 2023/6/18 1:15:33

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/8/19 6:29:21

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/8/23 0:28:26

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/8/22 5:18:02

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2025/8/20 16:04:45

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/6/15 11:47:07

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/8/22 6:01:04

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2025/8/22 6:27:41

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）

在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...

编程新知 2025/7/22 19:40:37

【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...

编程新知 2025/8/22 5:02:20

el-amap-bezier-curve运用及线弧度设置

文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 ‌el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件，用于在 高德地图 上绘制贝塞尔曲线。‌ 基本用法属性path定义曲线的路径，可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...

编程新知 2025/7/7 4:53:16