京东购物车代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>京东-欢迎登录</title>
<!--设置图标-->
<link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
<!--通用样式-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--1.====================网页顶部样式=======================-->
<style type="text/css">
.top{
/*background-color: hotpink;*/
height: 120px;
}
/*========logo==========*/
.top .logo{
/*background-color: wheat;*/
height: 80px;
position: relative;
}
.top .logo div{
/*定位*/
position: absolute;
left: 185px;
/*在父标签上垂直方向居中*/
top:50%;
margin-top: -30px;
}
.top .logo .a2{
/*定位*/
position: absolute;
right: 185px;
bottom: 10px;
/*字体*/
font-size: 12px;
color: rgb(142,142,142);
text-decoration: none;
/*背景*/
background: url(img/q-icon.png) no-repeat 0 center #ffffff;
padding-left: 20px;
}
/*鼠标悬停*/
.top .logo .a2:hover{
color: rgb(216,36,50);
text-decoration: underline;
}
/*========message=========*/
.top .message{
background-color: rgb(255,246,236);
height: 40px;
/*子标签水平方向居中*/
text-align: center;
/*子标签垂直方向居中*/
line-height: 40px;
}
.top .message p{
/*字体*/
font-size: 12px;
color: rgb(142,142,142);
/*背景*/
background: url(img/xx.png) no-repeat 212px center raba(0,0,0,0);
}
.top .message a{
/*字体*/
color: rgb(50,50,50);
text-decoration: none;
}
.top .message a:hover{
text-decoration: underline;
}
</style>
<!--1.====================网页顶部=======================-->
<div class="top">
<!--顶部的顶部-->
<div class="logo">
<div>
<a class="a1" href=""><img src="img/logo.png"/></a>
<img src="img/l-icon.png"/>
</div>
<a class="a2" href="">
登录页面,调查问卷
</a>
</div>
<!--顶部的底部-->
<div class="message">
<p>
依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证!
新版<a href="">《京东隐私政策》</a>已上线,将更有利于保护您的个人隐私。
</p>
</div>
</div>
<!--2.======================网页内容样式=============================-->
<style type="text/css">
.content{
background-color: rgb(81,158,220);
height: 475px;
position: relative;
}
.content .bg_img{
position: absolute;
top: 50%;
margin-top: -237px;
left: 100px;
}
/*登录框*/
.content .login_div{
background-color: white;
width: 350px;
height: 400px;
/*定位*/
position: absolute;
top: 10px;
right:185px;
}
/*顶部*/
.content .login_div .div1{
background-color: rgb(255,246,236)
height: 40px;
/*居中*/
text-align: center;
line-height: 40px;
}
.content .login_div .div1 font{
font-size: 12px;
color: rgb(142,142,142);
/*背景*/
background: url(img/xx.png) no-repeat 0 center rgba(0,0,0,0);
padding: 20px;
}
/*中间*/
.content .login_div .div2{
/*background-color: lightblue;*/
height: 310px;
}
.content .login_div .div2 .btn{
height: 55px;
background-color: white;
color: #dddddd;
font-weight: 100;
}
.content .login_div .div2 .btn button{
width: 170px;
height: 100%;
background-color: rgba(0,0,0,0);
border: none;
font-size: 20px;
color: rgb(83,83,83);
}
/*鼠标悬停状态*/
.content .login_div .div2 .btn button:hover{
color: rgb(217,48,60);
}
/*成为焦点的状态*/
.content .login_div .div2 .btn button:focus{
outline: none;
}
/*输入*/
.content .login_div .div2 .input{
height: 255px;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
position: relative;
}
/*输入框*/
.content .login_div .div2 .input div{
width: 310px;
height: 40px;
border: 1px solid #999999;
margin: 20px;
}
.content .login_div .div2 .input .un_div{
margin-top: 40px;
}
/*输入框*/
.content .login_div .div2 .input div input{
height: 100%;
width: 250px;
vertical-align: top;
border: none;
font-size: 15px;
}
.content .login_div .div2 .input div input:focus{
outline: none;
}
/*图标*/
.content .login_div .div2 .input div img{
height: 100%;
width: 40px;
border-right: 1px solid #999999;
}
/*忘记密码*/
.content .login_div .div2 .input a{
position: absolute;
right: 20px;
font-size: 13px;
color: rgb(53,53,53);
text-decoration: none;
}
.content .login_div .div2 .input a:hover{
color: rgb(217,48,60);
text-decoration: underline;
}
/*登录按钮*/
.content .login_div .div2 .input .lg_btn{
width: 310px;
height: 35px;
/*定位*/
position: absolute;
bottom: 30px;
left: 20px;
font-size: 20px;
/*设置背景颜色*/
background-color: red;
/*设置内容颜色*/
color: white;
}
/*取消焦点状态*/
.content .login_div .div2 .input .lg_btn:focus{
outline: none;
}
/*底部*/
.content .login_div .div3{
height: 50px;
}
.content .login_div .div3 ul{
list-style-type: none;
}
/*左边*/
.content .login_div .div3 .bt_1 li{
float: left;
line-height: 50px;
padding-left: 20px;
font-size: 14px;
}
/*QQ*/
.content .login_div .div3 .bt_1 .bt_qq{
/*背景*/
background: url(img/qq.png) no-repeat 0 center rgba(0,0,0,0);
padding-left: 25px;
/*去掉下划线*/
text-decoration: none;
color: black;
padding-right: 20px;
border-right: 1px solid gray;
}
.content .login_div .div3 .bt_1 .bt_qq:hover{
color: red;
text-decoration: underline;
}
/*微信*/
.content .login_div .div3 .bt_1 .bt_wx{
/*背景*/
background: url(img/weixin.png) no-repeat 0 center rgba(0,0,0,0);
padding-left: 25px;
/*去掉下划线*/
text-decoration: none;
color: black;
}
.content .login_div .div3 .bt_1 .bt_wx:hover{
color: red;
text-decoration: underline;
}
/*右边*/
.content .login_div .div3 .bt_2 a{
float: right;
/*垂直居中*/
line-height: 50px;
margin-right: 20px;
/*背景*/
background: url(img/right.png) no-repeat 0 center rgba(0,0,0,0);
padding-left: 25px;
color: red;
/*去掉下划线*/
text-decoration: none;
font-size: 18px;
}
.content .login_div .div3 .bt_2 a:hover{
color: gray;
text-decoration: underline;
}
</style>
<!--2.======================网页内容=====================-->
<div class="content">
<img class="bg_img" src="img/bg2.png"/>
<!--登录框-->
<div class="login_div" id="">
<!--顶部-->
<div class="div1">
<font>
京东不会以任何理由要求您转账汇款,谨防诈骗。
</font>
</div>
<!--中间-->
<div class="div2">
<div class="btn">
<button class="btn1">
扫码登录
</button>|
<button class="btn2">
账号登录
</button>
</div>
<!--输入框-->
<div class="input">
<form action="#">
<div class="un_div">
<label for="username"><img src="img/pygame.png"/></label>
<input placeholder="邮箱/用户名/已验证手机" type="text" name="username" id="username" value="" />
</div>
<div class="pw_div">
<label for="password"><img src="img/password_icon.png"/></label>
<input placeholder="密码" type="password" name="password" id="password" value="" />
</div>
<a href="">忘记密码</a>
<input class="lg_btn" type="submit" value="登 录"/>
</form>
</div>
</div>
<!--底部-->
<div class="div3">
<ul class="bt_1">
<li><a class="bt_qq" href="">QQ</a></li>
<li><a class="bt_wx" href="">微信</a></li>
</ul>
<ul class="bt_2">
<li><a href="">立即注册</a></li>
</ul>
</div>
</div>
</div>
<!--3.=====================网页底部样式=====================-->
<style type="text/css">
.bottom{
background-color: darkgray;
height: 110px;
}
.bottom .bo_div1{
background-color: white;
height: 70px;
/*水平方向居中*/
text-align: center;
/*竖直方向居中*/
line-height: 70px;
font-size: 12px;
color: gray;
}
/*所有链接*/
.bottom .bo_div1 a{
text-decoration: none;
color: black;
font-size: 15px;
padding-right: 10px;
padding-left: 10px;
}
.bottom .bo_div1 a:hover{
color: red;
text-decoration: underline;
}
/*底部的底部文字*/
.bottom .bo_div2{
background-color: white;
height: 40px;
/*内容水平居中*/
text-align: center;
/*内容垂直居中*/
line-height: 40px;
font-size: 12px;
}
</style>
<!--3.======================网页底部========================-->
<div class="bottom">
<div class="bo_div1">
<a href="">关于我们</a>|
<a href="">联系我们</a>|
<a href="">人才招聘</a>|
<a href="">商家入驻</a>|
<a href="">广告服务</a>|
<a href="">手机京东</a>|
<a href="">友情链接</a>|
<a href="">销售联盟</a>|
<a href="">京东社区</a>|
<a href="">京东公益</a>|
<a href="">English Site</a>
</div>
<div class="bo_div2">
<font>
Copyright © 2004-2019 京东JD.com 版权所有
</font>
</div>
</div>
</body>
</html>