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

最新推荐文章于 2024-03-30 10:59:22 发布
最新推荐文章于 2024-03-30 10:59:22 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： 学生宿舍管理系统 文章标签： java css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67930426/article/details/131024066
版权

目录

一.创建一个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: 23502
  Date: 2023/6/3
  Time: 18:18
  To 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;}
freedomSTUDENT
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nodejs前端学生宿舍管理系统源码也可作为毕业设计.zip
05-24
Nodejs前端学生宿舍管理系统源码也可作为毕业设计。Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计Nodejs前端学生宿舍管理系统源码也可作为毕业设计
Java+Swing+sqlserver学生成绩管理系统
qq_33037637的博客
05-21 5724
Java+Swing+sqlserver学生成绩管理系统一、系统介绍二、系统展示1.登陆2.课程分配3.选课管理4.学生打分--教师4.查询个人成绩--学生三、其他1.其它系统2.获取源码 一、系统介绍 管理员:登陆页面、课程管理、选课管理 老师：给学生打分 学生：查询个人成绩 二、系统展示 1.登陆 2.课程分配 3.选课管理 4.学生打分–教师 4.查询个人成绩–学生 三、其他 1.其它系统 Java+Swing实现学生选课管理系统 Java+Swing实现学校教务管理系统 Java+Swin
宿舍管理系统——毕业设计
qq_49523975的博客
03-16 900
是一个基于java开发的一个网站（自己写的一个毕业设计），主要是基于springboot开发的，主要功能有，登录/注册功能，用户首页展示和布局，系统管理员页面和布局，用户管理模块功能，快递员管理模块，订单管理模块，修改密码和修个个人信息功能，用户订单添加功能
学生信息管理系统 —— 前端篇
2401_83916030的博客
03-30 770
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-9J2dqe4F-1711767523648)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）
基于Vue+ElementUi+NodeJS+Mysql 的高校宿舍管理系统
m0_46108627的博客
01-13 703
个人中心 楼宇管理 宿舍管理 用户权限管理 学生管理 后勤服务 生活服务 统计中心。个人中心 楼宇管理 宿舍管理 学生管理 后勤服务 生活服务 统计中心。个人中心 后勤服务 生活服务。
【网页实战项目设计】023学生宿舍管理系统
卓怡学长的博客
04-22 4676
互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对学生宿舍信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用学生宿舍管理系统可以有效管理，使信息管理能够更加科学和规范。 学生宿舍管理系统在Eclipse环境中，使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理员管理宿管员，管理学生，修改密码，维护个人信息。宿管员管理公寓资
SpringBoot+Vue实现学生宿舍管理系统
分享技术热点，看天下大事
08-04 627
本文主要论述了如何使用springboot开发一个学生学生宿舍管理系统，本系统将严格按照软件开发流程进行各个阶段的工作，采用B/S架构，面向对象编程思想进行项目开发。在引言中，作者将论述学生宿舍管理系统的当前背景以及系统开发的目的，后续章节将严格按照软件开发流程，对系统进行各个阶段分析设计。
前端三大件html,css,js原生实现学生信息管理系统（课程设计）
m0_55315930的博客
05-18 3821
前端三大件html,css,js原生实现学生信息管理系统（课程设计）。包括登录、学生信息添加、学生信息删除、学生信息修改、学生信息查询等功能，未登录验证等功能。退出登录等。
学生宿舍管理系统（前端部分！）
06-23
基本满足了课程实训学生宿舍管理系统所需要的全部网页等前端需求，没有包括后端部分。
基于Vue和Java的学生宿舍管理系统前端设计源码
最新发布
04-15
基于Vue和Java的学生宿舍管理系统前端设计源码，该项目包含43个文件，主要文件类型有26个vue...该项目是一个基于Vue和Java的学生宿舍管理系统前端设计源码，可能涉及用户界面设计、应用逻辑实现、数据存储等多个方面。
基于Java与SSM框架的宿舍管理系统源码
03-25
项目概述：基于Java与SSM框架的宿舍管理系统 ...简而言之，这是一个基于SSM框架开发的宿舍管理系统，不仅界面友好、操作便捷，而且能够高效地处理宿舍相关的各项业务，是提升宿舍管理效率的得力工具。
简单的学生信息管理前台页面
01-09
简答的实现的学生细心管理页面 查询 添加修改删除，和个人信息的设置
宿舍管理系统项目课程设计
01-18
基于SSM框架实现的宿舍关系系统，界面设计美观大气，系统功能齐全，有了这个之后，你能成为宿管大妈的宠儿，再也不担心晚上十二点回宿舍没人给你开门了。 实现的功能有： 1.管理员的登录与登出 2.管理员,班级,学生...
基于c# 的学生宿舍管理系统设计与实现-很全的.doc
06-28
基于c# 的学生宿舍管理系统设计与实现_很全的.doc 摘要：管理信息系统在现代社会已深入到各行各业，由于计算机技术的迅速发展和普及，信息管理系统MIS事实上已成为计算机管理信息系统,大学生宿舍管理系统就是一个...
学生信息管理系统（纯前端页面）———无后端数据库
热门推荐
ybbgrain的历程
01-03 3万+
无后端数据库版本的----学生信息管理系统 文末下载地址 这学期的前端作业很奇怪，不用数据库实现学生信息管理系统，随便写了下。 具体功能如下： 实现了查看信息（单击查看按钮，查看具体信息，且为不可修改格式） 实现了修改信息功能（单击修改按钮，可以对学生的信息进行修改） 实现了新增功能（可以新增加一个学生的信息，添加到最后边） 实现了删除功能（在复选框中选择几个就删除几个） 实现了全...
管理系统用户登录功能
JAVA领域优质创作者，基于分片网络查询方法专利发明者。
08-23 4634
任何一个管理信息系统都会有登录功能。我们简单可以通过用户名加密码加验证码进行登录。但是就是一个这样的简单功能却涉及的要求很多。 比如对账号的要求，对密码复杂度的要求，对登录时长的要求，对密码有效期的要求，对登录用户登录日志的记录，登录用户的权限等等。非常非常多。本文就介绍简单的登录功能。
前端大作业_html5+css3+js学生宿舍管理系统基本框架
qq_54800157的博客
06-19 849
【代码】前端大作业_html5+css3+js学生宿舍管理系统基本框架。
前端----如何制作学生管理系统【2】
lxt135744的博客
03-16 1055
技术主要是elementui以及vue2，并且学生管理系统是我们老师一步步带着我们画的，本节内容是课程的第二部分：画首页框架+学生管理界面。
基于django框架写一个简易的问答系统前端
06-12
好的，下面是基于Django框架的简易问答系统前端代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>问答系统</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1 class="text-center">问答系统</h1> <hr> <div class="row"> <div class="col-md-6 offset-md-3"> <form id="question-form"> <div class="form-group"> <label for="question">请输入问题：</label> <input type="text" class="form-control" id="question" name="question" required> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </div> <hr> <div class="row"> <div class="col-md-6 offset-md-3"> <div id="answer-panel" style="display:none"> <h3>答案：</h3> <p id="answer"></p> </div> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <script> $(function() { $('#question-form').on('submit', function(event) { event.preventDefault(); var question = $('#question').val(); $.ajax({ url: '/api/answer/', type: 'POST', dataType: 'json', data: {question: question}, success: function(data) { $('#answer').text(data.answer); $('#answer-panel').show(); } }); }); }); </script> </body> </html> ``` 解释一下代码： 1. 首先是 HTML 部分，使用 Bootstrap 框架布局，包括一个输入问题的表单和显示答案的面板。表单包括一个文本框和一个提交按钮，使用了 HTML5 的 required 属性要求用户必须输入问题才能提交。 2. 在代码底部是 JavaScript 部分，使用 jQuery 库实现了 AJAX 异步提交表单，并且在成功时显示答案面板。其中的 URL `/api/answer/` 是后端 API 的地址，通过 POST 方法提交问题给后端，并且接收返回的 JSON 格式数据，其中包括答案的内容。 这是一个简单的问答系统前端示例，可以与后端 API 配合使用，实现一个完整的问答系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值