HTMl+CSS 模仿京东网登录页面
2024-04-12 16:51:22
课后实践项目，仅页面效果，写博客纯属记录！
码云开源仓库地址：https://gitee.com/ynavc/jd
演示地址：https://ynavc.gitee.io/jd
效果图：
实现代码：
HTML：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/index.css"/><title>京东-欢迎登录</title></head><body><!-- 最外层的div --><div id="warp"><!-- 顶部 --><div id="top"><div class="top-left"><a href="#"><img src="img/logo.png" ></a><a href="#"><img src="img/l-icon.png" ></a></div><div class="top-right"><a href="#"><img src="img/q-icon.png" align="center"> 登陆页面，调查问卷</a></div></div><!-- 顶部下的提示文字 --><div class="cont-wrapper"><p><img src="img/icon-tips.png" align="center"> 依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="#">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p></div><!-- 中间主要内容部分 --><div id="content"><div class="login-wrap"><!-- 中间背景图 --><div class="login-banner"></div><!-- 登陆表单部分 --><div class="login-form"><!-- 表单顶部提示文字 --><div class="cont-wrapper"><p><img src="img/icon-tips.png" align="center"> 京东不会以任何理由要求您转账汇款，谨防诈骗。</p></div><!-- 登陆选项 --><div class="login-tab"><div class="login-tab-item login-tab-left"><a href="#">扫码登录</a></div><div class="login-tab-item login-tab-right"><a href="#">账户登录</a></div></div><!-- 登录框 --><div class="login-box"><div class="login-box-1"><label></label><input type="text" name="" class="itxt" value="" placeholder="邮箱/用户名/登录手机" /></div><div class="login-box-2"><label></label><input type="text" name="" class="itxt" value="" placeholder="密码" /></div><div class="login-box-3"><a href="#">忘记密码</a></div><div class="login-box-4"><a href="#">登录</a></div></div><!-- 尾部其他登录方式 --><div class="form-foot"><ul><li><a href="#"><b class="QQ-icon"></b><span>QQ</span></a><span class="line">|</span></li><li><a href="#"><b class="weixin-icon"></b><span>微信</span></a></li><li><a href="#"><b></b>立即注册</a></li></ul></div></div></div></div><!-- 网页尾部 --><div id="foot"><div class="links"><a rel="nofollow" target="_blank" href="//about.jd.com/">关于我们</a>|<a rel="nofollow" target="_blank" href="//www.jd.com/contact/">联系我们</a>|<a rel="nofollow" target="_blank" href="//zhaopin.jd.com/">人才招聘</a>|<a rel="nofollow" target="_blank" href="//lai.jd.com/">商家入驻</a>|<a rel="nofollow" target="_blank" href="//jzt.jd.com/">广告服务</a>|<a rel="nofollow" target="_blank" href="//app.jd.com/">手机京东</a>|<a target="_blank" href="//club.jd.com/links.aspx">友情链接</a>|<a target="_blank" href="//media.jd.com/">销售联盟</a>|<a href="//pro.jd.com/mall/active/3WA2zN8wkwc9fL9TxAJXHh5Nj79u/index.html" target="_blank">京东社区</a>|<a href="//gongyi.jd.com" target="_blank">京东公益</a>|<a target="_blank" href="//www.joybuy.com/" clstag="pageclick|keycount|20150112ABD|9">English Site</a></div><!-- 页脚 --><div class="copyright">Copyright © 2004-2020 京东JD.com 版权所有</div></div></div></body>
</html>
CSS：
*{margin: 0;padding: 0;
}
/* 页面的外层 */
#warp{width: 100vw;height: 100vh;
}
/* —————顶部————— */
#top{margin: 0 auto;width: 1500px;height: 80px;background-color: white;display: flex;justify-content: space-around;
}
/* 顶部左边 */
.top-left{margin: 10px 50px 0px 0px;
}
/* 顶部右边边 */
.top-right a{position: relative;color: #999;float: right;top: 52px;line-height: 20px;text-decoration: none;font-size: 12px;
}
.top-right a:hover{color: #E4393C;text-decoration: underline;
}
/* —————顶部下面的提示文字————— */
.cont-wrapper{background: #fff8f0;width: 100%;padding-top: 10px;padding-bottom: 10px;text-align: center;
}
.cont-wrapper img{width: 17px;height: 17px;align-items: center;
}
.cont-wrapper p{vertical-align: middle;color: #999;font-size: 12px;display: inline-block;
}
.cont-wrapper a{color: #333;text-decoration: none;
}
.cont-wrapper a:hover{text-decoration: underline;
}
/* —————中间表单部分————— */
#content{/* width: 1200px; */height: 450px;margin: 0 auto;background-color: #c4893b;overflow: hidden;
}
/* 中间内容部分的外层 */
.login-wrap{width: 900px;height: 475px;margin: 0 auto;display: flex;position: relative;
}
/* 中间背景图 */
.login-banner{width: 100%;position: relative;z-index: 3;height: 475px;background: url(../img/bg.jpg) no-repeat;/* background-size: cover; */position: absolute;left: -50px;bottom: 22px;
}
/* ———登陆表单部分——— */
.login-form{width: 346px;/* height: 426px; */position: absolute;top: 20px;right: -30px;z-index: 4;background: #fff;overflow: visible;
}
/* 扫码登陆和账户登录选项 */
.login-tab{height: 54px;display: flex;line-height: 54px;text-align: center;
}
.login-tab div{width: 50%;border-bottom: 1px solid #f4f4f4;
}
.login-tab a{font-size: 18px;border-bottom: 1px solid #f4f4f4;color: #666;text-decoration: none;
}
.login-tab a:hover{color: #e4393c;font-weight: bold;
}
.login-tab-right a{color: #e4393c;font-weight: bold;
}
/* 中间主要表单部分 */
.login-box{margin-top: 30px;text-align: center;position: relative;
}
.login-box-1,.login-box-2{height: 38px;width: 304px;margin: 0 auto;border: 1px solid #bdbdbd;position: relative;margin-bottom: 20px;
}
.login-box-1 label{position: absolute;z-index: 3;top: 0;left: 0;width: 38px;height: 38px;border-right: 1px solid #bdbdbd;background: url(../img/pwd-icons-new.png);
}
.login-box-2 label{position: absolute;z-index: 3;top: 0;left: 0;width: 38px;height: 38px;border-right: 1px solid #bdbdbd;background: url(../img/pwd-icons-new.png);background-position: -48px 0;
}
/* 两个输入框 */
.itxt{line-height: 18px;height: 18px;border: 0;padding: 10px 0 10px 50px;width: 254px;float: none;overflow: hidden;font-size: 14px;font-family: '\5b8b\4f53';outline: none;
}
.login-box-3{margin: 0 auto;text-align: right;height: 38px;width: 304px;
}
.login-box-3 a{font: 12px/150% Arial,Verdana,"\5b8b\4f53";color: #666;text-decoration: none;
}
.login-box-3 a:hover{color: #e4393c;text-decoration: underline;
}
.login-box-4{margin: 0 auto;border: 1px solid #e85356;display: block;width: 302px;background: #e4393c;height: 31px;
}
.login-box-4 a{line-height: 31px;color: #fff;font-size: 20px;text-decoration: none;
}
/* ————表单底部———— */
.form-foot{margin-top: 30px;/* width: 100%; */padding-left: 20px;padding-right: 20px;line-height: 50px;border-top: 1px solid #f4f4f4;height: auto;background-color: #fcfcfc;display: flex;position: relative;
}
.form-foot{display: block;
}
.form-foot a:hover{color: #e4393c;text-decoration: underline;
}
.form-foot li{list-style: none;float: left;display: list-item;text-align: -webkit-match-parent;
}
.form-foot li:last-child{float: right;color: #b61d1d;
}
.form-foot li:last-child a{float: right;color: #b61d1d;
}
.form-foot li:last-child b{display: inline-block;width: 16px;height: 16px;overflow: hidden;background: url(/img/pwd-icons-new.png) -104px -75px no-repeat;vertical-align: middle;margin-right: 5px;
}.line{color: #ccc;padding: 0 10px;font-size: 12px;
}
.QQ-icon,.weixin-icon{width: 19px;height: 18px;display: block;background: url(../img/QQ-weixin.png) no-repeat;margin: 0 auto;position: absolute;float: left;left: 0;top: 16px;
}
.weixin-icon{background: url(../img/QQ-weixin.png) no-repeat;background-position: -20px 0;
}
.form-foot a{color: #666;text-decoration: none;font-size: 12px;display: inline-block;position: relative;padding-left: 24px;
}
/* —————网页尾部————— */
#foot{padding-top: 30px;padding-bottom: 30px;text-align: center;
}
/* 尾部导航 */
.links{color: #666;font-size: 12px;
}
#foot a{margin: 0 10px;text-decoration: none;color: #666666;font-size: 12px;
}
#foot a:hover{color: #e4393c;text-decoration: underline;
}
/* 版权部分 */
.copyright{margin: 10px 0;font-size: 12px;color: #666666;
}HTMl+CSS 模仿京东网登录页面相关推荐
- 微信小程序相关一、模仿京东静态登录页面
一.培训的第一天,基本上没有什么最新的东西,但是看到老师的代码收获的确实是不少. 1.1.首页代码很简洁,将共有的样式都提取的很好. 1.2.其次是每一个小块写样式的时候用到了好多子代选择器和后代选择 ...
- 【HTML】@weijinhai0101：模仿酷狗登录页面半成品（CSS样式和HTML代码放在一起了）
``` <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
- 京东商城项目实战（2）------京东商城登录页面
项目实战:京东商城(1)----京东商城首页 京东商城(2)----京东商城登录页面 京东商城(3)----京东商城注册页面 效果图: 点击账户登录的效果: 源代码(如需其余源码,请在下方评论留言): ...
- html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面 这是效果图 这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
- HTML+CSS制作知乎登录页面
HTML+CSS制作知乎登录页面 由于没有用上js相关的技术,所以无法做出相应的功能,,只能做出知乎登录页面的用密码登录的界面,不能切换到免密码登录.相关界面的图片如下: 网页上的原图: 我做的: ...
- HTML前端仿京东静态登录页面
HTML前端仿京东静态登录页面 很多小伙伴在学习前端静态布局的时候 总是一头雾水不知版图从何构造 今天就写了一篇这个京东登录页面和大家一快学习! <!DOCTYPE html> <h ...
- 用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码 登 陆 微信登陆QQ登陆 注 册 #zuo{ width: 500px; height: 540px; background: whi ...
- HTML CSS 模仿当当网
使用HTML + CSS 编写当当网 效果图如下展示: 代码块: <!DOCTYPE html> <html><head><meta charset=&quo ...
- 仿京东商城登录页面_京东e卡如何使用？
一.使用 京东E卡可以在 www.jd.com ("本网站")上购买自营商品,部分特殊商品除外,详细可见"购卡章程",具体有效期请登录京东商城,在"我 ...
最新文章
- 日常生活小技巧 -- 网络调试助手
- java中以json形式的打印
- 为您的软件系统设计选择最佳的工具
- C# 连接MySQL错误给定关键字不在字典中”，下载最新mysql.dll文件即可
- 卸载。net开发的服务
- caffe各种依赖包配置
- 25+ 个 jQuery 网页拖放操作的插件
- 无法登陆到你的账号 桌面的文件都消失_都别拦着我，我要删库了
- ssl教程易语言代码
- python画图时常用的颜色——color=‘ ’
- 判断推理---逻辑判断
- 母牛的故事（C语言）
- LTE上行物理层传输机制（5）-CQI的传输方式
- 【Java定时器】每天凌晨12点执行一次
- 算数运算异常ArithmeticException
- CPU也能加速AlphaFold2！英特尔最新发布：23倍通量优化指南！
- 如何优雅的阅读论文——福昕阅读器
- 黑客都用Python做什么？我们能学会这些技术吗？
- ural 1998 The old Padawan
- 图像分割评价指标模型总结