自做的登陆页面

最新推荐文章于 2024-06-19 22:36:06 发布
最新推荐文章于 2024-06-19 22:36:06 发布
阅读量107 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45829350/article/details/107211645
版权

页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%-- 静态资源文件版本声明 --%>
	<%long version = 1; %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet"
          href="../common/css/bootstrap_css/bootstrap.min.css">
    <!--网页标题左侧显示-->
    <!-- <link rel="icon" href="../common/img/bitbug_favicon.ico2"
        type="image/x-icon"> -->
    <link rel="icon" href="../common/img/fac.ico" type="image/x-icon">
    <!--收藏夹显示图标-->
    <!-- <link rel="shortcut icon" href="../common/img/bitbug_favicon.ico"
        type="image/x-icon"> -->
    <!-- <title data-i18n-text="logo"></title> -->

    <title data-i18n-text="titleContent2"></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css">
    <link rel="stylesheet" href="../common/css/definedCss/login.css?version=<%=version%>">
</head>
	<body>
		<%-- 公钥 --%>
		<input id="publicKeyExponent" type="hidden"/>
		<%-- 加密用的模 --%>
		<input id="publicKeyModulus" type="hidden"/>

		<div class="btn-group LanguageChange">
		    <button type="button" class="btn btn-default dropdown-toggle language" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		        中文简体<span class="caret"></span>
		    </button>
		    <ul class="dropdown-menu" style="width: 100%">
		        <%--<li style="text-align: center"><a href="javascript:void(0)">中文简体</a></li>
		        <li style="text-align: center"><a href="javascript:void(0)">中文繁体</a></li>
		        <li style="text-align: center"><a href="javascript:void(0)">English</a></li>--%>
		    </ul>
		</div>

		<div class="div_companytitle">
		    <span style="font-size: 20px; font-weight: bold;color: #0171C7">Demo</span>
		    <br>
		    <span style="font-size: 20px; font-weight: bold;color: #0171C7" class="description">管理平台</span>
			<br/>
			<br/>
			<h2 style="font-weight: bold;color: #0171C7"></h2>
		</div>

		<div class="loginForm">
			<div class="login_userName" style="font-size: 15px">
				<div class="content_row">
					<i class="fa fa-user" aria-hidden="true" style="font-size: 20px"></i>
					<input id="username" class="in" name="username" type="text" tabindex="1"/>
				</div>
			</div>
			<div class="login_password" style="font-size: 15px">
				<div class="content_row">
					<i class="fa fa-key" aria-hidden="true" style="font-size: 20px"></i>
					<input id="password" class="in" name="password" type="password" tabindex="2">
				</div>
			</div>
			<div class="login_VerificationCode" style="font-size: 15px">
				<div class="content_row">
					<input id="randCode" class="in" name="randCode" type="text" tabindex="3">
				</div>
			</div>
			<div style="display: inline-block; width: 39%;">
				<a href="javascript:void(0);" onclick="VerificationCode()" tabindex="4">
					<img id="randCodeImage" alt="" width="130" height="40">
				</a>
			</div>
			<div class="login_controller">
				<button class="loginButton" type="button">
					<span data-i18n-text="login" style="font-size: 25px;">登录</span>
				</button>
			</div>
		</div>
	</body>
