九、登录网页设计

最新推荐文章于 2023-06-15 16:48:41 发布
最新推荐文章于 2023-06-15 16:48:41 发布
阅读量1w 收藏 75
点赞数 6
分类专栏： 华科易迅创客平台项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qixiang_chen/article/details/85555341
版权

登录页面需要美观，突出系统特征，通常由网页美工完成静态登录页面，开发人员完成登录业务处理。登录系统出现错误需要为使用者提供正确提示信息。

样式表设计

body{
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	line-height:23px;/* 设置行高度为23px*/
	margin:0;/* 上下左右边界大小为0*/
	padding:0;/* 上下左右填充大小为0*/
	background:url(/images/login/login_bg.jpg);
	color:#3b6e81;
	}
/* 登录窗口样式定义*/
.login_panel{
	margin:0 auto;
	width:330px;/* 登录窗口宽度*/
	height:243px;
	margin-top:10%;/* 上边界为窗口10%宽度*/
	padding-left:300px;/* 左边填充300px*/
	padding-top:110px;/* 上边填充110px*/
	background:url(/images/login/login_panel.png) no-repeat;/* 底图不重复平铺*/
    position:relative;/* 与父空间相对位置显示*/
	}

.sysname-zh
{
    position:absolute;/* 与父空间绝对位置显示*/
    top:50px;/* 上边界50px*/
    left:320px;/* 左边界320px*/
    font-size:26px;
    font-weight:900;
    color:#0074a6;
}

.sysname-en
{
    position:absolute;/* 与父空间绝对位置显示*/
    top:70px;
    left:312px;
    color:#9aa5a9;
}

 .message
{   
    position:absolute;
    bottom:80px;
    left:312px;
    color:red;
}

.logo
{
     position:absolute;
     left:50px;
     top:80px;
}

.login{
	width:200px;
	border:1px solid #7fb5c1;/* 边框实线显示,颜色#7fb5c1*/
	height:22px;
	vertical-align:text-bottom;/* 文本下对齐*/
}

.botton{
	width:58px;
	height:26px;
    line-height:26px;
	border:none;
	color:#FFF;
	font-weight:bold;
	margin-left:15px;
	background:url(/images/login/button.jpg);
}

登录页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String webCtx = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" src="<%=webCtx %>/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=webCtx %>/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=webCtx %>/easyui/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="<%=webCtx %>/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" href="<%=webCtx %>/easyui/themes/icon.css"/>
<link rel="stylesheet" href="<%=webCtx %>/js/login.css"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>古方红糖财务管理系统</title>
<script>
function login(){
	var frmdata = $('#loginForm').serialize();
	$.post('/login',frmdata,function(data){
		if(data == true)
		{
			window.open('/main','_self');
		}
	})
}
</script>
</head>

 <body>
 	<div class="login_panel">
    	<form id="loginForm" action="<%=webCtx %>/login" method="post">
        	<div class="logo"></div>
            <div class="sysname-zh">古方红糖财务管理系统</div>
            <div class="sysname-en" style="">GuFuang Sugar Financial Accounting System</div>
            <div class="message">用户名不存在</div>
            <table border="0" style="width:300px;">
            	<tr>
                	<td style="white-space:nowrap; padding-bottom: 5px;width:55px;">用户名：</td>
                    <td colspan="2">
                    <input type="text" id="loginId" name="loginId" class="login" 
                   	 value="${cookie.loginId.value}"/>
                   	 </td>
                </tr>
                <tr>
                    <td class="lable" style="white-space:nowrap; letter-spacing: 0.5em; vertical-align: middle">密码：</td>
                    <td colspan="2">
                    <input type="password" id="pwd" name="pwd" class="login"
                    	 value="${cookie.pwd.value}"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2"><input type="checkbox"/><span>系统登录信息</span></td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align:center">
                        <input type="button" onclick="login()" value="登录" class="botton" />
                        <input type="button" value="重置" class="botton"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>

</html>

