Bootstrap搭建背景轮播的登录界面

最新推荐文章于 2024-06-30 12:00:24 发布

江湖一点雨

最新推荐文章于 2024-06-30 12:00:24 发布

阅读量5.5k

点赞数 9

分类专栏： # 前端Vue/bootstrap/Easyui 文章标签： Bootstrap搭建背景轮播的登录界面登录背景图轮播图片轮播效果

本文链接：https://blog.csdn.net/ITBigGod/article/details/82995348

版权

Bootstrap搭建精美背景轮播的登录界面

博主经常需要开发项目，然而博主是个后端狗，一些常用的，比如登录界面什么的，老是找来找去麻烦，直接先写一个精美背景轮播的登录界面放着，以后好复用。

先上效果图吧：

（omg，我不会上传gif图。静态的看看吧。）

在这里插入图片描述

采用的是bootstrap搭建的，点击注册出现的是模态框面板。
在这里插入图片描述

然后CSS是自定义的。

源码如下：
login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>登录新界面</title>
    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="登录,ssm练习,web项目">
	<meta http-equiv="description" content="This is login page">
	
    <!-- 顺序：先css后jquery最好bootstrap.js -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
	<link rel="stylesheet" href="static/css/style.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.