模仿京东登录页面

最新推荐文章于 2024-05-05 06:35:01 发布
最新推荐文章于 2024-05-05 06:35:01 发布
阅读量1.7w 收藏 48
点赞数 13
分类专栏： JavaWeb 前端 文章标签： 京东登陆页面 HTML实战 HTML 京东
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/starjuly/article/details/53981247
版权

由于自己初学HTML，想模仿一个页面来练手，所以就模仿了京东的登录页面，功能没有完全实现，只是大体的布局实现了。

截图如下：



代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<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="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js"></script>
<style type="text/css">
.logo {
	margin: 10px 0;
	position: relative;
	width: 300px;
	float:left;
	height:60px;
}

.welcome-login {
	margin-top: 15px;
	position: absolute;
	margin-left: 15px;
	color: rgb(51, 51, 51);
}

.questions {
	position: relative;
	float: right;
	text-decoration: none;
	color: #999;
	font-size: 12px;
	outline: rgb(109, 109, 109) none 0px;
	top:52px;
}
a{
	text-decoration: none;
	color: #999;
}
a:hover {
	color: #f00;
	text-decoration: underline;
}

.background-img {
	position: relative;
	width: 102%;
	margin-left: -8px;
}

.login-form {
	position: absolute;
	margin-top: 180px;
}
.login-wrap{
	position:relative;
	height:475px;
	margin:10px 0 20px;
	z-index:5px;
}
.w{
	width:990px;
	margin: 0 auto;
}

#content{
	clear: both;
}

.login-wrap .login-form{
	float:right;
	top:-140px;
}
.login-form{
	position:relative;
	z-index:4;
	background:#fff;
	overflow:visible;
	width:345px;
}
.login-form .login-tab{
	margin-top:15px;
	height:39px;
	font-size:18px;
	font-family:"microsoft yahei";
	text-align: center;
	border-bottom:1px solid #f4f4f4;
	position:absolute;
	background:#ffff;
	display:block;
}
.login-tab{
	position:relative;
	margin-left=500px;
}
.login-form .login-tab-r{
	right:0;
}
.login-form .login-tab-l, .login-form .login-tab-r {
    width: 173px;
}
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
    margin: 0;
    padding: 0;
}
.msg-wrap{
	width:306px;
	margin-left: 20px;
}
.msg-warn{
	color:#666;
	border: solid 1px ;
	border-color:orange;
	background-color: #FFEEDD;
	margin-top: 60px;
	text-align: center;
	font-size: 12px;
	padding-top: 3px;
	padding-bottom:3px;
}
.form{
	margin-left: 20px;
	width:306px;
	margin-top: 10px;
	font-size: 20px;
}
.item .item-fore1 .item .item-fore2{
	border:1px solider #bdbdbd;

}
.form .item-fore1{
	z-index:6;
}
.form .item{
	position:relative;
	margin-bottom:20px;
} 
.item .item-fore2{
	margin-top:10px;
	
}
.form .itxt {
   line-height:18px;
   height:40px;
   padding:10px 0 10px 10px;
   width:256px;
   float:none;
   overflow:hidden;
   font-size:14px;
}
.item-fore4{
	font-size:12px;
	margin-top: 10px;
	height: 18px;
	/* width: 306px; */
}
.forgetPassword{
/* 	margin-left:182px; */
	position:absolute;
	right:0;
	top:0;
	margin:0;
}
.jdcheckbox{
	float: none;
	vertical-align: middle;
	margin:0 3px 0 0;
	padding:0;
}
.item-fore5{
	text-align: center;
}
.lo{
	
}
.login-form .login-box .login-btn {
	border:1px solid #cb2a2d;
	width:99%;
	position:relative;
	height:32px;
}
.login-form .login-box .login-btn .btn-img{
	border:1px solid #e85356;
	background: #e4393c;
	width:302px;
	font-size: 20px;
	color:#fff;
	display:block;
	height:31px;
	line-height:31px;
	font-family:'Micraosoft YaHei';
}
 a.btn-img:hover{
	color:#000;
	text-decoration: none;
}
a.ss:hover{
	color:red;
	/* text-decoration: none;  */
}
.main-img{
	width: 990;
	height:475;
}


element.style {
    background-color: #041422;
}
/**图片样式*/
.login-banner{
	background-color: #041422;
	position:absolute;
	width: 100%;
	margin-top: 0px;
}

/* 底部链接*/
#footer{
	text-align:center;
	padding-bottom:30px;
	font-size:12px;
	color:#666;
}
.copyright{
	margin-top:10px;
}
</style>
</head>

