jsp设计精美的登录页面，要求包含css
时间: 2023-08-22 14:33:30 浏览: 48
好的，我可以给您提供一份简单的代码，实现一个设计精美的登录页面，并包含 CSS 样式。
HTML 代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class="login-box">
<h2>登录</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>用户名</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>密码</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
提交
</a>
</form>
</div>
</body>
</html>
```
CSS 代码：
```css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to bottom, #00b4db, #0083b0);
font-family: sans-serif;
}
.login-box{
width: 320px;
height: 420px;
background: #fff;
color: #000;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
padding: 70px 30px;
}
.login-box h2{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box .user-box{
position: relative;
}
.login-box .user-box input{
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #000;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #000;
outline: none;
background: transparent;
}
.login-box .user-box label{
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #000;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label{
top: -20px;
left: 0;
color: #00b4db;
font-size: 12px;
}
.login-box form a{
position: relative;
display: inline-block;
padding: 10px 20px;
color: #fff;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(to right, #00b4db, #0083b0);
border: none;
cursor: pointer;
margin-top: 40px;
transition: .5s;
}
.login-box form a:hover{
background: #fff;
color: #000;
}
.login-box form a span{
position: absolute;
display: block;
}
.login-box form a span:nth-child(1){
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(to right, #00b4db, #0083b0);
animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
.login-box form a span:nth-child(2){
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, #00b4db, #0083b0);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s;
}
@keyframes btn-anim2 {
0%{
top: -100%;
}
50%,100%{
top: 100%;
}
}
.login-box form a span:nth-child(3){
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(to left, #00b4db, #0083b0);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s;
}
@keyframes btn-anim3 {
0%{
right: -100%;
}
50%,100%{
right: 100%;
}
}
.login-box form a span:nth-child(4){
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to top, #00b4db, #0083b0);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s;
}
@keyframes btn-anim4 {
0%{
bottom: -100%;
}
50%,100%{
bottom: 100%;
}
}
```
以上是一个简单的登录页面的代码，包含了一些 CSS 样式，可以根据您的需要进行修改和调整。
相关推荐
最新推荐
JSP实现用户登录、注册和退出功能
主要为大家详细介绍了JSP实现用户登录、注册和退出功能，具有实用性和参考价值，感兴趣的小伙伴们可以参考一下
jsp人事管理系统课程设计实验报告.doc
在登陆界面有选择管理员和员工登录选项框，分别进入管理员界面和员工界面，实现管理员和员工功能的区分，实现权限的管理，管理员拥有所有功能，员工只有员工模块中显示和修改员工信息功能，显示考勤功能，显示员工...
JSP实现简单的用户登录并显示出用户信息的方法
主要介绍了JSP实现简单的用户登录并显示出用户信息的方法,通过简单的登陆及登陆显示页面实现这一功能,具有一定参考借鉴价值,需要的朋友可以参考下
servlet+jsp实现过滤器 防止用户未登录访问
一种是在jsp页面进行session的判断，如果不存在该用户的session，就跳转到登录页面，否则执行jsp页面代码，但是你会发现这样做逻辑也简单，但是非常麻烦，如果有很多个jsp，那么就要写多个判断。 另一种则是利用过滤...
JSP学生学籍管理系统毕业设计论文
2.2 JSP技术 7 2.3 Servlet技术 8 2.3.1 Servlet的生命周期 8 2.3.2 Java Servlet API 9 2.4 Struts技术 11 2.5 WEB技术 13 2.6 JavaScript技术 15 2.7 MySql数据库简介 16 2.8 开发工具 17 第三章 系统的分析与总体...
RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
REALTEK 8188FTV 8188eus 8188etv linux驱动程序稳定版本， 支持AP,STA 以及AP+STA 共存模式。 稳定支持linux4.0以上内核。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
：YOLOv1目标检测算法：实时目标检测的先驱，开启计算机视觉新篇章
# 1. 目标检测算法概述
目标检测算法是一种计算机视觉技术，用于识别和定位图像或视频中的对象。它在各种应用中至关重要，例如自动驾驶、视频监控和医疗诊断。
目标检测算法通常分为两类：两阶段算法和单阶段算法。两阶段算法，如 R-CNN 和 Fast R-CNN，首先生成候选区域，然后对每个区域进行分类和边界框回归。单阶段算法，如 YOLO 和 SSD，一次性执行检
设计算法实现将单链表中数据逆置后输出。用C语言代码
如下所示：
```c
#include <stdio.h>
#include <stdlib.h>
// 定义单链表节点结构体
struct node {
int data;
struct node *next;
};
// 定义单链表逆置函数
struct node* reverse(struct node *head) {
struct node *prev = NULL;
struct node *curr = head;
struct node *next;
while (curr != NULL) {
next
c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
校园超市商品信息管理系统课程设计旨在帮助学生深入理解程序设计的基础知识，同时锻炼他们的实际操作能力。通过设计和实现一个校园超市商品信息管理系统，学生掌握了如何利用计算机科学与技术知识解决实际问题的能力。在课程设计过程中，学生需要对超市商品和销售员的关系进行有效管理，使系统功能更全面、实用，从而提高用户体验和便利性。
学生在课程设计过程中展现了积极的学习态度和纪律，没有缺勤情况，演示过程流畅且作品具有很强的使用价值。设计报告完整详细，展现了对问题的深入思考和解决能力。在答辩环节中，学生能够自信地回答问题，展示出扎实的专业知识和逻辑思维能力。教师对学生的表现予以肯定，认为学生在课程设计中表现出色，值得称赞。
整个课程设计过程包括平时成绩、报告成绩和演示与答辩成绩三个部分，其中平时表现占比20%，报告成绩占比40%，演示与答辩成绩占比40%。通过这三个部分的综合评定，最终为学生总成绩提供参考。总评分以百分制计算，全面评估学生在课程设计中的各项表现，最终为学生提供综合评价和反馈意见。
通过校园超市商品信息管理系统课程设计，学生不仅提升了对程序设计基础知识的理解与应用能力，同时也增强了团队协作和沟通能力。这一过程旨在培养学生综合运用技术解决问题的能力，为其未来的专业发展打下坚实基础。学生在进行校园超市商品信息管理系统课程设计过程中，不仅获得了理论知识的提升，同时也锻炼了实践能力和创新思维，为其未来的职业发展奠定了坚实基础。
校园超市商品信息管理系统课程设计的目的在于促进学生对程序设计基础知识的深入理解与掌握，同时培养学生解决实际问题的能力。通过对系统功能和用户需求的全面考量，学生设计了一个实用、高效的校园超市商品信息管理系统，为用户提供了更便捷、更高效的管理和使用体验。
综上所述，校园超市商品信息管理系统课程设计是一项旨在提升学生综合能力和实践技能的重要教学活动。通过此次设计，学生不仅深化了对程序设计基础知识的理解，还培养了解决实际问题的能力和团队合作精神。这一过程将为学生未来的专业发展提供坚实基础，使其在实际工作中能够胜任更多挑战。