作业2 登录 注册 后台管理 商城页面

最新推荐文章于 2019-04-09 09:08:44 发布
最新推荐文章于 2019-04-09 09:08:44 发布
阅读量297 收藏
点赞数
分类专栏： WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuisaozhang1292/article/details/86156472
版权

 

输入：

登录页面：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>
	<div style = "width:980px;height:400px;margin:auto;margin-top:100px;">
		<div style = "width:40%;height:100%;inline-height:100%;float:left;text-align:center">
			<img alt="" src="1.jpg" style = "display:inline-block;width:100%;height:100%;">
		</div>
		<div style = "width:59%;height:100%;float:right;position:relative;">
			<div style = "position:absolute;left:10%;width:70%;height:70%;">
				<div style = "margin:10%;width:80%;height:10%;">
					<div style = "width:25%;height:100%;float:left;text-align:right;">
						<label for = "username" style = "color:red">*</label>
						<label for = "username" style = "font-size:20px;font-weight:bold;">用户名:</label>
					</div>
					<div style ="height:25px;width:200px;float:left;position:relative;">
						<input type="text" style = "height:25px;width:170px;padding-right:30px">
							<span style="position:absolute;right:5px;top:7px;background-image:url('i_name.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;">	
						</span>
					</div>					
				</div>
				
				<div style = "margin:10%;width:80%;height:10%;">
					<div style = "width:25%;height:100%;float:left;text-align:right;">
						<label for = "username" style = "color:red">*</label>
						<label for = "username" style = "font-size:20px;font-weight:bold;">密码:</label>
					</div>
					<div style ="height:25px;width:200px;float:left;position:relative;">
						<input type="text" style = "height:25px;width:170px;padding-right:30px">
							<span style="position:absolute;right:5px;top:7px;background-image:url('i_pwd.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;">	
						</span>
					</div>					
				</div>
				
				<div style = "margin:10%;width:80%;height:10%;">
					<div style = "width:25%;height:100%;float:left;text-align:right;">
						<label for = "username" style = "color:red">*</label>
						<label for = "username" style = "font-size:20px;font-weight:bold;">验证码:</label>
					</div>
					<div style ="height:25px;width:200px;float:left;position:relative;">
						<input type="text" style = "height:25px;width:170px;padding-right:30px">
							<span style="position:absolute;right:5px;top:5px;background-image:url('i_phone.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;">	
						</span>
					</div>					
				</div>
				
				<div style = "margin:10%;width:80%;height:10%;margin-left:120px;">
					<input type = "checkbox">
					<label>自动登录</label>
					<label>&nbsp;&nbsp;&nbsp;&nbsp;忘记密码</label>
				</div>
				
				<div style = "width:50%;height:15%;margin-left:120px;margin-top:40px;">
					<input onclick = "window.open('https://blog.csdn.net/zhuisaozhang1292')" type = "button" value = "登录" style = " background-color: red;width:100%;height:100%; border:0"  >																
				</div>
				
			</div>
			<a href = "https://blog.csdn.net/zhuisaozhang1292">
				<div style = "position:absolute;right:0;bottom:0;width:120px;height:40px;line-height:40px;background:green;text-align:center;">
					 免费注册&gt;&gt; 
				</div>
			</a>
		</div>
		
	</div>
</body>
</html>

输出效果：

 

注册页面

