案例:京东登录页面css创建

啦两个啦

2024-04-23 帮助1人

京东登录页面

效果图

学新通

一、整体html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 设置标题 -->
		<title>京东-欢迎登录</title>
		<!-- 设置图标 -->
		<link rel="icon" href="img/jd_logo.ico">
		
		<!-- 导入外部样式 -->
		<link rel="stylesheet" href="css/login.css">
		<link rel="stylesheet" href="css/login-Top.css">
		<link rel="stylesheet" href="css/login-Middle.css">
		<link rel="stylesheet" href="css/login-Bottom.css">
        
	</head>
    
  
	<body>
        
        
		<!--------------------- 网页最顶部部分 ----------------------------->
		<div id="top-box">
			<!----------- 放网页logo部分 ------------>
			<div id="logo-box">
				<div>
					<a href="https://www.jd.com/cu=true&utm_source=dgpage.dsztfso.cn&utm_medium=tuiguang&utm_campaign=t_2018529520_&utm_term=72e0f8f36939447c9ca2561c75315ca7">
						<img src="img/logo.png" alt="">
						</a>
					<img src="img/l-icon.png" alt="">
				</div>
				
				<a href="https://wj-dongjian.jd.com/q/61a05143f2ec2b00b35e40a6">登录页面，调查问卷</a>
				
			</div>
			
			
			
			<!------------- 放隐私政策部分 ------------>
			<div id="privacy-box">
				<p>
					<img src="img/warning.png" alt="">
					依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a target="_blank" href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
				</p>
				
			</div>
		</div>
		
		
		
		<!--------------------------- 网页中间部分 ---------------------------->
		<div id="middle-box">
			<!-- 中间大盒子 -->
			<div>
				<!-- 上面放登录按钮的部分 -->
				<div id="btn-box">
					<p>
						<img src="img/warning.png" alt="">
						京东不会以任何理由要求您转账汇款，谨防诈骗。
					</p>
					<div>
						<button>扫码登录</button>
						<span>|</span>
						<button>账户登录</button>
					</div>
					
				</div>
				
				<!------------- 放输入框的部分 --------------->
				<div id="message-box">
					<!-- 账号输入框 -->
					<div>
						<img src="img/pygame.png" alt="">
						<input type="text" placeholder="邮箱/账户名/登录手机">
					</div>
					
					
					<!-- 密码输入框 -->
					<div>
						<img src="img/password_icon.png" alt="">
						<input type="password" placeholder="密码">
					</div>
					
					<!-- 忘记密码 -->
					<a target="_blank" href="https://aq.jd.com/process/findPwd?s=1">忘记密码</a>
					
					<!-- 登录按钮 -->
					<button>登&emsp;&nbsp;录</button>
					
				</div>
	
				<div id="third-party-box">
					<a id="qq" href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=9616EDC5976C33482902DFDF144814256CE77E3198CD58905B8F80470D3CB25F55C9B504E36B4DB84DFB9572308C3324&client_id=100273020&redirect_uri=https://qq.jd.com/new/qq/callback.action?view=null&uuid=39a6f16e0cfb4621ada69ffacb0b07ab">QQ</a>
					<span>|</span>
					<a id="weixin" href="https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=3FB8ABAC5D06C27D7E5D962A3FD02F8B244AC1A4345CE0BEE461666AB46920532056189C967D4142EEB416BB93BCFF5A&redirect_uri=https://qq.jd.com/new/wx/callback.action?view=null&uuid=772e84b112114172affedf3840b88dc2&response_type=code&scope=snsapi_login#wechat_redirect">微信</a>
					<a id="register" href="https://reg.jd.com/p/regPage?ignore=1">立即注册</a>
				</div>
			</div>
		</div>
		
		

		
		<!-------------------------- 网页底部部分 ----------------------------->
		<div id="bottom-box">
			<div>
				<a target="_blank" href="https://about.jd.com/">关于我们</a>
				<span>|</span>
				<a target="_blank" href="https://www.jd.com/?cu=true&utm_source=c.duomai.com&utm_medium=jingfen&utm_campaign=t_16282_295963166&utm_term=dd8467555def42eeaa8b62230abe3112">联系我们 </a>
				<span>|</span>
				<a target="_blank" href="https://zhaopin.jd.com/home;jsessionid=797719A9866D25A3DF21DFB84409C6F1.s1">人才招聘 </a>
				<span>|</span>
				<a target="_blank" href="https://lai.jd.com/">商家入驻 </a>
				<span>|</span>
				<a target="_blank" href="https://jzt.jd.com/home/#/index">广告服务 </a>
				<span>|</span>
				<a target="_blank" href="https://app.jd.com/">手机京东  </a>
				<span>|</span>
				<a target="_blank" href="https://club.jd.com/links.aspx">友情链接 </a>
				<span>|</span>
				<a target="_blank" href="https://media.jd.com/">销售联盟 </a>
				<span>|</span>
				<a target="_blank" href="https://pro.jd.com/mall/active/3WA2zN8wkwc9fL9TxAJXHh5Nj79u/index.html">京东社区 </a>
				<span>|</span>
				<a target="_blank" href="https://gongyi.jd.com/">京东公益</a>
			</div>
			<p>Copyright © 2004-2022  京东JD.com 版权所有</p>
		</div>
		
		
	</body>