<body>
<div class="w">
		<!-- 头部，logo部分 -->
		<div class="logo">
			<img alt="京东" src="${pageContext.request.contextPath }/img/logo.png"></img>
			<font size="5px" class="welcome-login">欢迎登录</font>
		</div>
		<a class="questions" οnmοuseοver="color:red;" target="_blank"
			href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">登录页面，调查问卷</a>
</div>
		<!-- body -->
	<div id="content">
		<div class=login-wrap>
			<div class="w">
				<!-- 登录框 -->
				<div class="login-form">
					<div class="login-tab login-tab-l">
						<a class="ss" href="javascript:void(0)" style="color: #666">扫码登录</a>
					</div>
					<div class="login-tab login-tab-r">
						<a class="ss" href="javascript:void(0)" style="color:#f00">账户登录</a>
					</div>
					<!-- 主体 -->
					<div class="login-box">
						<div class="mt tab-h"></div>
						<div class="msg-wrap">
							<div class="msg-warn">
								<label>公共场所不建议自动登录，以防账号丢失</label>
							</div>
						</div>
						
						<!-- 输入框 -->
						<div class="mc">
							<div class="form">
								<form id="formlogin" method="post" οnsubmit="return false;">
									<div class="item item-fore1">
										<!-- <div class="input-group-addon glyphicon glyphicon-user">aa</div> -->
										<label for="loginanme" class="login-label name-label ">账号</label>
										<input  class="itxt" type="text" name="loginname" placeholder="邮箱/用户名/已验证手机">
									</div>
									<div class="item item-fore2">
										<label for="loginanme" class="login-label name-label">密码</label>
										<input type="text"  class="itxt"name="loginname" placeholder="请输入密码">
									</div>
									
									<div class="item item-fore4">
										<div class="safe">
											<input class="jdcheckbox" type="checkbox" name="remember">自动登录
											<a href="#" class="forgetPassword" style="text-align: right;">忘记密码</a>
										</div>
									</div>
									
									<!-- 登录按钮 -->
									<div class="item item-fore5">
										<div class="login-btn">
											<a href="javascript:;"   class="btn-img btn-entry"  tabindex="6" id="loginsubmit">
												登  录</a>
										</div>
									</div>
									
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="login-banner" ><!-- style="background-color:#041422" -->
				<div class="w">
				<img  class="main-img"  height="475px" width="90px" 
					src="${pageContext.request.contextPath}/img/main.jpg">
				<!-- <div id="banner-bg"  class="i-inner" 
						style="background: url(//img11.360buyimg.com/da/jfs/t3154/258/5179306513/128208/9d5b12bd/5864cf6eN542ab244.jpg) "></div> -->
					</div>
				</div>
			</div>
			
		</div>
		
		<div class="w">
			<div id="footer">
				<div class="links">
            <a rel="nofollow" target="_blank" href="//www.jd.com/intro/about.aspx">
                关于我们
            </a>
            |
            <a rel="nofollow" target="_blank" href="//www.jd.com/contact/">
                联系我们
            </a>
            |
            <a rel="nofollow" target="_blank" href="//zhaopin.jd.com/">
                人才招聘
            </a>
            |
            <a rel="nofollow" target="_blank" href="//www.jd.com/contact/joinin.aspx">
                商家入驻
            </a>
            |
            <a rel="nofollow" target="_blank" href="//www.jd.com/intro/service.aspx">
                广告服务
            </a>
            |
            <a rel="nofollow" target="_blank" href="//app.jd.com/">
                手机京东
            </a>
            |
            <a target="_blank" href="/links.vm/club.jd.com/links.aspx">
                友情链接
            </a>
            |
            <a target="_blank" href="//media.jd.com/">
                销售联盟
            </a>
            |
            <a href="//club.jd.com/" target="_blank">
                京东社区
            </a>
            |
            <a href="//gongyi.jd.com" target="_blank">
                京东公益
            </a>
            |
            <a target="_blank" href="//en.jd.com/" clstag="pageclick|keycount|20150112ABD|9">English Site</a>
        </div>
        <div class="copyright">
            Copyright &copy; 2004-2017  京东JD.com 版权所有
        </div>
			</div>
		</div>
</body>
</html>