输入：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>
	<div style = "width:980px;height:400px;margin:auto;margin-top:100px;">
	
	 <div class = "pg-header" style = "width:980;height:100px;">
	 	
		<div style = "width:100px;height:20px;inline-height:50px;float:left;text-align:center ;">收藏本站</div>
		<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">登录</div>
		<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">免费注册</div>
		<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">我的订单</div>
		<div style = "width:120px;height:20px;inline-height:50px;float:right;text-align:center ;">VIP会员俱乐部</div>
		<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">客户服务</div>
	</div>
	
	 <div class = "pg-content" style = "width:980;height:800px;">		
		<div style = "width:200px;height:100px;">
			<img alt="" src="1.jpg" style = "width:200px;height:100px;">
		</div>
		
		<div style = "width:500px;height:600px;margin-top:50px;">
			<div>
				<label style = "font-size:30px;margin-left:50px;top:100px;">注册新用户</label>
			</div>
			
			<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
				<label for = "username" style = "color:red">*</label>
				<label for = "username" style = "font-size:20px;font-weight:bold;">用户名:</label>
			</div>			
			<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
				<input id = "username" type="text" style = "height:25px;width:170px;padding-right:30px">
					<span style="position:absolute;right:5px;top:7px;background-image:url('i_name.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;">	
				</span>
			</div>		
			
			<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
				<label for = "userphone" style = "color:red">*</label>
				<label for = "userphone" style = "font-size:20px;font-weight:bold;">手机名:</label>
			</div>			
			<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
				<input id = "userphone" type="text" style = "height:25px;width:170px;padding-right:30px">
					<span style="position:absolute;right:5px;top:7px;background-image:url('i_phone.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;">	
				</span>
			</div>		
			<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
				<label for = "userpwd" style = "color:red">*</label>
				<label for = "userpwd" style = "font-size:20px;font-weight:bold;">登录密码:</label>
			</div>			
			<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
				<input id = "userpwd" type="password" style = "height:25px;width:170px;padding-right:30px">
					<span style="position:absolute;right:5px;top:7px;background-image:url('i_pwd.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;">	
				</span>
			</div>		
			<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
				<label for = "userpwd_again" style = "color:red">*</label>
				<label for = "userpwd_again" style = "font-size:20px;font-weight:bold;">确认密码:</label>
			</div>			
			<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
				<input id = "userpwd_again" type="password" style = "height:25px;width:170px;padding-right:30px">
					<span style="position:absolute;right:5px;top:7px;background-image:url('i_pwd.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;">	
				</span>
			</div>		
			<div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;">
				<label for = "verify_code" style = "color:red">*</label>
				<label for = "verify_code" style = "font-size:20px;font-weight:bold;">验证码:</label>
			</div>			
			<div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;">
				<input id = "verify_code" type="text" style = "height:25px;width:170px;padding-right:30px">
					<span style="position:absolute;right:5px;top:7px;background-image:url('i_phone.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;">	
				</span>
			</div>
			
			<div style = "margin-left:120px;margin-top:20px;float:left;">
					<input type = "checkbox">
					<label>我已阅读并同意</label>
					<a href = "https://blog.csdn.net/zhuisaozhang1292">《用户注册协议》</a>
			</div>
			
			<a href = "https://blog.csdn.net/zhuisaozhang1292">
				<div style = "width:200px;height:40px; margin-left:120px;margin-top:20px;float:left;border:0;text-align:center;line-height:40px;background-color:red">
					<label style = "font-size:20px;font-weight:bold;">自动登录</label>
				</div>	
			</a>
						
				
		</div>
		
	</div>
	 
	</div>
</body>
</html>

样式

 

