本文基于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.页面顶部
 <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.com/q/61a05143f2ec2b00b35e40a6" target="_blank">登录页面，调查问卷</a>
</div>
<!-- 隐私政策部分 -->
<div id="policy">
<p>
<img src="img/icon-tips.png" alt="">
依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a target="_blank" href="https://about.jd.com/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>
<div class="btn-box">
<button>扫码登录</button>
<span>|</span>
<button class="select">账号登录</button>
</div>
</div>
<div class="m-middle">
<!-- 用户名 -->
<div class="username">
<img src="img/pygame.png" alt="">
<input type="text" placeholder="邮箱\账号名\登录手机">
</div>
<!-- 密码 -->
<div class="password">
<img src="img/password_icon.png" alt="">
<input type="password" placeholder="密码">
</div>
<!-- 忘记密码 -->
<a href="https://aq.jd.com/process/findPwd?s=1" target="_blank">忘记密码</a>
<!-- 登录按钮 -->
<button>登  录</button>
</div>
<!-- ---第三方登录盒子---- -->
<div class="m-bottom">
<a href="" class="qq">QQ</a>
<a href="" class="weixin">微信</a>
<a href="" class="register">立即注册</a>
</div>
</div>
</div>
4.页面底部
<!-- --------------页面底部------------------------ -->
<div id="bottom-box">
<div>
<a href="">关于我们</a>
<span>|</span>
<a href="">联系我们 </a>
<span>|</span>
<a href="">人才招聘 </a>
<span>|</span>
<a href="">商家入驻 </a>
<span>|</span>
<a href="">广告服务 </a>
<span>|</span>
<a href="">手机京东</a>
<span>|</span>
<a href="">友情链接 </a>
<span>|</span>
<a href="">销售联盟 </a>
<span>|</span>
<a href="">京东社区 </a>
<span>|</span>
<a href="">京东公益 </a>
<span>|</span>
<a href="">English Site</a>
</div>
<p>Copyright © 2004-2022 京东JD.com 版权所有</p>
</div>
</body>
</html>
css代码部分
对应html文件中的id和class属性进行一对一属性修改
/* 去掉所有标签自带的边距 */
*{
margin: 0;
padding: 0;
}
/* ----------------页面顶部---------------------- */
#top-box{
height: 120px;
}
/* ---- 1. logo部分 ---- */
#logo{
height: 80px;
background-color: white;
position: relative;
}
#logo>div{
/* 设置图片盒子到左边的距离 */
/* margin-left: 223px; */
position: absolute;
left: 223px;
/* 设置图片盒子在父标签中垂直方向居中*/
top: 9px;
}
#logo>a{
position: absolute;
right: 225px;
bottom: 10px;
font-size: 12px;
color: rgb(160, 160, 160);
font-weight: 400;
text-decoration: none;
/* 添加背景图 */
padding-left: 22px;
background: url("../img/q-icon.png") no-repeat 0 center;
}
#logo>a:hover{
color: rgb(211,72, 68);
text-decoration: underline;
}
/* ----- 2. 隐私政策部分 ---- */
#policy{
height: 40px;
background-color: rgb(255, 248, 241);
}
#policy>p{
color: rgb(160, 160, 160);
font-size: 12px;
/* 让p标签内容水平方向居中 */
text-align: center;
/* 让p标签内容垂直方向居中 */
height: 40px;
line-height: 40px;
}
#policy img{
/* 让图片和文字可以对齐：设置图片的垂直对齐方式 */
vertical-align: middle;
}
#policy a{
color: rgb(86, 86, 86);
text-decoration: none;
}
#policy a:hover{
text-decoration: underline;
}
/* --------------页面中间部分--------------------- */
#middle-box{
height: 475px;
background: url("../img/6efbf2cadd6042e2.jpg") no-repeat 240px center rgb(231, 211, 175);
position: relative;
}
/* -----提供输入操作的大盒子------- */
#content{
background-color: white;
width: 345px;
height: 400px;
position: absolute;
right: 225px;
top: 10px;
}
/* ----中间盒子的顶部---- */
.m-top{
height: 90px;
}
/* 诈骗提示部分 */
.tip{
background-color: rgb(255, 248, 241);
height: 40px;
}
.tip>p{
font-size: 12px;
color: rgb(160, 160, 160);
text-align: center;
height: 40px;
line-height: 40px;
}
.tip img{
vertical-align: middle;
margin-right: 3px;
}
/* 登录按钮部分 */
.btn-box{
height: 50px;
}
.btn-box>button{
border: none;
width: 165px;
height: 100%;
background-color: white;
font-size: 18px;
color: rgb(133, 133, 133);
font-weight: 500;
}
.btn-box>.select{
color: rgb(211, 72, 68);
}
.btn-box>span{
color: rgb(245, 245, 245);
}
/* ---- 提供输入框和登录按钮的部分 ------*/
.m-middle{
height: 260px;
border-top: 1px solid rgb(245, 245, 245);
border-bottom: 1px solid rgb(245, 245, 245);
position: relative;
}
/* 两个输入框 */
.m-middle>div{
width: 305px;
height: 37px;
margin-left: 20px;
margin-top: 32px;
border: 1px solid rgb(190, 190, 190);
}
.m-middle>.password{
margin-top: 20px;
}
.m-middle input{
height: 36px;
width: 250px;
vertical-align: top;
border: none;
outline: none;
font-size: 16px;
}
.m-middle img{
height: 37px;
border-right: 1px solid rgb(190, 190, 190);
}
/* 忘记密码 */
.m-middle>a{
position: absolute;
right: 20px;
bottom: 87px;
font-size: 12px;
color: rgb(114, 114, 114);
text-decoration: none;
}
.m-middle>a:hover{
color: rgb(211, 72, 68);
text-decoration: underline;
}
/* 登录按钮 */
.m-middle>button{
width: 305px;
height: 33px;
background-color: rgb(211, 72, 68);
color: white;
font-size: 20px;
position: absolute;
left: 20px;
bottom: 30px;
border: none;
}
/* ----第三方登录----- */
.m-bottom{
height: 50px;
line-height: 50px;
position: relative;
}
.qq{
margin-left: 20px;
font-size: 12px;
color: rgb(102, 102, 102);
text-decoration: none;
background: url('../img/qq.png') no-repeat 0 center;
padding-left: 25px;
}
.weixin{
margin-left: 20px;
font-size: 12px;
color: rgb(102, 102, 102);
text-decoration: none;
background: url('../img/weixin.png') no-repeat 0 center;
padding-left: 25px;
}
.register{
position: absolute;
right: 20px;
font-size: 14px;
color: rgb(172, 57, 50);
text-decoration: none;
background: url('../img/right.png') no-repeat 0 center;
padding-left: 25px;
}
.qq:hover,.weixin:hover,.register:hover{
text-decoration: underline;
color: rgb(172, 57, 50);
}
/* --------------页面底部------------------------ */
#bottom-box{
height: 150px;
}
#bottom-box>div{
height: 40px;
line-height: 40px;
text-align: center;
}
#bottom-box a{
font-size: 12px;
color: rgb(108, 108, 108);
text-decoration: none;
}
#bottom-box a:hover{
color: rgb(211, 72, 68);
text-decoration: underline;
}
#bottom-box span{
font-size: 12px;
color: rgb(108, 108, 108);
margin-left: 10px;
margin-right: 10px;
}
#bottom-box>p{
text-align: center;
color: rgb(108, 108, 108);
font-size: 12px;
}
到此为止啦！
目前这里还不涉及js部分，但是页面做完后以及完全能看得下去，但是没有功能
回到开头
本文用于前端学习，借鉴于京东登录页面设计，仅仅就页面设计进行模拟学习
本文含有隐藏内容，请 开通VIP 后查看