制作京东登陆页面 HTML+CSS
先来看一下最终的效果:
HTML的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(function() {
$("#smContent").hide();
$("#zhContent").show();
$("#zhLogin").addClass("active");
// 给用户输入框添加onfucs事件
$("#nameInput>input").bind("focus", function() {
// 将对应前面的图片src值换掉
$("#nameInput>img").attr("src", "img/nameInput.png");
});
$("#pwdInput>input").bind("focus", function() {
$("#pwdInput>img").attr("src", "img/pwdInput.png");
});
// 给用户输入框添加onblur事件
$("#nameInput>input").bind("blur", function() {
// 将对应前面的图片src值换掉
$("#nameInput>img").attr("src", "img/name.jpg");
});
$("#pwdInput>input").bind("blur", function() {
$("#pwdInput>img").attr("src", "img/pwd.jpg");
});
$(".loginMenu").click(function() {
var indexLogin = $(this).index();
if (indexLogin == 1) { //扫码登录
//给扫码添加样式
$("#smLogin").addClass("active");
//给账号登录去掉样式
$("#zhLogin").removeClass("active");
//让扫码登录显示
$("#smContent").show();
//让账户登录隐藏
$("#zhContent").hide();
} else { //账号登录
//给扫码去掉样式
$("#smLogin").removeClass("active");
//给账号登录添加样式
$("#zhLogin").addClass("active");
//让扫码登录隐藏
$("#smContent").hide();
//让账户登录显示
$("#zhContent").show();
}
})
});
</script>
</head>
<body>
<div id="headBox">
<img src="img/logo.jpg" height="80px" />
<img src="img/login.jpg" class="welcome" />
<img src="img/msg-login.jpg" class="rightImg" />
<a href="#" class="rightLogin">登录页面调查问卷</a>
</div>
<div id="mainBox">
<img src="img/bj-login.jpg" />
<div id="loginBox">
<div id="hintBox">
<img src="img/icon-tips.png" />
京东不以任何理由要求您转账汇款,谨慎诈骗.
</div>
<span class="loginMenu" id="smLogin">扫码登录</span>
<span class="loginMenu" id="zhLogin">账户登录</span>
<hr />
<div id="smContent">
<img src="img/erweima.jpg" />
<div id="box8">打开<a href="#">手机京东</a> 扫描二维码</div>
<div><img src="img/IMG_3337(20220819-114417).PNG" >免输入
<img src="img/IMG_3336(20220819-114432).PNG" >更快
<img src="img/IMG_3337(20220819-114500).PNG" >更安全
</div>
</div>
<div id="zhContent">
<div class="inputBox" id="nameInput">
<img src="img/name.jpg" width="35px" height="35px" />
<input type="text" name="username" placeholder="请输入用户名" />
</div>
<div class="inputBox" id="pwdInput">
<img src="img/pwd.jpg" width="35px" height="35px" />
<input type="password" name="pwd" placeholder="请输入密码" />
</div>
<a href="#">忘记密码</a>
<div class="inputBox">登录</div>
</div>
<div id="loginFoot">
<img src="img/qq.jpg" />QQ
<img src="img/weixin.jpg" />微信
<a href="#">
<img src="img/arrow.jpg" />立即注册
</a>
</div>
</div>
</div>
<div id="footBox">
<span>关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益 | English Site</span>
<br />
<span>Copyright © 2004-2017 京东JD.com 版权所有</span>
</div>
</body>
</html>
CSS代码如下:
* {
padding: 0px;
margin: 0px;
}
#headBox {
width: 1000px;
height: 80px;
position: relative;
left: 50%;
margin-left: -500px;
}
.welcome {
position: relative;
top: -27px;
}
.rightLogin {
position: absolute;
bottom: 5px;
right: 0px;
color: gray;
text-decoration: none;
font-size: 12px;
}
.rightImg {
position: absolute;
right: 100px;
bottom: 3px;
}
#mainBox {
width: 100%;
height: 474px;
background-color: #E93854;
position: relative;
}
#mainBox>img {
position: absolute;
left: 450px;
top: 0px;
}
#loginBox {
width: 350px;
height: 430px;
background-color: #ffffff;
position: absolute;
left: 1110px;
top: 15px;
}
#hintBox {
width: 100%;
height: 37px;
background-color: #fff8f0;
text-align: center;
line-height: 37px;
font-size: 12px;
color: darkgray;
}
#hintBox>img {
position: relative;
top: 5px;
}
.loginMenu {
display: inline-block;
margin: 18px 0px;
font-size: 18px;
font-weight: 800;
width: 170px;
text-align: center;
color: gray;
}
.active {
color: red;
}
#smLogin {
border-right: 1px solid gray;
}
#smContent,
#zhContent {
width: 100%;
height: 280px;
position: absolute;
left: 0px;
top: 95px;
border-bottom: 1px solid gray;
}
#loginFoot {
width: 100%;
height: 50px;
background-color: #fefefe;
position: absolute;
bottom: 0px;
line-height: 50px;
}
#loginFoot img {
position: relative;
top: 6px;
}
#loginFoot>a {
color: red;
text-decoration: none;
}
#smContent>img {
position: absolute;
left: 90px;
top: 30px;
cursor: pointer;
}
#footBox {
width: 730px;
height: 50px;
margin: 10px auto;
font-size: 12px;
color: gray;
text-align: center;
}
.inputBox {
width: 300px;
height: 35px;
border: 1px solid gray;
margin: 15px 25px;
text-align: center;
line-height: 35px;
}
#zhContent>a {
position: relative;
right: -265px;
text-decoration: none;
color: purple;
}
#nameInput,
#pwdInput {
margin-top: 35px;
margin-bottom: 35px;
}
.inputBox>input {
width: 255px;
height: 32px;
position: relative;
top: -13px;
font-size: 18px;
border: none;
outline: none;
}
#box8{
position: relative;
left: 90px;
top: 200px;
}
a{
color: red;
text-decoration: none;
}
制作京东登陆页面 HTML+CSS相关推荐
- HTML第6章上机练习3(制作京东快报页面)
代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
- DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
- 制作京东快报页面html,HTML第6章上机练习3(制作京东快报页面)
代码如下: 制作京东快报页面 .title{ height: 186px; width: 230px; box-sizing: border-box; border: 1px solid gainsb ...
- HTML+CSS仿写京东登陆页面附代码(web前端期末大作业)
cc 本来想加上JS实现选项卡功能的,奈何本人水平实在有限,用JavaScript用到一半就放弃了,真的不会使用啊!!!给你们看看效果吧. 整体布局 个人认为我这个整体布局还是比较科学的,把这个界面分 ...
- Vue实现京东登陆页面(仅实现部分功能)
一.由四个vue组件组成: 1.头部Head 代码如下: <template><div id="head"><img src="../ass ...
- 制作html表白页面,HTML+CSS入门 表白页面实例讲解
本篇教程介绍了HTML+CSS入门 表白页面实例讲解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 目录文件结构: index.html + jquery\jquery-1 ...
- html制作唯品会登陆页面,login.html
唯品会登陆 * { padding: 0; margin: 0; } a { text-decoration: none; color: #666; } body { font-size: 12px; ...
- 制作京东快报页面html,京东快报.html
京东快报 li{ list-style: none; } a{ text-decoration: none; color: black; } a:hover{ color:blue; } .box{ ...
- 制作京东快报页面html,仿京东快报.html
京东快报 body h1{ margin: 0; padding: 0; } .kb{ width: 400px; height: 300px; box-sizing: border-box; bor ...
- HTML5期末大作业:动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成 临近期末, 你还在为 ...
最新文章
- javer的表结构设计
- 基于AI的便携式神经假肢让截肢14年患者操作自如,高精度、低延迟
- Android之Bmob移动后端云服务器
- Mysql主从和redis集群哪个好_Redis的三种模式:主从、哨兵、集群
- 前端月趋势榜:9 月最新上榜的、热门的 10 个前端开源项目 - 2109
- python映射的主要特点_30 个 Python 语言的特点技巧
- WINDOWS7都谢幕了,微软为何不出个补丁包?
- Java集合干货——HashMap源码分析
- 互联网公司吹牛逼指南
- 【回波损耗(dB)和电压驻波比(VSWR)之间的关系】
- java支持xls格式的excel导入和导出
- 微积分memo——一元函数积分学
- CentOS7定制Gnome3外观
- 尚医通【预约挂号系统】总结
- 使用C#在VS窗体应用中调起一个选择框,完成图片替换
- 运维干到35岁,还能干多久?
- Android传感器的使用(1)——摇一摇切换图片
- java好看的图形界面_java写出图形界面
- (3) 理解ConvLSTM
- 计算机网络有什么出差的事由,计算机网络试卷A
热门文章
- 微信群活码生成系统,群活码、客服活码、一套非常棒的免费开源群活码系统
- 13.2-“制作一款私有IAP串口下载小工具”之串口IAP的通信协议设计
- 一图看懂西方哲学全脉络
- Java项目:JSP会议-会议室管理系统
- [FSOD][笔记]Context-Transformer: Tackling Object Confusion for Few-Shot Detection(AAAI 2020)
- no javac in (/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin)
- Okhttp上传图片
- dingo php,dingo/api 使用
- 中年危机也许只是个幻觉
- 攻防世界web初级练习区(详解十二个题)