输入：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
		<div class = "pg-header" style = "width:10980;height:30px;line-height:30px;background-color:pink;position:fixed;top:0;right: 0;left:0;">
		 	
			<div style = "width:100px;height:20px;inline-height:50px;float:left;text-align:center ;">收藏本站</div>
			<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">登录</div>
			<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">免费注册</div>
			<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">我的订单</div>
			<div style = "width:120px;height:20px;inline-height:50px;float:right;text-align:center ;">VIP会员俱乐部</div>
			<div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">客户服务</div>
		</div>
		
		<div>
			<div style="width: 300px;float:left;margin-top:22px;">
	 
		        <div class="item">
		            <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>
		            <div class="content">
		                <div>内容1</div>
		                <div>内容1</div>
		                <div>内容1</div>
		            </div>
		        </div>
		        <div class="item">
		            <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>
		            <div class="content hide">
		                <div>内容2</div>
		                <div>内容2</div>
		                <div>内容2</div>
		            </div>
		        </div>
		        <div class="item">
		            <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>
		            <div class="content hide">
		                <div>内容3</div>
		                <div>内容3</div>
		                <div>内容3</div>
		            </div>
		        </div>
		        <div class="item">
		            <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>
		            <div class="content hide">
		                <div>内容4</div>
		                <div>内容4</div>
		                <div>内容4</div>
		            </div>
		        </div>
	    	</div>
	    	<div style="height:1500px;width: 1000px;background-color:green;float:left;margin-top:22px;">
	    	123
	    	</div>
		</div>
		<div onclick="GoTop();" style = 'width:70px;height:50px;line-height:50px;background-color: black;color: white;position:fixed;bottom:20px;right: 20px'>
		返回顶部
		</div>
	<script>
        function ChangeMenu(nid){
            var current_header = document.getElementById(nid);
 
            var item_list = current_header.parentElement.parentElement.children;
 
            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }
 
            current_header.nextElementSibling.classList.remove('hide');
        }
        function GoTop(){
			document.body.scrollTop = 0;
		}
    </script>
</body>
</html>

输出：

淮南草
关注
专栏目录
day78_淘淘商城项目_11_实现SSO系统的登录注册功能 + 门户首页展示用户名 + ajax请求跨域问题详解_匠心笔记
黑泽君
01-09 547
day78_淘淘商城项目_11_实现SSO系统的登录注册功能 + 门户首页展示用户名 + ajax请求跨域问题详解_匠心笔记
网上商城----超全面的后台管理页面模板
03-04
包含日历组件，显示农历、公历与节气信息，可直接正常使用。页面丰富、全面，作为网上商城的管理模板来说，已经是很不错了！
学习淘淘商城第十六课（展示后台管理页面）
u012453843的专栏
03-26 6054
前面做了那么多铺垫，现在我们开始着手处理后台管理系统。         首先，大家需要下载淘淘商城的静态资源文件，大家可以到：http://download.csdn.net/detail/u012453843/9794517这个地址进行下载，下载后解压，解压后可以看到有css、js、jsp三个文件夹。我们把这三个文件夹分别放到taotao-manager-web工程的src/main/weba
淘淘商城第95讲——单点登录之用户注册
李阿昀的博客
06-13 4609
首先我们还是看关于单点登录接口文档中关于用户注册接口的说明，如下图所示。请求方式是POST类型，URL为我们明确指定好了，参数有四个，需要校验完合法性之后再提交。 以上接口文档写的还算明了，大家就凑合着看吧！ 由于用户注册只涉及到单表操作，因此我们使用逆向工程生成的dao层代码即可。 下面我们来编写Service层的代码。首先在taotao-sso-interface工程的UserReg
学习淘淘商城第九十二课（用户注册页面实现）
u012453843的专栏
06-11 1493
首先，我们还是先看一下注册页面，如下图所示。        上图箭头指向的链接在register.jsp的代码当中的位置如下图所示。          由于我现在对css不是很熟悉，注册页面对输入合法性的校验就不像正规网站那种校验方式了，我只是在点击"立即注册"的时候统一做下校验，如果不合法就弹出一个alert警告框（注意：实际工作中是绝不允许用alert来提示校验信息的，cs
html+css+js酷炫全屏的后台登录注册界面模板
最新发布
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
安卓期末作业 学生成绩管理系统（可以注册登录，录入相关信息）
12-17
2. **用户身份管理**：系统提供了三种角色的登录功能，即学生、教师和管理员。这需要实现用户注册、身份验证和权限控制。通常，这涉及到数据库操作，如存储用户信息，以及使用加密技术确保密码安全。 3. **数据库...
信息管理系统，后台信息管理模板，多页面链接，html+css+js，前端实战项目，适用于大作业，上机任务Javaweb,前端练习
03-18
本项目聚焦于一个基于HTML+CSS+JS的后台信息管理模板，旨在为JavaWeb开发人员提供一个前端实战平台，用于大作业、上机任务或日常练习。下面，我们将深入探讨这个系统的各项特性及其应用。 1. **多页面链接设计** ...
微信小程序后端及后台管理页面.zip
03-11
后端基于Spring Boot + MyBatis + Lombok，后台管理页面基于Vue.js + Element-UI + axios 随着移动互联网技术的发展和用户需求的变化，【小程序名称】应运而生，以其轻量化、便捷化的设计理念为用户提供了一种全新...
上学期作业vue3后台管理系统
05-07
在这个上学期的作业中，你将学习到如何利用 Vue3 的新特性来搭建一个功能完善的后台管理系统。 首先，Vue3 引入了Composition API，这是对 Options API 的补充和改进。Composition API 允许开发者将组件的功能逻辑...
商城前端html源码
10-01
美多商城前端源码，演示地址http://www.meiduo.site/ 商城项目属于B2C商业模式
关于手机网站自动登录的功能
dangshiban9703的博客
01-08 443
前提：移动会提供用户信息！ 问题如下： 1：服务器如何自动识别用户身份呢？（具体技术，什么参数，怎么获得。） 2：服务器如何保证识别到的身份信息是真实的，而不是伪造的。（因为我了解到，好像是移动在请求头中加入了一些参数，如何就可以识别，那如何来保证 这些参数是移动加的，而不是伪造的？）。 补充一个可能的自动方式： 移动没有在请求头中传递任何手机号等信息，当需要
登陆/绑定页面
linhongyong的博客
08-14 557
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <title>绑定手机</title>
五花八门的后台登录方式
weixin_33963594的博客
02-23 329
2019独角兽企业重金招聘Python工程师标准>>> ...
java项目实战之购物商城（java毕业设计）
03-31
 项目涉及的技术：  1、前端：jsp、css、javascript、jQuery(js框架) 2、后台：Servlet、动态代理、Mybatis框架、javaMail进行邮件发送、jstl 、jstl自定义分页标签、代码生成器等 3、数据库：Mysql 4、服务器：Tomcat项目开发涉及的功能： 1、项目以及数据库搭建2、用户登录、退出3、用户注册、邮件发送、以及用户信息激活4、首页商品信息页面搭建以及查询功能实现5、查询商品明细6、加入商品至购物车、删除、更新、清除购物车商品信息7、确认订单信息8、订单页面搭建以及下订单功能实现9、查询我的购物车以及订单信息10、商品系统后台界面搭建11、代码机器人使用等等