</html>

二、整体设置CSS代码


/* 关闭网页中所有标签自带的内边距和外边距 */
*{
	margin: 0;
	padding: 0;
}

/* 设置三个部分盒子的大小 */
#top-box{
	height: 120px;
}

#middle-box{
	height: 475px;
	background-color: cadetblue;
}

#bottom-box{
	height:265px;
}

三、顶部css代码


/* ---------------------放网页logo部分----------------------------- */
#logo-box{
	height: 80px;
	position: relative;
}
#logo-box>div{
	position: absolute;
	left: 220px;
	top: 10px;
}
/* 设置图片外边距 */
#logo-box>div>img{
	margin-left: 16px;
}
/* 去掉下划线 */
#logo-box>div>a{
	text-decoration: none;
	
/* 后面的调查问卷 */
}
#logo-box>a{
	position: absolute;
	right:225px;
	bottom: 10px;
	font-size: 12px;
	color: rgb(170, 170, 170);
	text-decoration: none;
	background: url("../img/q-icon.png") no-repeat left center;
	padding-left: 25px;
}
/* 设置调查问卷悬停样式 */
#logo-box>a:hover{
	color: rgb(211, 73, 70);
	text-decoration: underline;
}


/* ----------------------------放隐私政策部分---------------------------- */
#privacy-box{
	height: 40px;
	background-color: rgb(255, 248, 241);
	}
	
#privacy-box>p{
	font-size: 12px;
	color:rgb(170, 170, 170) ;
	/* 水平方向居中 */
	text-align: center;
	/* 垂直方向居中 */
	/* height: 40px; */
	line-height:40px ;
	
}	
/* 警告图片垂直居中 */
#privacy-box img{
	vertical-align: middle;
}
#privacy-box a{
	text-decoration: none;
	color: rgb(51, 51, 51);
}
#privacy-box a:hover{
	text-decoration: underline;
}

四、中间部分css代码

#middle-box{
	/* 设置背景图 */
	background: url("../img/bg.png") no-repeat left center rgb(221, 46, 19);
	position: relative;
}
/* 设置登录信息框 */
#middle-box>div{
	width: 345px;
	height: 400px;
	background-color: white;
	position: absolute;
	right: 225px;
	top: 10px;
}

/* ------------放按钮的盒子------------------ */
#btn-box{
	height: 90px;
}

/* -------------上面的提示信息部分------------- */
#btn-box>p{
	height: 40px;
	background-color: rgb(255, 248, 240);
	
	color: rgb(170, 170, 170);
	font-size: 12px;
	text-align: center;
	line-height: 40px;
}
/* 警示图标 */
#btn-box img{
	vertical-align: middle;
}