<script type="text/javascript" src="../common/jquery.min.js"></script>
<script type="text/javascript" src="../common/jquery-ui.min.js"></script>
<script type="text/javascript" src="../common/bootstrap.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.i18n.properties.js"></script>
<script type="text/javascript" src="../common/js/login/loginFunction.js?version=<%=version%>"></script>
<script type="text/javascript" src="../common/js/login/login.js?version=<%=version%>"></script>
<script type="text/javascript" src="../common/js/login/security.js"></script>
<script type="text/javascript">
	$(function () {
		var lang = getQueryString("lang");
		$(".description").text($.i18n.prop("MVMS_mobile_video_management_platform"));
		//给语言选择下拉按钮列表添加内容
		if (lang == "en") {
			$(".dropdown-menu").append("<li style=\"text-align:center\" value=" + 3 + " + οnclick=\"getLanguage(this)\"><a href=\"javascript:void(0);\">" + $.i18n.prop("English") + "</li>");
			$(".dropdown-menu").append("<li role=" + "separator" + " class=" + "divider" + "></li>");
			$(".dropdown-menu").append("<li style=\"text-align:center\" value=" + 1 + " + οnclick=\"getLanguage(this)\"><a href=\"javascript:void(0);\">" + $.i18n.prop("chinese_simplified") + "</li>");
			$(".dropdown-menu").append("<li role=" + "separator" + " class=" + "divider" + "></li>");
			$(".dropdown-menu").append("<li style=\"text-align:center\" value=" + 2 + " + οnclick=\"getLanguage(this)\"><a href=\"javascript:void(0);\">" + $.i18n.prop("chinese_traditional") + "</li>");
		} else if (lang == "zh") {
			$(".dropdown-menu").append("<li style=\"text-align:center\" value=" + 1 + " + οnclick=\"getLanguage(this)\"><a href=\"javascript:void(0);\">" + $.i18n.prop("chinese_simplified") + "</li>");
			$(".dropdown-menu").append("<li role=" + "separator" + " class=" + "divider" + "></li>");
			$(".dropdown-menu").append("<li style=\"text-align:center\" value=" + 2 + " + οnclick=\"getLanguage(this)\"><a href=\"javascript:void(0);\">" + $.i18n.prop("chinese_traditional") + "</li>");
			$(".dropdown-menu").append("<li role=" + "separator" + " class=" + "divider" + "></li>");
			$(".dropdown-menu").append("<li style=\"text-align:center\" value=" + 3 + " + οnclick=\"getLanguage(this)\"><a href=\"javascript:void(0);\">" + $.i18n.prop("English") + "</li>");
		} else if (lang == "zh-TW") {
			$(".dropdown-menu").append("<li style=\"text-align:center\" value=" + 2 + " + οnclick=\"getLanguage(this)\"><a href=\"javascript:void(0);\">" + $.i18n.prop("chinese_traditional") + "</li>");
			$(".dropdown-menu").append("<li role=" + "separator" + " class=" + "divider" + "></li>");
			$(".dropdown-menu").append("<li style=\"text-align:center\" value=" + 1 + " + οnclick=\"getLanguage(this)\"><a href=\"javascript:void(0);\">" + $.i18n.prop("chinese_simplified") + "</li>");
			$(".dropdown-menu").append("<li role=" + "separator" + " class=" + "divider" + "></li>");
			$(".dropdown-menu").append("<li style=\"text-align:center\" value=" + 3 + " + οnclick=\"getLanguage(this)\"><a href=\"javascript:void(0);\">" + $.i18n.prop("English") + "</li>");
		}
		//遍历地图类型的ul列表  将第一个li的值和内容赋值给下拉按钮
		$(".dropdown-menu").each(function () {
			var y = $(this).children().first();
			$(".language").val(y.val());
			$(".language").html(y.text() + " <span class=\"caret font_size3\"></span>");
		});
	});
	//改变下拉按钮的内容和值
	function getLanguage(data) {
		$(".language").val(data.value);
		$(".language").html(data.innerText + " <span class=\"caret font_size3\"></span>");
		if (data.value == 1) {
			replaceParamVal("lang", "zh");
		} else if (data.value == 2) {
			replaceParamVal("lang", "zh-TW")
		} else if (data.value == 3) {
			replaceParamVal("lang", "en")
		}
	}
	// 获取url中参数的值
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = parent.location.search.substr(1).match(reg);//正常版本
		if (r != null)
			return unescape(r[2]);
		return null;
	}
	//替换指定传入参数的值,paramName为参数,replaceWith为新值
	function replaceParamVal(paramName, replaceWith) {
		var oUrl = this.location.href.toString();
		var re = eval('/(' + paramName + '=)([^&]*)/gi');
		var nUrl = oUrl.replace(re, paramName + '=' + replaceWith);
		this.location = nUrl;
		window.location.href = nUrl
	}
</script>

</html>

css样式

@CHARSET "UTF-8";

body {
    background-image: url(../../../common/img/zhuye.jpg);
    background-size: cover;
    /*background-size: 1920px 1040px;*/
    background-repeat: no-repeat;
    /*min-width: 1600px;*/
    min-width: 1300px;
}