效果图

在这里插入图片描述

所需图片

放置在webapp/images/login/目录下，参考CSS中图片定义地址

login_bg.jpg
在这里插入图片描述

login_panel.png
在这里插入图片描述

button.jpg
在这里插入图片描述

华科易迅
关注
  • 6
    点赞
  • 踩
  • 75
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用户登录网页html
09-20
简单登录功能网页，调用cgi程序目录为网页同目录下/cgi-bin/denglu.cgi
HTML登录页面
jakelihua
10-27 3万+
本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建。
python实现网站的自动登录（selenium实现，带验证码识别）
Paramete的博客
11-30 1万+
python实现网站自动登录（selenium实现，带验证码识别） 一、前言 这是鄙人写的第一篇博客，旨在总结一下近期所学，本文通过selenium工具实现工作所用网站的自动登录，下图为网站登录界面。 1、运行环境 操作系统：Windows10 python版本：python3.7 2、需要的python第三方库 1、selenium 安装：pip install selenium seleniu...
好看实用的六个html登录页面
热门推荐
bhegi_seg的博客
03-10 5万+
本人找到了六个html登录页面，感觉还行，也挺好看的。 1.效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
html好看的登录界面2（十四种风格登录源码）
xcLeigh
06-15 2万+
html好看的登录页面2（十四种风格登录源码），登录页面源码，大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
html好看的登录页面1（十三种风格登录页面源码）
xcLeigh
06-15 2万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
一个简单的网页登陆(html)
编程小白的博客
03-20 1万+
今天和大家分享如何用html做一个简易版的登陆网页。 一般简单的登陆页面有用户名、密码框以及提交与清空两个按钮，效果图如下所示： 1.首先网页制作中应当包含两个部分head以及body; <html> <head> </head> <body> </body> </html> 2.在head中设置标题为“登陆页面”，把左间距与上间距分别设为535px和20px（也可以点开所制作网页的链接ctr+shift+i键查看源代码，通
【小小白】简单实现网页登录（HTML+CSS+PHP）
qq_52696970的博客
04-13 2196
环境配置 1、PHPstorm（不建议升级最新版，每次都会提醒输入密钥，超烦人！） 2、MySQL8.0 3、Navicat 15 for mysql 4、phpstudy也很好用 参考配置：https://blog.csdn.net/weixin_46336128/article/details/106496405（这篇博客讲的很详细，强推！） 一、前端：模仿B站上的写的 https://www.bilibili.com/video/BV1ta4y1W7wu 1.HTML： <!DOCTYPE ht
学习HTML简单设计登录网页
weixin_63050915的博客
01-15 1948
首先我们来看一下成果 这是一个模仿一个婚介网站登陆注册网页来设计的单纯HTML语言完成的网页 1，框架（表格） 如图 我们简单地把页面分成列数为二的表格这里就需要表格的知识 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 2，输入类
前端登陆页面
Where there is a will, there is a way !
03-02 6779
例如，你可以使用JavaScript为表单添加验证功能，或者使用CSS和JavaScript为页面添加一些动态效果，比如当用户输入错误时，用户名和密码输入框可能会出现红色边框。该页面包含一个简单的表单，用户需要输入用户名和密码才能登录。同时，我们还引用了一个CSS文件，该文件可以在同一目录下创建一个名为style.css的文本文件，以自定义页面的外观和样式。当表单被提交时，该代码将检查用户名和密码输入框是否为空。你可以将这些CSS代码保存到一个名为style.css的文件中，并将其与HTML文件链接起来。
html登陆页面
qq_41617848的博客
06-04 3万+
HTML登录注册界面怎么制作？ 在没有学习CSS样式的前提下，是如何做一个简单的注册界面的。 一、表单标签（form） 首先我们先写一个<form></form>的标签，form标签属于表单标签，通常我们的登录注册界面都是有提交数据的，是和服务器交互用的，用户在提交信息后，给服务器，服务器再根据提交的信息保存，这个时候就需要form标签了。 form标签里面常见属性...
论坛类网页制作课程设计
01-18
网页初步测试也是在Chrome浏览器上测试的.由于电脑配置不是很高,对windows7支持不流畅,于是重装了linux mint 17.2 系统.该系统对电脑硬件要求不高,而且开源,与windows界面很像.所以刚开始用着还行.但是对windows的...
web网页制作作业设计.zip
08-05
一份网页案例供学习者参考，提供提供源代码,学习者可以依据自己的知识对代码... 二：登录版块 三：注册板块 四：个人设置板块 五：分享思维模块 六: 发现思维模块 七: 我的思维模块 八: 搜索模块 九: 帮助模块
网页设计期末：咖啡商城网页代码
最新发布
01-29
1、首页页面结构:logo，导航，轮播，商品列表(九宫格结构， 每一格均含图片及其名称，图片，商品名称，商品简介)，页脚。 2、登录页结构:账户名、密码输入框，登录和注册按钮。 3、 列表页结构:logo、导航，列表页每...
大学生PHP图书商城毕业设计 PHP大作业成品 PHP+MYSQL图书在线销售订单电子商城 PHP动态网页作业PHP网站毕设作品
12-23
作品未基于任何框架，大学生作业的特点来编写的代码，代码风格贴合学生实际。...八、有后台，后台管理员可登录，登陆后可以管理员全部信息，有增删改查 九、商品有分类 十、可设置订单的配送方式（快递） 等等
网站设计方案.doc
12-25
网站设计与基金会整体形象一致，网页色彩暖色调、图片的应用及版面规划，保持 网站的整体一致性。 2. 若有意愿，可制定网页改版计划（随着活动的成熟演变，一年一整改） 六、网站推广方式 1. 通过官方微博宣传中华...
管理后台界面基本框架设计
qixiang_chen的博客
10-18 1万+
电商类项目分为前端系统与后台管理系统，前端系统面向终端用户使用，一般设计十分炫动，色彩对比比较鲜明，容易引起消费者注意力，需要由美术及页面美工功底的设计人员开发设计。后台系统使用用户比较专一，不需要太多炫动效果，应该色调比较平淡，开发工程师借助一些前端开发JS类库可以实现后台界面设计，基本上不需美工参与即可到达普通用户的要求。古方红糖创客系统后台管理界面使用Easyui开发设计界面框架，在本节中讲...
javaweb网页设计代码登录
11-08
JavaWeb网页设计中的登录功能可以通过以下代码实现： 1. 首先，在前端网页中创建一个登录表单，包括用户名和密码的输入框，以及一个提交按钮。例如： ```html <form action="loginServlet" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <input type="submit" value="登录"> </form> ``` 2. 接下来，在后端编写一个Servlet类（例如命名为"LoginServlet"），处理登录请求，验证用户名和密码是否正确。例如： ```java @WebServlet("/loginServlet") public class LoginServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); String password = request.getParameter("password"); // 进行用户名和密码的验证逻辑 if (username.equals("admin") && password.equals("123456")) { // 登录成功 response.sendRedirect("success.html"); } else { // 登录失败，返回登录页面并显示错误信息 request.setAttribute("errorMsg", "用户名或密码错误"); request.getRequestDispatcher("login.html").forward(request, response); } } } ``` 3. 在验证用户名和密码的逻辑中，我们可以将用户名和密码与数据库中的数据进行比对，或者与一些预设的用户信息进行匹配。 4. 如果用户名和密码验证通过，通过`response.sendRedirect`方法将用户重定向到登录成功的页面；否则，通过`request.getRequestDispatcher`方法将用户返回到登录页面，并通过`request.setAttribute`方法设置一个错误信息，让用户知道登录失败的原因。 以上就是一个简单的JavaWeb网页登录功能的实现代码。需要注意的是，数据库的设计和连接等步骤没有在这段代码中涉及到，可以根据实际需要进行补充。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值