/* ----------------下面按钮部分-------------------- */
#btn-box>div{
	height: 50px;
}
/* ----------------登录方式选择部分------------------- */
#btn-box button{
	border: none;
	background-color: rgba(0, 0, 0, 0);
	width: 165px;
	height: 50px;
	font-size: 18px;
	color: rgb(102, 102, 102);
	font-weight: 400;
	
}
#btn-box>div>button:nth-child(3){
	color: rgb(221, 46, 19);
}

#btn-box span{
	color: rgb(250, 250, 250);
	font-size: 20px;
	font-weight: 300;
}

/* --------------放各种登录信息的盒子-------------- */
#message-box{
	height: 255px;
	border-top: 1px solid rgb(245, 245, 245);
	border-bottom: 1px solid rgb(245, 245, 245);
	position: relative;
}

/*----------------- 账号和密码输入框 --------------- */
#message-box>div{
	width: 305px;
	height: 38px;
	margin-left: 20px;
	border: 1px solid rgb(190, 190, 190);
	margin-top: 32px;
	
}
/* 单独设置第二个输入框和第一个输入框之间的距离 */
#message-box>div:nth-child(2){
	margin-top: 20px;
}
/* 设置两个图标的大小 */
#message-box img{
	width: 38px;
	height: 38px;
	border-right:1px solid rgb(190, 190, 190) ;
}
#message-box input{
	height: 37px;
	width: 250px;
	
	/* 设置上对齐 */
	vertical-align: top;
	/* 去掉输入框边框 */
	border: none;
	/* 去掉输入框点击时的样式 */
	outline: none;
	font-size: 14px;
}



/* -------------------忘记密码部分-------------- */
#message-box>a{
	position: absolute;
	right: 20px;
	margin-top: 23px;
	
	color: rgb(109, 109, 109);
	font-size: 12px;
	text-decoration: none;
}
#message-box>a:hover{
	text-decoration: underline;
	color: rgb(221, 46, 19);
}


/* ----------------登录按钮部分----------------- */

#message-box>button{
	position: absolute;
	left: 20px;
	bottom: 30px;
	
	width: 305px;
	height: 35px;
	background-color: rgb(221, 46, 19);
	color: white;
	font-size: 20px;
	border: none;
	/* 设置字间距  不能居中对齐 */
	/* letter-spacing: 25px; */
}


/* ---------------放第三方登录信息的盒子---------------- */
#third-party-box{
	height: 50px;
	line-height: 50px;
	position: relative;
}
#qq,#weixin{
	color: rgb(109, 109, 109);
	font-size: 13px;
	text-decoration: none;
	padding-left: 27px;
	
}

#qq{
	margin-left: 20px;
	background: url("../img/qq.png") no-repeat left center;
	
	
}
#qq:hover,#weixin:hover{
	color: rgb(221, 46, 19);
	text-decoration: underline;
}
#weixin{
	background: url("../img/weixin.png") no-repeat left center;
}

#third-party-box>span{
	color: rgb(204, 204, 204);
	font-size: 10px;
	margin-left: 5px;
	margin-right: 3px;
}

/* 注册按钮 */
#register{
	position: absolute;
	right: 20px;
	
	font-size: 14px;
	text-decoration: none;
	color: rgb(189, 49, 48);
	
	background: url("../img/right.png") no-repeat left center;
	padding-left: 27px;
}

#register:hover{
	text-decoration: underline;
}

五、底部部分css代码

#bottom-box>div{
	height: 50px;
	line-height: 50px;
	text-align: center;
}
#bottom-box a{
	color: rgb(105, 105, 105);
	font-size: 12px;
	text-decoration: none;
}
#bottom-box a:hover{
	text-decoration: underline;
	color: rgb(229, 56, 60);
}
#bottom-box span{
	color: rgb(105, 105, 105);
	font-size: 12px;
	margin-left: 8px;
	margin-right: 8px;
}
#bottom-box>p{
	color: rgb(105, 105, 105);
	font-size: 12px;
	text-align: center;
}

这篇好文章是转载于：学新通技术网

案例:京东登录页面css创建

京东登录页面

效果图

一、整体html代码

二、整体设置CSS代码

三、顶部css代码

四、中间部分css代码

五、底部部分css代码

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