淘淘商城第20讲——展示后台管理系统首页面
热门推荐
李阿昀的博客
05-26 1万+
我们前面做了那么多准备不是白做的，大家如果坚持到现在，真的值得给自己的一个拥抱！现在我们就来开始着手处理后台管理系统。 首先，大家需要整合淘淘商城的后台管理系统静态页面，即需要将以下css、js、jsp三个文件夹添加到taotao-manager-web工程中的WEB-INF下。 整合静态页面之后的效果为： 为什么我们把jsp放到WEB-INF下面呢？这是因为我们在taotao-mam
登录注册功能实现（带提示要求）
weixin_44239035的博客
04-09 1470
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>长佩网站</title> <style type="text/css"> *{ padding:0; ...
JAVA实战之完善注册功能
weixin_30235225的博客
11-23 92
首先来搭一下环境 （把我们需要的工具类和第三方jar包放进去） 下面就开始动手写代码了 用户注册功能 先来创建数据库表 然后是JavaBean 接下来是逻辑代码 RegisterServlet获取前端页面传过来的数据，并把UUID封装进来 RegisterServlet把数据传到Service层，Service层调用DAO层，DAO层操作数...
学习淘淘商城第八十六课（单点登录用户注册Controller层实现及测试）
u012453843的专栏
06-08 2468
上节课我们一起学习了用户注册Service层的实现，这节课我们实现Controller层并且测试接口是否好用。         在taotao-sso-web工程的UserController类添加如下图所示标注的代码。           添加的代码如下（GET请求不需要在RequestMapping中指定，但是POST就需要指定）： @RequestMapping(value
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值