HTML+CSS练习——实现京东登录静态页面
最新推荐文章于 2024-05-04 15:57:19 发布
泽泽泽Ya
最新推荐文章于 2024-05-04 15:57:19 发布
阅读量6.6k
收藏
110
点赞数
20
最新推荐文章于 2024-05-04 15:57:19 发布
阅读量6.6k
收藏
110
点赞数
20
文章目录
- 1、准备阶段
- 获取素材
- 分析出基本的布局
- 掌握的知识
- 2、实现阶段
- 头部
- 身体
- 尾部
- 3、效果图
- 代码奉上
1、准备阶段
获取素材
首先打开 京东登录页面，按下F12，依次按着步骤进行。把所需要的素材都下载下来。
分析出基本的布局
每做一个页面最重要的一步就是分析布局，布局的好坏影响着你所做的页面的效果。
可以了把一个大的页面分为一个个小部分，每个框框的部分都可以当作一个div。
掌握的知识
1、html的基本知识
2、css的基本知识
2、实现阶段
头部
这里要注意 京东 和 欢迎登录 是图片
<div class="header">
<img class="logo" src="img/logo-201305-b.png" ><img src="img/l-icon.png" >
<a href="#" class="header_one"><img src="img/q-icon.png" ><span>登录页面，调查问卷</span></a>
</div>
<div class="header_top">
<p><img src="img/icon-tips.png" >依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
经过css的修饰就如下图
身体
这部分也就是一个页面主要的内容部分了，是由背景图片、div标签、a标签和from表单
等构成的。这里的from表单是个重点。
代码如下
<div class="content">
<div class="contion">
<div class="login">
<p class="login_header">
京东不会以任何理由要求您转账汇款，谨防诈骗。
</p>
<a class="login_a" href="#">扫码登录</a><a class="login_a" href="#">账户登录</a>
<form action="#">
<div class="login_content">
<i></i>
<input type="text" name="user" value="" placeholder="邮箱/用户名/手机">
</div>
<div class="login_content">
<i></i>
<input type="text" name="user" value="" placeholder="密码">
</div>
<div class="fpwd">
<a href="#">忘记密码</a>
</div>
<a class="login_b" href="#">登     录</a>
</form>
<div class="login_footer">
<a class="footer_c" href="#"><i></i>QQ</a>丨
<a class="footer_c" href="#"><i></i>微信</a>
<a class="footer_c" href="#"><i></i>立即注册</a>
</div>
</div>
</div>
</div>
css修饰后的效果
尾部
代码如下
<div class="footer">
<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>
<p class="footer_m">Copyright © 2004-2022 京东JD.com 版权所有</p>
</div>
3、效果图
代码奉上
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京东登录</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body>
<div class="header">
<img class="logo" src="img/logo-201305-b.png" ><img src="img/l-icon.png" >
<a href="#" class="header_one"><img src="img/q-icon.png" ><span>登录页面，调查问卷</span></a>
</div>
<div class="header_top">
<p><img src="img/icon-tips.png" >依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
<div class="content">
<div class="contion">
<div class="login">
<p class="login_header">
京东不会以任何理由要求您转账汇款，谨防诈骗。
</p>
<a class="login_a" href="#">扫码登录</a><a class="login_a" href="#">账户登录</a>
<form action="#">
<div class="login_content">
<i></i>
<input type="text" name="user" value="" placeholder="邮箱/用户名/手机">
</div>
<div class="login_content">
<i></i>
<input type="text" name="user" value="" placeholder="密码">
</div>
<div class="fpwd">
<a href="#">忘记密码</a>
</div>
<a class="login_b" href="#">登     录</a>
</form>
<div class="login_footer">
<a class="footer_c" href="#"><i></i>QQ</a>丨
<a class="footer_c" href="#"><i></i>微信</a>
<a class="footer_c" href="#"><i></i>立即注册</a>
</div>
</div>
</div>
</div>
<div class="footer">
<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>
<p class="footer_m">Copyright © 2004-2022 京东JD.com 版权所有</p>
</div>
</body>
</html>
css样式代码
*{
margin: 0;
padding: 0;
/* 头部 */
}
.header{
width: 990px;
height: 60px;
margin:0 auto;
padding: 10px 0;
}
.header .logo{
margin-right: 20px;
}
.header a{
color:#999999 ;
float: right;
padding-top: 40px;
font-size: 13px;
}
.header a:hover span{
color: red;
border-bottom: 1px solid red;
}
.header a img{
vertical-align: middle;
font-size: 13px;
}
/* 头部下边 */
.header_top{
background-color: #fff8f0;
}
.header_top p{
line-height: 40px;
text-align: center;
margin:0 auto;
font-size: 12px;
color: #999999;
}
.header_top p img{
vertical-align: middle;
font-size: 12px;
margin-right: 5px;
margin-top: -4px;
}
.header_top p a{
color: black;
}
.header_top p a:hover{
border-bottom: 1px solid black;
}
/* 整个内容 登录页 */
.content{
background-color: #e93854;
}
.content .contion{
width: 990px;
height: 475px;
margin: 0 auto;
background: url(img/background.png) ;
}
.content .contion .login{
width: 346px;
height: 398px;
float: right;
margin-top: 10px;
background-color: white;
}
.content .contion .login .login_header{
width: 346px;
line-height: 40px;
/* background-color: #fff8f0; */
background:#fff8f0 url(img/icon-tips.png) no-repeat 20px center;
font-size: 12px;
text-align: center;
color: #999999;
}
.content .contion .login .login_a{
display: inline-block;
width: 50%;
line-height: 55px;
text-align: center;
/* float: left; */
text-decoration: none;
color: black;
font-size: 18px;
border-bottom: 1px solid #f4f4f4;
}
.content .contion .login .login_a::after{
clear: both;
}
.content .contion .login .login_a:hover{
color: red;
}
.content .contion .login .login_content{
width: 304px;
height: 38px;
border: 1px solid #999999;
margin: 0 auto;
margin-top: 30px;
}
.content .contion .login .login_content:nth-of-type(1){
margin-bottom: -10px;
}
.content .contion .login .login_content i{
/* display: inline-block; */
height: 38px;
width: 39px;
float: left;
border-right: 1px solid #999999;
}
.content .contion .login .login_content:nth-of-type(1) i{
background: url(img/pwd-icons-new.png) no-repeat;
}
.content .contion .login .login_content:nth-of-type(2) i{
background: url(img/pwd-icons-new.png) no-repeat -48px 0;
}
.content .contion .login .login_content input{
/* vertical-align: middle; */
box-sizing: border-box;
width: 250px;
height: 38px;
border: none;
padding-left: 10px;
outline: none;
}
.content .contion .login .fpwd a{
font-size: 12px;
border-bottom: none;
margin-left: 280px;
line-height: 55px;
color: black;
text-decoration: none;
}
.content .contion .login .fpwd a:hover{
border-bottom: 1px solid red;
color: red;
}
.content .contion .login .login_b{
display: inline-block;
width: 304px;
line-height: 33px;
margin: 0 21px;
background-color: #e4393c;
text-align: center;
text-decoration: none;
color: white;
font-size: 18px;
}
.content .contion .login .login_footer{
background-color:white;
height: 50px;
margin: 34px 20px 0px 20px;
width: 306px;
}
.content .contion .login .login_footer .footer_c{
line-height: 50px;
text-decoration: none;
color: #999999;
}
.content .contion .login .login_footer a:nth-of-type(3){
color: red;
}
.content .contion .login .login_footer .footer_c i{
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
}
.content .contion .login .login_footer .footer_c:nth-of-type(1) i{
background: url(img/QQ-weixin.png) no-repeat;
}
.content .contion .login .login_footer .footer_c:nth-of-type(2) i{
background: url(img/QQ-weixin.png) no-repeat -20px 0;
}
.content .contion .login .login_footer .footer_c:nth-of-type(3) {
/* margin-left: 50px; */
float: right;
}
.content .contion .login .login_footer .footer_c:nth-of-type(3) i{
background: url(img/pwd-icons-new.png) no-repeat -103px -75px;
}
.footer{
width: 845px;
margin: 0 auto;
text-align: center;
color: gray;
font-size: 14px;
margin-top: 20px;
}
.footer a{
text-decoration: none;
color: gray;
}
.footer p{
margin-top: 10px;
}
到这里就结束了
新手上路觉得不错的点赞关注呦
泽泽泽持续更新教程
298
暂无认证
到【灌水乐园】发言
sheep999997: 为什么要用cotion 装一下呀？作用是什么呢？谢谢解答啦！
南山 ing: ，，，没懂你说的啥意思
彭大明白: 你做完了嘛
百思不得小赵: 细节很多，学到东西了,支持一下
诺诺的包包: 大佬文章很有深度，内容很丰富，看完了收获很多，向大佬学习，必须支持！