admin管理员组

文章数量:1656464

本文基于HBuilder软件编写html文件
原网页：东京登录页面

目录：
一、思路
二、代码实现
 1.网页标题图标
 2.页面顶部
 3.页面中间部分
三、结束啦

一、思路

看页面可以大致分为三块：
1.页面顶部：京东logo、问卷调查、隐私保护宣传
2.页面中部：背景图案、宣传图片、登录信息输入部分
3.页面底部：链接集群、版权宣言

二、代码实现

为更好地画面表现,全部写在html文件中.分步实现，在完整代码切割基础上带大家理解.

1.网页标题图标

写入标题样式，导入外部css文件控制html文件中标签属性.
css文件代码附着在文章结尾

<html>
	<head>
		<meta charset="utf-8">
		<!-- 设置网页标题 -->
		<title>京东-欢迎登录</title>
		<!-- 设置网页图标 -->
		<link rel="icon" href="img/jd_logo.ico">
		<!-- 导入外部样式 -->
		<link rel="stylesheet" href="css/01京东登录.css">
	</head>

2.页面顶部

![在这里插入图片描述](https://img-blog.csdnimg/d3b854c11f8e429d90a085ca3c9d6c0c.png) 
	<body>
		<!-- ----------------页面顶部---------------------- -->
		<div id="top-box">
			<!-- logo部分 -->
			<div id="logo">
				<div>
					<img src="img/logo-201305-b.png" alt="">
					<img src="img/l-icon.png" alt="">
				</div>
				<a href="https://wj-dongjian.jd/q/61a05143f2ec2b00b35e40a6" target="_blank">登录页面，调查问卷</a>
			</div>
			<!-- 隐私政策部分 -->
			<div id="policy">
				<p>
					<img src="img/icon-tips.png" alt="">
					依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a target="_blank" href="https://about.jd/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
				</p>
			</div>
		</div>

3.页面中间部分

这里的背景图我没有找到现在页面的图片，将就找了一个图先看着，这个的话不影响.

		<!-- --------------页面中间部分--------------------- -->
		<div id="middle-box">
			<div id="content">
				<div class="m-top">
					<div class="tip">
						<p><img src="img/icon-tips.png" alt="">京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
					</div>
					
					<di

本文标签： 京东页面

版权声明：本文标题：京东_登录页面制作 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729734000a1211595.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。