starjuly
关注
专栏目录
仿京东页面登录
m0_51161351的博客
04-26 518
简单页面设计
模拟京东登陆 java_java实现京东登陆示例分享
weixin_42376614的博客
02-16 442
package com.lkb.test;import java.util.ArrayList;import java.util.HashMap;import java.util.Iterator;import java.util.List;import java.util.Map;import org.apache.http.HttpResponse;import org.apache.http...
模仿京东登录web源码（html+css）
10-12
京东登录界面，web入门，新手用。html+css3。
仿京东登录和注册页面
11-27
HTML5,仿京东登录注册页面，好不容易搜集到的。积分没有设置太高。
模仿京东登录页面（HTML、CSS、JavaScript / jQuery）
不动声色的小蜗牛的博客
07-28 6724
效果： Index.html： <!DOCTYPE html> <html> <!-- 作者：zzy 时间：2020-07-28 描述：模仿京东登陆页面（自己练习，非商用） --> <head> <meta charset="utf-8" /> <title>京东-欢迎登录</title> <!--<link rel="icon" href="/
HTML+CSS仿写京东登陆页面附代码（web前端期末大作业）
weixin_46546415的博客
12-29 6208
cc 本来想加上JS实现选项卡功能的，奈何本人水平实在有限，用JavaScript用到一半就放弃了，真的不会使用啊！！！给你们看看效果吧。 整体布局 个人认为我这个整体布局还是比较科学的，把这个界面分成了三个div部分，整体还是display:block上面的欢迎登录界面，中间的主界面包括登录框，下面的版权和关于我们。我毕竟是初学者，当然就是只会用div盒子一点一点做了哈哈哈 由于考虑到css可能要写比较多，所以分为了两个css来写，一个是base.css主要用于设置一些基础预设，另一个是m.
html作业 仿京东商城登录界面
07-17
本资源课为html新手作业的参考答案使用，运用html+css实现的页面布局
HTMl+CSS 模仿京东网登录页面
最新发布
2401_84153079的博客
05-05 672
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
模仿京东页面
03-11
在IT行业中，模仿京东页面是一项常见的前端开发任务，旨在学习和实践电商网站的布局、交互设计以及技术实现。这个项目通常涉及到HTML、CSS和JavaScript等基础Web开发技术，也可能涵盖响应式设计、Ajax异步加载、...
初学者，HTML自建模仿京东页面
03-15
HTML（HyperText Markup Language）是构建网页的基础语言，对于初学者来说，自建模仿京东页面是一个很好的实践项目，可以深入理解和应用HTML的基本结构与元素。在这个项目中，你可能会遇到以下一些HTML知识点： 1. ...
仿京东商城登录页面.7z
06-04
仿京东商城登录页面上机练习4的项目答案，超级详细，绝对干货，没有水分！
模仿京东首页
10-24
对京东首页的模仿，大概是17年上半年写的代码， 现在的京东页面啥样也不知道了， 反正以前和京东页面是一模一样。 实现也很简单，没有框架之类的。 里面的楼梯导航可以借鉴到任何网站。
仿照京东html界面
10-22
仿照京东的html界面包含轮播，以及各式各样的js 互动效果、
仿京东登录页面
11-21
【仿】京东登录页面的布局实现，方便大家使用，共同学习！
练习4： 仿京东商城登录页面(1).zip
12-13
练习4： 仿京东商城登录页面(1).zip
仿京东商城登录页面html
scholar_1的博客
07-06 5145
这篇文章，书生带来了一个静态的仿京东商城登录页面有需要的可直接拿去修改修改就可以用了 以下是我的效果图的展示： 如果修改的话，对于初学者，有几点建议：①如果不运用到项目，只为了静态展示，那么，多做几个页面，将底部的：关于我们|联系我们等等改为a标签进行页面跳转。②可以修改一下css，进行美化页面的操作。③根据自己的需求来修改页面图片，甚至可以选择改为轮播图。相关图片资源我放在我的资源里面有需要的可以直接下载也可以自己添加图片，但要注意路径问题.........
[记录][续爬虫]模拟京东登录并且抢购物券
热门推荐
码上有猿
06-02 1万+
1、登录 2、进去卷中心 3、得到券列表 4、领券【大致路径：/freeGetCoupon.html?key=xxxx】【权限原因，这里就不上模拟了，只提供思路】 1、找到登录js，分析登录请求【在登录页面 里面】【当然也可以直接分析网络请求，都差不多】 贴一部分js源码：  //登陆操作     function loginSubmit(callback) {  
京东模拟登录
weixin_38206454的博客
11-28 4696
登录时，浏览器发送了一个POST请求，在请求头上带了基本参数，并不是所有参数在模拟时都需要，一般需要cookie，Referer，和User-Agent会话对象requests.Session能够跨请求地保持某些参数，比如cookies，即在同一个Session实例发出的所有请求都保持同一个cookies,而requests模块每次会自动处理cookies，这样就很方便地处理登录时的cookies问
模仿京东页面的前端代码
06-02
抱歉，模仿京东页面的前端代码是一项侵犯版权的行为，这是不被允许的。作为一名开发者，我们应该尊重他人的知识产权，遵守相关法律法规。如果您需要学习前端技术，可以通过其他方式来学习，比如模仿一些免费而开源的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值