仿写京东登录页面HTML/CSS

话不多说，直接贴代码

body部分

  <body><!--=====1、顶部=====--><div id="header"><div class="h-top"><!--图标部分--><div class="icon"><img  style="width:350px;"src="JingD/页面02.png"/></div><!--问卷--><a href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans" target="_blank">登录页面，调查问卷</a></div><!--下面的文字--><div class="h-bottom"><div id=""><img style="width:25px;"src="JingD/感叹号.png"/><p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p></div></div></div><!--=====2、中间内容=====--><div id="content"><div class="input_div"><div class="info-top"><div class="top-top"><img  style="width:25px;"src="JingD/感叹号.png"/><p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p></div><div class="top-bottom"><button >扫码登录</button>|<button>账号登录</button></div></div><!--输入框模块--><div class="info-middle"><div class="username"><img src="JingD/用户.png"/><input type="text" name="username" id="" value="" placeholder="邮箱/用户名/已验证手机" /></div><div class="password"><img src="JingD/密码.png"/><input type="password" name="password" id="" value="" placeholder="密码" /></div><!--忘记密码--><a href="https://safe.jd.com/findPwd/index.action">忘记密码</a><button id="log">登  录</button></div><div class="info-bottom"><!--<ul><li class="qq"><a href="">QQ</a></li><li class="wx"><a href="">微信</a></li></ul>--><div class="login"><img style="width:25px;" src="JingD/qq.png"/> <a href="">QQ</a> | <img style="width:25px;"src="JingD/微信.png"/><a href="">微信</a></div><div class="logon"><img  style="width:20px;" src="JingD/注册.png"/><p ><a href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com"><font color="red">立即注册</font></a></p></div></div></div></div><!--=====3、底部=====--><div id="footer"><div class="other"> <a href="https://www.jd.com/" class="about">关于我们</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://about.jd.com/contact" class="call">联系我们</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://zhaopin.jd.com/home;jsessionid=0D8472A29BF72DC239E3DE9FA99D04A9.s1" class="people">人才招聘</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <a href="https://www.jd.com/" class="peo">商家入驻</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp;&nbsp;&nbsp;<a href="https://www.jd.com/" class="tall">广告服务</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp;&nbsp;&nbsp;<a href="https://app.jd.com/" class="phone">手机京东</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://club.jd.com/links.aspx" class="friend">友情链接</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp;&nbsp;&nbsp;<a href="https://media.jd.com/" class="shop">销售联盟</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp;&nbsp;&nbsp;<a href="https://sale.jd.com/act/n0hAvqy5CW8.html" class="club">京东社区</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <a href="https://gongyi.jd.com/" class="love">京东公益</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp;&nbsp;&nbsp;<a href="https://www.joybuy.com/" class="english">English Site</a> </div> <div class="versions"> <span>Copyright © 2004-2018 京东JD.com 版权所有</span> </div> </div></body>