.div_companytitle {
    text-align: center;
    width: 30%;
    margin-left: 38.2%;
    height: 14%;
    z-index: 2;
    margin-top: 16%;
}

.LanguageChange {
    position: absolute;
    right: 5%;
    width: 10%;
    height: 5%;
    top: 13%;
    z-index: 2;
}

.language {
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: bold;
    /*color: #23b7cb;*/
    padding: 5px 15px;
    background: #fff;
    border: 1px transparent solid;
    border-radius: 5px;
    position: relative;
    box-shadow: 2px 6px 10px #000;
}

.language:after {
    content: '';
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    background: linear-gradient(270deg, #0171C7, #23b7cb);
    border-radius: 5px;
    z-index: -1;
}

.loginForm {
    text-align: center;
    width: 23%;
    height: 400px;
    margin-top: 2%;
    margin-left: 42%;
    border-radius: 10px;
    padding: 20px 20px;
}

#login h4 {
    color: #e8e7b730;
    margin-top: 5%;
}

.login_userName {
    top: 12%;
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 20px;
    background-image: -webkit-linear-gradient(#0171C7, #23b7cb);
}

.login_password {
    top: 32%;
    width: 100%;
    height: 42px;
    margin-top: 5%;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 20px;
    background-image: -webkit-linear-gradient(#0171C7, #23b7cb);
}

.login_VerificationCode {
    top: 52%;
    width: 60%;
    height: 42px;
    margin-top: 5%;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 20px;
    background-image: -webkit-linear-gradient(#0171C7, #23b7cb);
    display: inline-block;
}

.content_row {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #fff;
}

.login_controller {
    top: 63%;
    width: 70%;
    height: 42px;
    margin: 10% auto;
}

.loginButton {
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#0171C7), to(#23b7cb));
    border: 1px transparent solid;
    border-radius: 20px;
    outline: none;
}

/* 为登陆按钮设置悬浮效果 */
.loginButton:hover {
    /* 悬浮效果背景颜色渐变方向改变 */
    background: -webkit-linear-gradient(left, #0171C7, #23b7cb);
}

.in {
    width: 90%;
    height: 100%;
    font-size: 20px;
    border-bottom: 2px solid #eacda950;
    padding: 5px 10px;
    /* 设置圆角 */
    border-radius: 20px;
    /* 设置边框 */
    border: 0.5px;
    /* 去点选中时的外面方边框 */
    outline: none;
}
Anhk丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Font Awesome Icon 只有I标签的
王金铎的博客
12-12 1989
Font Awesome <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-binoculars" aria-hidden="true"></i> <i class="fa fa-birthday-cake" aria-hidden="true"></i> <i class="fa fa-blind" aria-hidden="true"></i> <i class="fa fa-bluetooth" aria-hidden="
Font-Awesome最新版完整使用教程
热门推荐
CRPER
05-31 4万+
何为Font-Awesome Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. 简言之:可伸缩的图标(矢量化),高度自定义(大小,
为bootstrap创造的图标字体--font awesome
做一个NB的码农，且不止于码农
12-22 6171
font awesome官网：http://fontawesome.io/ 有详细教程 http://fontawesome.io/examples/ 1.下载压缩包 2.解压后将 CSS，fonts文件夹复制到自己的项目中 3.<link rel="stylesheet" href="css/font-awesome.css"> <body> <i class="fa fa-address
登录方式页面制作
y351_的博客
02-09 381
登录方式页面制作 效果 1.打开XD软件，新建画布，制作内容 2.制作登录注册按钮 3.制作邮箱密码条 4.制作第三方登录方式 5.完善画面
自定义登陆页面
yks的博客
04-08 326
//配置类中定义相关内容 @Override protected void configure(HttpSecurity http) throws Exception { //登陆页面地址 http.formLogin().loginPage("/toLogin") //绑定登陆用户名中 name属性对应的值 .usernameParameter("username") //绑定.
易语言自绘登陆界面
08-21
易语言自绘登陆界面源码系统结构:读取数据,注册类名,销毁程序,时钟事件,窗口回调,方式,底色,底图,画按钮图片,画总进度条,画进度,画下载,开始检测,扫描文件夹,下载列表,显示进度,扫
C#VS2010制作的自定义登录界面
04-27
C#VS2010自绘软件登录界面，参考win10系统锁屏界面的灵感，喜欢你们会喜欢，有疑问可以私信
易语言源码易语言自绘登陆界面源码.rar
02-21
易语言源码易语言自绘登陆界面源码.rar 易语言源码易语言自绘登陆界面源码.rar 易语言源码易语言自绘登陆界面源码.rar 易语言源码易语言自绘登陆界面源码.rar 易语言源码易语言自绘登陆界面源码.rar 易语言源码...
vue+element简单登录界面/登陆界面
01-31
vue+element简单登录/登陆界面，在线预览地址若无法访问，可私聊作者获取最新在线预览地址 vue+element简单登录/登陆界面，在线预览地址若无法访问，可私聊作者获取最新在线预览地址 vue+element简单登录/登陆界面，...
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
weixin_42283461的博客
06-14 401
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
html中如何写一个提示框,css画一个提示框
最新发布
weixin_47634487的博客
06-19 293
在HTML中，提示框通常使用<div>元素来创建，然后使用CSS进行样式化。以下是一个示例，展示如何在HTML中写一个提示框，并使用CSS来设计其外观。
HTML(9)——字体修饰
m0_74386799的博客
06-19 428
如果一组当中两个数是一样的，可以简写为一位数：例如#00ffcc简写为#0fc。font-family属性值可以书写多个字体名用逗号隔开，依次从左到右查找。单行文字想要垂直居中时，可以设置行高属性值与盒子高度属性值一致。想让图片居中，可以给图片加一个父级标签例如<div>设置居中。属性的简写方式，一个属性对应多个值的写法，各个属性值之间用。测量方法：从一行文字的最顶端到下一行文字的最顶端。属性名：text-decoration。属性名：text-indent。属性名：text-align。
超文本标记语言（HTML）简介
一起coding，一起嗨。
06-15 515
超文本标记语言（HTML）简介
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 771
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
HTML动画效果技术指南：打造引人注目的网页悬浮体验
仰望苍穹
06-14 662
通过上述步骤和技巧，您将能够制作出既引人注目又功能性强的悬浮动画，从而提升网站的用户体验和品牌形象。记住，动画的目的是增强而不是分散用户的注意力，因此在设计时要注重细节和整体的协调性。随着技术的不断进步，HTML动画效果的实现方式也会不断更新，因此持续学习和实践对于网页设计师来说至关重要。码克疯v1 | 技术界的疯狂探索者 | 在代码的宇宙中，我是那颗永不满足的探索星。
HTML静态网页成品作业(HTML+CSS)—— 家乡山西介绍网页(3个页面)
weixin_42283461的博客
06-13 886
HTML静态网页成品作业(HTML+CSS)—— 家乡山西介绍网页(3个页面)
前段。html
lllzhou的博客
06-12 684
查看</a><a th:href="@{/user/create}">新增</a><a th:href="@{/}">返回</a><a th:href="@{/}">返回操作编辑用户
HTML总结
m0_47449012的博客
06-19 486
链接样式表的基本语法： <link rel="stylesheet" href="URL">。<meta http-equiv="refresh" content="30" url="网址参数"> 用于规定页面刷新时间为30s。<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>、<table>、<form>等。<a>、<img>、<input>、<span>、<strong>、<button>等。<meta name="author" content="信息参数"> 用于描述网页作者。
HTML基本标签使用【超链接标签、表格标签、表单标签、input标签】
m0_73940426的博客
06-19 659
HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。它通过一系列标签来描述网页内容的结构和外观，从而使浏览器能够解释并展示网页给用户。HTML文档由不同的元素组成，每个元素由标签表示，这些标签用来标记文本、图像、链接、表格、表单等网页内容，并定义它们的结构和意义。❤️❤️❤️本人菜鸟修行期，如有错误，欢迎各位大佬评论批评指正！😄😄😄👍 👍 👍。
dw做登陆注册登录页面
06-09
最后，在用户登录成功后，您可以使用会话（Session）来保持用户状态并跳转到其他页面。如果用户选择“记住我”的选项，您可以使用Cookie在用户下次访问时自动登录。 希望这些建议对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值