京東購物車代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>京東-歡迎登錄</title>
<!--設(shè)置圖標(biāo)-->
<link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
<!--通用樣式-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--1.====================網(wǎng)頁頂部樣式=======================-->
<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;
/*在父標(biāo)簽上垂直方向居中*/
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;
}
/*鼠標(biāo)懸停*/
.top .logo .a2:hover{
color: rgb(216,36,50);
text-decoration: underline;
}
/*========message=========*/
.top .message{
background-color: rgb(255,246,236);
height: 40px;
/*子標(biāo)簽水平方向居中*/
text-align: center;
/*子標(biāo)簽垂直方向居中*/
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.====================網(wǎng)頁頂部=======================-->
<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="">
登錄頁面喇嘱，調(diào)查問卷
</a>
</div>
<!--頂部的底部-->
<div class="message">
<p>
依據(jù)《網(wǎng)絡(luò)安全法》，為保障您的賬戶安全和正常使用块攒，請(qǐng)盡快完成手機(jī)號(hào)驗(yàn)證终佛！
新版<a href="">《京東隱私政策》</a>已上線锤灿，將更有利于保護(hù)您的個(gè)人隱私。
</p>
</div>
</div>
<!--2.======================網(wǎng)頁內(nèi)容樣式=============================-->
<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);
}
/*鼠標(biāo)懸停狀態(tài)*/
.content .login_div .div2 .btn button:hover{
color: rgb(217,48,60);
}
/*成為焦點(diǎn)的狀態(tài)*/
.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;
}
/*圖標(biāo)*/
.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;
/*設(shè)置背景顏色*/
background-color: red;
/*設(shè)置內(nèi)容顏色*/
color: white;
}
/*取消焦點(diǎn)狀態(tài)*/
.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.======================網(wǎng)頁內(nèi)容=====================-->
<div class="content">
<img class="bg_img" src="img/bg2.png"/>
<!--登錄框-->
<div class="login_div" id="">
<!--頂部-->
<div class="div1">
<font>
京東不會(huì)以任何理由要求您轉(zhuǎn)賬匯款，謹(jǐn)防詐騙肥卡。
</font>
</div>
<!--中間-->
<div class="div2">
<div class="btn">
<button class="btn1">
掃碼登錄
</button>|
<button class="btn2">
賬號(hào)登錄
</button>
</div>
<!--輸入框-->
<div class="input">
<form action="#">
<div class="un_div">
<label for="username"><img src="img/pygame.png"/></label>
<input placeholder="郵箱/用戶名/已驗(yàn)證手機(jī)" 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="">立即注冊(cè)</a></li>
</ul>
</div>
</div>
</div>
<!--3.=====================網(wǎng)頁底部樣式=====================-->
<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;
/*內(nèi)容水平居中*/
text-align: center;
/*內(nèi)容垂直居中*/
line-height: 40px;
font-size: 12px;
}
</style>
<!--3.======================網(wǎng)頁底部========================-->
<div class="bottom">
<div class="bo_div1">
<a href="">關(guān)于我們</a>|
<a href="">聯(lián)系我們</a>|
<a href="">人才招聘</a>|
<a href="">商家入駐</a>|
<a href="">廣告服務(wù)</a>|
<a href="">手機(jī)京東</a>|
<a href="">友情鏈接</a>|
<a href="">銷售聯(lián)盟</a>|
<a href="">京東社區(qū)</a>|
<a href="">京東公益</a>|
<a href="">English Site</a>
</div>
<div class="bo_div2">
<font>
Copyright ? 2004-2019 京東JD.com 版權(quán)所有
</font>
</div>
</div>
</body>
</html>