css部分

        <style type="text/css">*{margin: 0;padding: 0;position: relative;
}
a{text-decoration: none;
}
/*=====1、header=====*/
#header{width: 100%;height: 150px;background-color: white;
}#header .h-top{width: 100%;height: 100px;}#header .h-top .icon{height: 60px;position: absolute;/*垂直居中*/left: 150px;top: 50%;line-height: 60px;margin: -30px 0 0;}#header .h-top a{/*布局*/position: absolute;right: 40px;bottom: 10px;/*字体*/font-size: 12px;color: rgb(153,153,153);/*背景图*/background: url(JingD/消息.png) no-repeat 0 center;padding-left:  20px;
}#header .h-top a:hover{color: red;text-decoration: underline;
}#header .h-bottom{width: 100%;height: 50px;background-color: rgb(255,248,240);text-align: center;
}#header .h-bottom div,.top-top{display: inline;}#header .h-bottom div p,.top-top p{font-size: 12px;color: rgb(153,153,153);display: inline;
}#header .h-bottom div img,.top-top img{top: 8px;
}/*#header .h-bottom p{text-align: center;height: 50px;line-height: 50px;font-size: 12px;color: rgb(153,153,153);background: url(../img/warning.png) no-repeat 230px center;
}*/#header .h-bottom p a{color: rgb(40,40,40);
}#header .h-bottom p a:hover{text-decoration: underline;
}/*=====2、content=====*/
#content{width: 100%;height: 475px;background: url(JingD/页面01.png) no-repeat 20% center;background-color:#E93854;}#content .input_div{width: 344px;height: 438px;background-color: wheat;position: absolute;right: 160px;top:10px;
}#content .input_div .info-top{height: 100px;background-color: rgb(255,248,240);text-align: center;
}#content .input_div .info-top .top-bottom{background-color: white;height: 55px;position: absolute;width: 100%;top: 45px;/*设置中间竖线的颜色*/color: rgb(200,200,200);border-bottom:1px solid rgb(200,200,200);
}#content .input_div .info-top .top-bottom button{width: 160px;height: 55px;border: 0;background-color:rgba(0,0,0,0);font-size: 20px;color: rgb(53,53,53);
}#content .input_div .info-top .top-bottom button:hover{color: red;
}#content .input_div .info-top .top-bottom button:focus{color: red;/*按钮和输入框成为焦点后默认的边框，是outline*/outline: none;
}#content .input_div .info-middle{height: 288px;background-color: white;border-top: 1px solid rgb(200,200,200);border-bottom: 1px solid rgb(200,200,200);
}/*用户名和密码*/
#content .input_div .info-middle .username,#content .input_div .info-middle .password{background-color: white;width: auto;height: 50px;position: absolute;left: 20px;right: 20px;top: 40px;border:1px solid rgb(180,180,180) ;
}#content .input_div .info-middle .password{top: 110px;
}#content .input_div .info-middle img{float: left;height: 100%;border:1px solid rgb(180,180,180)
}#content .input_div .info-middle input{border: 0;float: left;height: 100%;width: auto;padding-left:10px ;
}#content .input_div .info-middle input:focus{outline: none;
}/*忘记密码*/
#content .input_div .info-middle a{position: absolute;top: 180px;right: 20px;font-size: 12px;color: rgb(220,220,220);
}#content .input_div .info-middle a:hover,.about:hover,.call:hover,.club:hover,.english:hover,.friend:hover,.love:hover,.peo:hover,.people:hover,.phone:hover,.shop:hover,.tall:hover{color: red;text-decoration: underline;
}#content .info-middle #log{background-color: #E93854;font-size: 20px;letter-spacing: 23px;height: 55px;width: 89%;position: absolute;left: 20px;right: 20px;bottom: 30px;
}#content .info-middle #log:focus{color: yellow;outline: none;
}#content .input_div .info-bottom{height: 50px;background-color: white;/*text-align: center;*/
}/** 用列表调了半天感觉效果很勉强* #content .input_div .info-bottom ul{float: left;list-style-position: initial;list-style-type: circle;
}#content .input_div .info-bottom .qq{list-style-image: url(../img/qq.png);position: absolute;left: 30px;top: 10px;
}#content .input_div .info-bottom .wx{list-style-image: url(../img/weixin.png);position: absolute;left: 100px;top: 10px;
}*//*设置注册按钮*/
#content .input_div .info-bottom div {  top: 8px;/*left: 111px;*/display: inline;
}#content .input_div .info-bottom .login{position: absolute;left: 12px;
}
#content .input_div .info-bottom .logon{/*position: absolute;*/left: 233px;
}#content .input_div .info-bottom div p {color: #E93854;display: inline;}#content .input_div .info-bottom div p:hover{color: #E4393C;text-decoration: underline;
}#content .input_div .info-bottom div img{top:6px
}/*=====3、footer=====*/
#footer{width: 100%;height: 111px;background-color: white;color: rgb(153,153,153);font-size: 12px;text-align: center;top: 5px;
}
#footer .versions{top: 5px;
}#footer .other a{font-size: 12px;color: rgb(220,220,220);
}

做出来是这个样子的，不好勿怪！

仿写京东登录页面HTML/CSS相关推荐

HTML+CSS仿写京东登陆页面附代码（web前端期末大作业）
cc 本来想加上JS实现选项卡功能的,奈何本人水平实在有限,用JavaScript用到一半就放弃了,真的不会使用啊!!!给你们看看效果吧. 整体布局个人认为我这个整体布局还是比较科学的,把这个界面分 ...
HTML+CSS 仿写京东网站界面
在学习了HTML和CSS以后,用俩天的时间仿写京东网站的部分界面,基本将之前学习的内容都应用到了,收货颇多,也对网站的布局有了更深的认识. 总结整体的布局在开始写网站之前,要考虑整体的布局,事先将 ...
案例:京东登录页面css创建
京东登录页面效果图一.整体html代码 <!DOCTYPE html> <html><head><meta charset="utf-8&quo ...
canvasnest 移动距离_GitHub - XiaoxinJiang/canvas-nest: 仿知乎登录页面canvas-nest
canvas-nest 仿知乎登录页面canvas-nest 首先上效果图: 因为使用gif图片的原因,线条不是很清晰,大家可以到我的博客观看效果:http://cherryblog.site/ ,( ...
uniapp写一个登录页面
很高兴为您解答,可以参考以下步骤来写一个登录页面: 创建一个uniapp项目,并在项目中创建一个登录页面: 在登录页面中添加用户名和密码输入框,以及一个登录按钮: 在登录按钮的点击事件中,添加验证用户 ...
使用Vue写一个登录页面
上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面. 1.构建项目的目录 2.App.vue <template><div id="app"&g ...
仿写小米商城简单页面案例
<div class="topbar"><div class="container"><div class="topba ...
vue 写的登录页面
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.登录页面? 二.使用步骤 1.引入库前言提示:以下是本篇文章正文内容,下面案例可供参考一.登录页面 1.用e ...
原创｜RSA加密详解，京东登录页面都在用加密有什么好？
前言在以前的一个项目中,觉得登录注册的加密方式不安全,需要改造一下,就用到了RSA加密.网上都说它是最安全的,现有的技术是无法破解的.我知道的京东的登录和国寿的登录都是用的这个加密.我想整理一下,肯 ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...

仿写京东登录页面HTML/CSS

仿写京东登录页面HTML/CSS相关推荐

最新文章

热门文章