三个电商网页---京东，淘宝
【代码】第三次作业---三个电商网页。
·
1.京东购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东购物车</title>
<style>
*{
margin: 0px;
}
.box1{
width: 1538px;
height: 30px;
border: 2px solid lightsalmon;
color: #434343;
background-color: #E3E4E5;
margin-top: 0px;
border-radius: 10px;
}
.box1-div1{
width: 73px;
height:30px ;
border: 2px solid lightsalmon;
padding: 0px;
float: left;
margin-left: 250px;
}
.box1-div11,.box1-div12{
width: 15px;
height: 30px;
border: 2px solid red;
margin-right: 2px;
float: left;
}
.首页{
padding-left: 3px;
padding-top: 2px;
}
.box1-div12{
margin-left: 10px;
}
.box1-div111{
width: 73px;
height:30px ;
border: 2px solid lightsalmon;
padding: 0px;
float: left;
}
.box1-ul{
width: 650px;
height: 30px;
border: 2px solid lightsalmon;
float: left;
margin-left: 170px;
list-style-type: none;
color: #999999;
font-size: 12px;
}
li{
float: left;
margin-top: 5px;
}
li ~ div{
width: 1.8px;
height: 16px;
background-color: lightgray;
float: left;
margin-top: 7px;
margin-left: 10px;
margin-right: 10px;
}
.box2{
width: 1538px;
height: 82px;
color: #333333;
background-color: #FFFFFF;
font-size: 12px;
border: 2px solid lightsalmon;
}
.box2-div1{
width: 96px;
height: 58px;
color: #333333;
font-size: 20px;
border: 2px solid lightsalmon;
float: left;
}
box2-div21{
width: 100px;
height: 30px;
color: #333333;
font: 16px;
border: 2px solid lightskyblue;
float: left;
}
.box2-div3{
width: 450px;
height: 46px;
color: #333333;
font: 12px;
border: 2px solid lightsalmon;
float: left;
margin-left: 550px;
margin-top: 20px;
}
.box3{
width: 1538px;
height: 1360px;
border: 2px solid lightsalmon;
float: left;
}
.box大{
width:1538px ;
height: 550px;
border: 2px solid lightsalmon;
margin-top: 1100px;
margin-left: -880x;
}
.box3-div1{
width: 990px;
height: 40px;
color: #434343;
font-size: 12px;
margin-left: 260px;
border: 2px solid lightsalmon;
}
.box3-div11{
width:210px;
height: 26px;
border: 2px solid lightsalmon;
margin-left: 800px;
margin-top: 10px;
}
.box3-div2{
width: 1000px;
height: 43px;
background-color: #F3F3F3;
margin-top:5px;
margin-left: 270px;
border: 2px solid lightsalmon;
float: left;
}
.box3-div21,.box3-div71{
width: 300px;
height: 25px;
color: #434343;
font-size: 12px;
border: 2px solid lightsalmon;
margin-top: 8px;
margin-left: 15px;
float: left;
}
.box3-div3,.box3-div4,.box3-div5,.box3-div6{
width: 1000px;
height: 150px;
border: 1px solid lightgrey;
margin-left: 260px;
margin-top:60px;
}
.box3-div31,.box3-div41,.box3-div51,.box3-div61{
width: 1000px;
height: 30px;
border: 2px solid lightsalmon;
}
.box3-div32,.box3-div42,.box3-div52,.box3-div62{
width: 30px;
height: 20px;
margin: 0px 0px 0px 30px;
border: 2px solid lightsalmon;
float: left;
margin-top: 15px;
}
.box3-div33,.box3-div43,.box3-div53,.box3-div63{
width: 320px;
height: 107px;
border: 2px solid lightsalmon;
float: left;
}
.box3-div34,.box3-div44,.box3-div54,.box3-div64{
width: 150px;
height: 55px;
border: 2px solid lightsalmon;
float: left;
margin-top: 10px;
}
.box3-div35,.box3-div45,.box3-div55,.box3-div65{
width: 60px;
height: 50px;
border: 2px solid lightsalmon;
float: left;
margin-left: 50px;
margin-top: 10px;
}
.box3-div36,.box3-div46,.box3-div56,.box3-div66{
width: 86px;
height: 36px;
border: 2px solid lightsalmon;
float: left;
margin-left: 30px;
margin-top: 5px;
}
.box3-div37,.box3-div47,.box3-div57,.box3-div67{
width: 60px;
height: 50px;
border: 2px solid lightsalmon;
float: left;
margin-left: 35px;
margin-top: 10px;
}
.box3-div38,.box3-div48,.box3-div58,.box3-div68{
width: 70px;
height: 50px;
border: 2px solid lightsalmon;
float: left;
margin-top: 10px;
margin-left: 40px;
}
.box3-div4{
margin-top: 30px;
float: left;
}
.box3-div5{
margin-top: 30px;
float: left;
}
.box3-div6{
margin-top: 30px;
float: left;
}
.box3-div7{
width: 1000px;
height: 50px;
border: 1px solid lightgray;
margin-left: 260px;
margin-top:30px;
float: left;
}
.box3-div72{
width: 220px;
height: 40px;
border: 2px solid lightsalmon;
float: left;
margin-left: 350px;
}
.box3-div73{
float: left;
}
.box3-div74{
width: 1000px;
height: 300px;
border: 1px solid lightgray;
float: left;
border-style: dashed;
*{
margin-left: 0px;
}
}
.box333{
width: 1000px;
height: 50px;
border: 2px solid lightsalmon;
float: left;
margin-top: 30px;
}
.box0,.box11,.box21,.box31{
width: 200px;
height: 50px;
border: 1px solid lightsalmon;
margin-top: 10px;
}
.box00,.box001,.box002,.box003{
width: 170px;
height: 170px;
border: 1px solid lightsalmon;
margin-right: 20px;
}
.box01,.box12,.box22,.box32{
width: 90px;
height: 15px;
border: 1px solid lightsalmon;
margin-left: 30px;
}
.li0,.li1,.li2,li3{
width: 240px;
height:300px ;
}
.box4{
width: 1538px;
height: 102px;
background-color: #CCCCCC;
font: 12px;
border: 2px solid #E3E4E5;
float: left;
}
.box5{
width: 1538px;
height: 200px;
color: #666666;
font-size: 12px;
background-color: #CCCCCC;
float: left;
}
.box6{
width: 1538px;
height: 228px;
font-size: 12px;
color: #666666;
background-color: #CCCCCC;
border: 2px solid #EAEAEA;
float: left;
}
p ~ span{
float: left;
}
p ~ div{
float: left;
}
.box6-div1{
width: 1538px;
height: 108px;
background-color: #CCCCCC;
border: 2px solid lightpink;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box1-div1">
<div class="box1-div11">
<img src="./京东小房子logo.png" alt="" style="width: 18px;height: 18px;margin-top: 3px;">
</div>
<span class="首页" style="color: #999999;font-size: 12px;">京东首页</span>
</div>
<div class="box1-div111">
<div class="box1-div12">
<img src="./京东定位小logo.png" alt="" style="width: 15px;height: 20px;margin-top: 3px;">
</div>
<span class="定位" style="color: #999999;font-size: 12px;">湖南</span>
</div>
<ul class="box1-ul">
<li>
<span>WTTLA </span>
</li>
<li>
<img src="./京东PLUSlogo.png" alt="" style="width: 40px;height: 18px;">
</li>
<div class="box1-div12-1"></div>
<li>我的订单</li>
<div class="box1-div12-2"></div>
<li>我的京东</li>
<div class="box1-div12-3"></div>
<li>企业采购</li>
<div class="box1-div12-4"></div>
<li>客户服务</li>
<div class="box1-div12-5"></div>
<li>网站导航</li>
<div class="box1-div12-6"></div>
<li>手机京东</li>
<div class="box1-div12-7"></div>
<li>网站无障碍</li>
</ul>
</div>
</div>
<div class="box2">
<div style="float: left;">
<span>
<img src="../三个网页/京东logo.png" alt="" style="margin-left: 43px;width: 140px;height: 50px;margin-left: 260px;margin-top: 20px;">
</span>
</div>
<div class="box2-div3">
<div style="border: 2px soild lightsalmon;float: left;">
<input type="search" name="search" id="search" style="width: 270px; height: 24px;background-color: #FFFFFF;padding: 4px;margin-top: 17px;border-color: red;float: left;">
</div>
<div class="box2-div221">
<button style="float: left;width: 48px;height:24px ;margin-top: 17px;color: white;background-color: #C91623;">搜索</button>
</div>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="box3-div1">
<ul style="list-style: none;float: left;color: #E2231A;font-size: 16px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;margin-top: 15px;">
<li style="float: left;"><b>全部商品</b></li>
<span style="float: left;margin-top: 7px;margin-left: 5px;">4</span>
</ul>
<div class="box3-div11">
<span>配送至:</span>
<select name="address" style="border: 1px solid lightgray;font-size: 12px;width: 160px;height: 25px;">
<option value="">请选择你的省份</option>
<option value="shanxi">陕西省</option>
<option value="hunan">湖南省</option>
<option value="hubei">湖北省</option>
<option value="hubei">广州省</option>
<option value="hubei">海南省</option>
<option value="hubei">福建省</option>
</select>
</div>
</div>
<div class="box3-div2">
<div class="box3-div21">
<input type="checkbox" name="checkbox" id="checkbox1" style="width: 26px;height: 13px;border: 1px solid grey;margin-top: 5px;float: left;">
<span style="float: left;margin-top: 2px;margin-left: 4px;">全部</span>
<span style="float: left;margin-left: 70px;margin-top: 2px;">商品</span>
</div>
<span style="float: left;margin-left: 320px;margin-top: 12px;font-size: 12px;">单价</span>
<span style="float: left;margin-left: 70px;margin-top: 12px;font-size: 12px;">数量</span>
<span style="float: left;margin-left: 100px;margin-top: 12px;font-size: 12px;">小计</span>
<span style="float: left;margin-left: 60px;margin-top: 12px;font-size: 12px;">操作</span>
</div>
<div class="box3-div3">
<div class="box3-div31">
<input type="checkbox" id="checkbox2" style="width: 13px;height: 13px;border: 1px solid grey;margin-left: 30px;margin-top: 8px;float: left;">
<span style="float: left;margin-top: 5px;margin-left: 20px;font-size: 12px;">回力茂禄专卖店</span>
<hr style="color: #adadad; width:1000px;margin-top: 30px;border: none;border-top: 3px solid #adadad;">
</div>
<div class="box3-div32">
<input type="checkbox" id="checkbox3" style="width: 13px;height: 13px;border: 1px solid grey;float: left;">
</div>
<div class="box3-div33">
<img src="./京东购物车-商品1.png" alt="" width="80px" height="80px" style="margin-top: 15px;float: left;">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 10px;">回力男鞋小白鞋男春夏新款空军一号鞋 <br>
子男学生百搭情侣休闲运动板鞋男 无暇</span>
</div>
<div class="box3-div34">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 20px;">无暇白色</span>
<br>
<span style="color: #333333;font-size: 12px;margin-left: 10px;">38</span>
</div>
<div class="box3-div35">
<span style="color: #333333;font-size: 12px;margin-left: 10px;">￥78.00</span>
</div>
<div class="box3-div36">
<button style="width: 17px;height: 20px;background-color: #F1F1F1;border: 1px solid lightgray;float: left;margin-top: 10px;">-</button>
<input type="text" style="background-color: #FFFFFF;width: 46px;height: 17px;margin-top: 10px;border: 1px solid lightgray;text-align: center;float: left;" placeholder="1">
<button style="width: 17px;height: 21px;background-color: #F1F1F1;border: 1px solid lightgray;float: left;margin-top: 10px;">+</button>
</div>
<div class="box3-div37">
<span style="color: #333333;font-size: 12px;margin-left: 10px;"><b>￥78.00</b></span>
</div>
<div class="box3-div38">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 20px;">删除</span>
<br>
<span style="color: #333333;font-size: 12px;margin-left: 10px;">移入关注</span>
</div>
</div>
<div class="box3-div4">
<div class="box3-div41">
<input type="checkbox" id="checkbox2" style="width: 13px;height: 13px;border: 1px solid grey;margin-left: 30px;margin-top: 8px;float: left;">
<span style="float: left;margin-top: 5px;margin-left: 20px;font-size: 12px;">宸劲佰（CHENJINGBAI）服饰内衣旗舰店</span>
<hr style="color: #adadad; width:1000px;margin-top: 30px;border: none;border-top: 3px solid #adadad;">
</div>
<div class="box3-div42">
<input type="checkbox" id="checkbox3" style="width: 13px;height: 13px;border: 1px solid grey;float: left;">
</div>
<div class="box3-div43">
<img src="./京东购物车-商品2.png" alt="" width="80px" height="80px" style="margin-top: 15px;float: left;">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 10px;">宸劲佰纯棉美式重磅360克幻影蝴蝶 <br>
hiphop欧美短袖嘻哈ins高街t恤男士</span>
</div>
<div class="box3-div44">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 20px;">黑色360克</span>
<br>
<span style="color: #333333;font-size: 12px;margin-left: 10px;">L</span>
</div>
<div class="box3-div45">
<span style="color: #333333;font-size: 12px;margin-left: 10px;">￥89.00</span>
</div>
<div class="box3-div46">
<button style="width: 17px;height: 20px;background-color: #F1F1F1;border: 1px solid lightgray;float: left;margin-top: 10px;">-</button>
<input type="text" style="background-color: #FFFFFF;width: 46px;height: 17px;margin-top: 10px;border: 1px solid lightgray;text-align: center;float: left;" placeholder="1">
<button style="width: 17px;height: 21px;background-color: #F1F1F1;border: 1px solid lightgray;float: left;margin-top: 10px;">+</button>
</div>
<div class="box3-div47">
<span style="color: #333333;font-size: 12px;margin-left: 10px;"><b>￥89.00</b></span>
</div>
<div class="box3-div48">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 20px;">删除</span>
<br>
<span style="color: #333333;font-size: 12px;margin-left: 10px;">移入关注</span>
</div>
</div>
<div class="box3-div5">
<div class="box3-div51">
<input type="checkbox" id="checkbox2" style="width: 13px;height: 13px;border: 1px solid grey;margin-left: 30px;margin-top: 8px;float: left;">
<span style="float: left;margin-top: 5px;margin-left: 20px;font-size: 12px;">亿梵莎旗舰店</span>
<hr style="color: #adadad; width:1000px;margin-top: 30px;border: none;border-top: 3px solid #adadad;">
</div>
<div class="box3-div52">
<input type="checkbox" id="checkbox3" style="width: 13px;height: 13px;border: 1px solid grey;float: left;">
</div>
<div class="box3-div53">
<img src="./京东购物车-商品3.png" alt="" width="80px" height="80px" style="margin-top: 15px;float: left;">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 10px;">亿梵莎（YIFANSHA）法式茶歇 <br>
连衣裙夏季2024新款温柔风气质设计感方领</span>
</div>
<div class="box3-div54">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 20px;">图片色</span>
<br>
<span style="color: #333333;font-size: 12px;margin-left: 10px;">均码</span>
</div>
<div class="box3-div55">
<span style="color: #333333;font-size: 12px;margin-left: 10px;">￥78.00</span>
</div>
<div class="box3-div56">
<button style="width: 17px;height: 20px;background-color: #F1F1F1;border: 1px solid lightgray;float: left;margin-top: 10px;">-</button>
<input type="text" style="background-color: #FFFFFF;width: 46px;height: 17px;margin-top: 10px;border: 1px solid lightgray;text-align: center;float: left;" placeholder="1">
<button style="width: 17px;height: 21px;background-color: #F1F1F1;border: 1px solid lightgray;float: left;margin-top: 10px;">+</button>
</div>
<div class="box3-div57">
<span style="color: #333333;font-size: 12px;margin-left: 10px;"><b>￥78.00</b></span>
</div>
<div class="box3-div58">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 20px;">删除</span>
<br>
<span style="color: #333333;font-size: 12px;margin-left: 10px;">移入关注</span>
</div>
</div>
<div class="box3-div6">
<div class="box3-div61">
<input type="checkbox" id="checkbox2" style="width: 13px;height: 13px;border: 1px solid grey;margin-left: 30px;margin-top: 8px;float: left;">
<span style="float: left;margin-top: 5px;margin-left: 20px;font-size: 12px;">IXLINYOU女装旗舰店</span>
<hr style="color: #adadad; width:1000px;margin-top: 30px;border: none;border-top: 3px solid #adadad;">
</div>
<div class="box3-div62">
<input type="checkbox" id="checkbox3" style="width: 13px;height: 13px;border: 1px solid grey;float: left;">
</div>
<div class="box3-div63">
<img src="./京东购物车-商品4.png" alt="" width="80px" height="80px" style="margin-top: 15px;float: left;">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 10px;">IXLINYOU美式学院风裙子夏季女高校<br>
供辣妹假两件马甲上衣格子百褶短裙两件 </span>
</div>
<div class="box3-div64">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 20px;">红色格子裙+腰带</span>
<br>
<span style="color: #333333;font-size: 12px;margin-left: 10px;">M</span>
</div>
<div class="box3-div65">
<span style="color: #333333;font-size: 12px;margin-left: 10px;">￥69.00</span>
</div>
<div class="box3-div66">
<button style="width: 17px;height: 20px;background-color: #F1F1F1;border: 1px solid lightgray;float: left;margin-top: 10px;">-</button>
<input type="text" style="background-color: #FFFFFF;width: 46px;height: 17px;margin-top: 10px;border: 1px solid lightgray;text-align: center;float: left;" placeholder="1">
<button style="width: 17px;height: 21px;background-color: #F1F1F1;border: 1px solid lightgray;float: left;margin-top: 10px;">+</button>
</div>
<div class="box3-div67">
<span style="color: #333333;font-size: 12px;margin-left: 10px;"><b>￥69.00</b></span>
</div>
<div class="box3-div68">
<span style="color: #333333;font-size: 12px;margin-left: 10px;margin-top: 20px;">删除</span>
<br>
<span style="color: #333333;font-size: 12px;margin-left: 10px;">移入关注</span>
</div>
</div>
<div class="box3-div7">
<div class="box3-div71">
<input type="checkbox" name="checkbox" id="checkbox1" style="width: 26px;height: 13px;border: 1px solid grey;margin-top: 5px;float: left;">
<span style="float: left;margin-top: 2px;margin-left: 4px;">全选</span>
<span style="float: left;margin-top: 2px;margin-left: 9px;">删除选中的商品</span>
<span style="float: left;margin-top: 2px;margin-left: 9px;">移入关注</span>
<span style="float: left;margin-top: 2px;margin-left: 9px;"><b>清理购物车</b></span>
</div>
<div class="box3-div72">
<span style="color: #999999;font-size: 12px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;float: left;margin-top: 4px;">已选择<span style="color: #E2231A;font-size: 16px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">0</span>件商品</span>
<span style="color: #999999;font-size: 12px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;float: left;margin-left: 15px;">总价：<span style="font-size: 20px;color: #E2231A;">￥0.00</span></span>
</div>
<div class="box3-div73">
<button style="float: left;width: 100px;height:50px ;color: white;background-color: #e54346;;margin-left: 5px;font-size: 17px;"><b>去结算</b></button>
</div>
<div class="box333">
<span style="font-size: 12px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;float: left;margin-top: 20px;">猜你喜欢 </span>
<span style="font-size: 12px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;float: left;margin-top: 20px;">随手购</span>
</div>
<div class="box3-div74">
<ul style="list-style: none;">
<li class="li0">
<div class="box00"><img src="./京东购物车-last1.png" alt="" style="width: 160px;height: 160px;margin-top: 10px;"></div>
<div class="box0">
<span style="font-size: 12px;">HBN发光水熊果苷精萃水提亮肤色补水保湿爽肤水湿敷水【618】 </span>
</div>
<div class="box01">
<span style="font-size: 16px;color: #E2231A;margin-top: 10px;margin-left: 20px;">￥278.00</span>
</div>
<button style="width: 120px;height: 30px;color: #999999;border: 1px solid #999999;background-color: #FFFFFF;margin-top: 10px;margin-left: 20px;font-size: 12px;">加入购物车</button>
</li>
<li class="li1">
<div class="box001"><img src="./京东购物车-last2.png" alt="" style="width: 160px;height: 160px;margin-top: 10px;"></div>
<div class="box11">
<span style="font-size: 12px;">李施德林 Listerine 漱口水冰蓝劲爽清新口气深层清洁 </span>
</div>
<div class="box12">
<span style="font-size: 16px;color: #E2231A;margin-top: 10px;margin-left: 20px;">￥99.90</span>
</div>
<button style="width: 120px;height: 30px;color: #999999;border: 1px solid #999999;background-color: #FFFFFF;margin-top: 10px;margin-left: 20px;font-size: 12px;">加入购物车</button>
</li>
<li class="li2">
<div class="box002"><img src="./京东购物车-last3.png" alt="" style="width: 160px;height: 160px;margin-top: 10px;"></div>
<div class="box21">
<span style="font-size: 12px;">HBN发光水熊果苷精萃水提亮肤色补水保湿爽肤水湿敷水【618】 </span>
</div>
<div class="box22">
<span style="font-size: 16px;color: #E2231A;margin-top: 10px;margin-left: 20px;">￥308.00</span>
</div>
<button style="width: 120px;height: 30px;color: #999999;border: 1px solid #999999;background-color: #FFFFFF;margin-top: 10px;margin-left: 20px;font-size: 12px;">加入购物车</button>
</li>
<li class="li3">
<div class="box003"><img src="./京东购物车-last4.png" alt="" style="width: 160px;height: 160px;margin-top: 10px;"></div>
<div class="box31">
<span style="font-size: 12px;">HBN发光水熊果苷精萃水提亮肤色补水保湿爽肤水湿敷水【618】 </span>
</div>
<div class="box32">
<span style="font-size: 16px;color: #E2231A;margin-top: 10px;margin-left: 20px;">￥600.00</span>
</div>
<button style="width: 120px;height: 30px;color: #999999;border: 1px solid #999999;background-color: #FFFFFF;margin-top: 10px;margin-left: 20px;font-size: 12px;">加入购物车</button>
</li>
</ul>
</div>
</div>
<div class="box大">
<div class="box4">
<ol>
<li style="list-style: none;">
<div style="float: left;padding-left: 190px;padding-top: 20px;">
<img src="./京东个人6-多logo.png" alt="" style="width: 45px;height: 50px;float: left;">
</div>
<div style="float: left;">
<span style="float: left;padding-top: 35px;padding-left: 5px;color: #444444;font: 22px;"><b style="font-size: 18px;">品类齐全，轻松购物</b></span>
</div>
</li>
<li style="list-style: none;">
<div style="float: left;padding-left: 50px;padding-top: 20px;">
<img src="./京东个人6-快logo.png" alt="" style="width: 45px;height: 50px;float: left;">
</div>
<div style="float: left;">
<span style="float: left;padding-top: 35px;padding-left: 5px;color: #444444;font: 25px;"><b style="font-size: 18px;">多仓直发，极速配送</b></span>
</div>
</li>
<li style="list-style: none;">
<div style="float: left;padding-left: 80px;padding-top: 20px;">
<img src="./京东个人6-好logo.png" alt="" style="width: 45px;height: 50px;float: left;">
</div>
<div style="float: left;">
<span style="float: left;color: #444444;font: 22px;padding-top: 35px;padding-left: 5px;"><b style="font-size: 18px;">正品行货，精致服务</b></span>
</div>
</li>
<li style="list-style: none;">
<div style="float: left;padding-left: 50px;padding-top: 20px;">
<img src="./京东个人6-省logo.png" alt="" style="width: 40px;height: 50px;float: left;">
</div>
<div style="float: left;">
<span style="float: left;padding-top: 35px;padding-left: 5px;color: #444444;font: 22px;"><b style="font-size: 18px;">天天低价，畅选无忧</b></span>
</div>
</li>
</ol>
</div>
<div class="box5">
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>购物指南</b></dt>
<dd style="padding-top: 5px;">购物流程</dd>
<dd style="padding-top: 5px;">会员介绍</dd>
<dd style="padding-top: 5px;">生活旅行/团购</dd>
<dd style="padding-top: 5px;">常见问题</dd>
<dd style="padding-top: 5px;">大家电</dd>
<dd style="padding-top: 5px;">联系客服</dd>
</dl>
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>配送方式</b></dt>
<dd style="padding-top: 5px;">上门自提</dd>
<dd style="padding-top: 5px;">211限时达</dd>
<dd style="padding-top: 5px;">配送服务查询</dd>
<dd style="padding-top: 5px;">配送费收取标准</dd>
<dd style="padding-top: 5px;">海外配送</dd>
</dl>
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>支付方式</b></dt>
<dd style="padding-top: 5px;">货到付款</dd>
<dd style="padding-top: 5px;">在线支付</dd>
<dd style="padding-top: 5px;">分期付款</dd>
<dd style="padding-top: 5px;">公司转账</dd>
</dl>
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>售后服务</b></dt>
<dd style="padding-top: 5px;">售后政策</dd>
<dd style="padding-top: 5px;">价格保护</dd>
<dd style="padding-top: 5px;">退款说明</dd>
<dd style="padding-top: 5px;">返修/退换货</dd>
<dd style="padding-top: 5px;">取消订单</dd>
</dl>
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>特色服务</b></dt>
<dd style="padding-top: 5px;">夺宝岛</dd>
<dd style="padding-top: 5px;">DIY装机</dd>
<dd style="padding-top: 5px;">延保服务</dd>
<dd style="padding-top: 5px;">京东E卡</dd>
<dd style="padding-top: 5px;">京东通信</dd>
<dd style="padding-top: 5px;">京东座智能</dd>
</dl>
</div>
<div class="box6">
<br>
<p style="color: #666666; float: left;">
<span style="font-size: 12px;padding-left: 200px;float: left;">关于我们</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">联系我们</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">联系客服</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">合作招商</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">商家帮助</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">营销中心</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">手机京东</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">友情链接</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">营销联盟</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">京东社区</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">风险监测</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">质量公告</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">隐私政策</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">京东公益</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;" ></div>
<span style="font-size: 12px;padding-left: 20px;float: left;">Media&IR</span>
</p>
<div class="box6-div1">
<p>
<span style="font-size: 12px;padding-left: 220px;margin-top: 20px;float: left;">京公网安备11000002000088号</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">京ICP备11041704号 </span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">ICP</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">ICP药品医疗器械网络服务备案</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">自营医疗器械经营资质</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;" ></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">药品网络交易第三方平台备案凭证</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">新出发京零 字第大120007号</span>
</p>
<p>
<span style="font-size: 12px;padding-left: 450px;margin-top: 10px;float: left;">互联网出版许可证编号新出网证(京)字150号</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">出版物经营许可证4006561155</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">违法和不良信息举报电话：4006561155</span>
</p>
<p>
<span style="font-size: 12px;padding-left: 150px;margin-top: 10px;float: left;">Copyright © 2004 - 2024 京东JINGDONG 版权所有</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">消费者维权热线：4006067733 经营证照</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">营业执照</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">增值电信业务经营许可证</span>
</p>
<p>
<span style="font-size: 12px;padding-left: 700px;margin-top: 10px;float: left;">京东旗下网站： 京东钱包</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">京东云</span>
</p>
</div>
<p>
<img src="./京东个人最后6个小网站.png" alt="" style="width: 600px;height: 40px;margin-left: 430px;margin-top: 20px;float: left;">
</p>
</div>
</div>
</body>
</html>运行结果如下：
2.京东个人中心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东个人中心</title>
<style>
*{
margin: 0px;
}
.box1{
width: 1538px;
height: 30px;
border: 2px solid lightsalmon;
color: #434343;
background-color: #E3E4E5;
margin-top: 0px;
border-radius: 10px;
}
.box1-div1{
width: 73px;
height:30px ;
border: 2px solid lightsalmon;
padding: 0px;
float: left;
margin-left: 150px;
}
.box1-div11,.box1-div12{
width: 15px;
height: 30px;
border: 2px solid red;
margin-right: 2px;
float: left;
}
.首页{
padding-left: 3px;
padding-top: 2px;
}
.box1-div12{
margin-left: 10px;
}
.box1-div111{
width: 73px;
height:30px ;
border: 2px solid lightsalmon;
padding: 0px;
float: left;
}
.box1-ul{
width: 650px;
height: 30px;
border: 2px solid lightsalmon;
float: left;
margin-left: 350px;
list-style-type: none;
color: #999999;
font-size: 12px;
}
li{
float: left;
margin-top: 5px;
}
li ~ div{
width: 1.8px;
height: 16px;
background-color: lightgray;
float: left;
margin-top: 7px;
margin-left: 10px;
margin-right: 10px;
}
.box2{
width: 1538px;
height: 82px;
color: #333333;
background-color: #FFFFFF;
font-size: 12px;
border: 2px solid lightsalmon;
}
.box2-div1{
width: 96px;
height: 58px;
color: #333333;
font-size: 20px;
border: 2px solid lightsalmon;
float: left;
}
.box2-div2{
width: 325px;
height: 65px;
color: #333333;
font-size: 12px;
border: 2px solid lightsalmon;
float: left;
margin-left: 70px;
}
box2-div21{
width: 100px;
height: 30px;
color: #333333;
font: 16px;
border: 2px solid lightskyblue;
float: left;
}
.box2-div3{
width: 450px;
height: 46px;
color: #333333;
font: 12px;
border: 2px solid lightsalmon;
float: left;
margin-left: 120px;
margin-top: 20px;
}
box2-div221{
width: 80px;
height: 46px;
color: red;
font-size: 20px;
float: left;
}
box2-div222{
width: 140px;
height:35px;
color: #333333;
background-color: #F9F9F9;
border: 2px solid purple;
float: right;
font-size: 12px;
}
.box3{
width: 1538px;
height: 1230px;
color: #666666;
font-size: 12px;
background-color: #F0F3EF;
padding: 0px 0px 50px;
}
.box3-div1{
width: 170px;
height: 1180px;
color: #666666;
font-size: 12px;
border: 2px solid lightsalmon;
margin-left: 170px;
background-color: #F9F9F9;
float: left;
}
.box3-div3{
width: 730px;
height: 237px;
border: 2px solid lightsalmon;
float: left;
margin-left: 30px;
margin: 30px 0px;
background-color: #F9F9F9;
}
.box3-div21{
width: 250px;
height: 187px;
border: 2px solid lightsalmon;
float: left;
background-color: #E2231A;
}
.box3-div22{
width: 250px;
height: 66px;
background-color: #232331;
float: left;
}
.box3-div2{
width: 250px;
height:253px ;
border: 2px solid lightsalmon;
margin-top: 20px;
margin-left: 20px;
float: left;
}
.box3-div211{
width:250px;
height: 100px;
border: 2px solid lightsalmon;
float: left;
}
.box3-div212{
width: 63px;
height: 20px;
color: #FFFFFF;
font-size: 18px;
border: 2px solid lightsalmon;
float: left;
margin-left: 85px;
margin-top: 10px;
}
.box3-div213{
width: 250px;
height: 30px;
border: 2px solid lightsalmon;
margin-top: 145px;
}
.span1{
display: block;
}
.box3-div221{
width: 140px;
height: 50px;
border: 2px solid lightsalmon;
}
.box3-div31{
width: 750px;
height: 55px;
color: #666666;
font-size: 12px;
border: 2px solid #F0F3EF;
box-shadow: #999999;
}
.box3-div32{
width: 750px;
height: 169px;
border: 2px solid lightsalmon;
}
.box3-div321{
width: 36px;
height: 34px;
border: 2px solid lightsalmon;
margin-top: 20px;
margin-left: 20px;
float: left;
}
li{
list-style: none;
}
.box3-div3211{
font-size: 12px;
color: #333333;
margin-left: 20px;
}
.box3-div322{
width: 36px;
height: 34px;
border: 2px solid lightsalmon;
margin-top: 20px;
margin-left: 100px;
float: left;
}
.box3-div3221{
font-size: 12px;
color: #333333;
margin-left: 100px;
}
.box3-div3222{
font-size: 12px;
color: rgb(86, 86, 251);
margin-left: 100px;
margin-top: 30px;
}
.box3-div323{
width: 36px;
height: 34px;
border: 2px solid lightsalmon;
margin-top: 20px;
margin-left: 100px;
float: left;
}
.box3-div3231{
font-size: 12px;
color: #333333;
margin-left: 100px;
}
.box3-div324{
width: 36px;
height: 34px;
border: 2px solid lightsalmon;
margin-top: 10px;
margin-left: 100px;
float: left;
}
.box3-div3241{
width: 75px;
height: 30px;
font-size: 12px;
color: #333333;
margin-left: 100px;
border: 2px solid lightsalmon;
margin-top: 60px;
}
.box3-div3242{
font-size: 12px;
color: rgb(86, 86, 251);
margin-left: 100px;
margin-top: 10px;
}
.box3-div325{
width: 36px;
height: 34px;
border: 2px solid lightsalmon;
margin-top: 20px;
margin-left: 100px;
float: left;
}
.box3-div3251{
width: 75px;
height: 30px;
font-size: 12px;
color: #333333;
margin-left: 100px;
border: 2px solid lightsalmon;
margin-top: 60px;
}
.box3-div4{
width: 694px;
height: 400px;
border: 2px solid lightsalmon;
float: left;
margin-left: 20px;
background-color: #FFFFFF;
}
.box3-div41{
width: 694px;
height: 55px;
color: #666666;
font-size: 12px;
padding: 0px 0px;
border: 2px solid #F0F3EF;
}
.box3-div42{
width: 694px;
height: 120px;
border: 2px solid lightsalmon;
}
.box3-div43{
width: 694px;
height: 220px;
color: #999999;
font-size: 12px;
background-color: #FFFFFF;
border: 2px solid lightsalmon;
}
.box3-div431{
width: 100px;
height: 90px;
border: 2px solid lightsalmon;
margin-left: 135px;
margin-top: 30px;
}
.box3-div5{
width: 286px;
height: 155px;
border: 2px solid lightsalmon;
float: left;
margin-left: 20px;
background-color: #FFFFFF;
}
.box3-div51{
width: 286px;
height: 55px;
color: #666666;
font: 12px;
border: 2px solid #F0F3EF;
}
.box3-div521{
border: 2px solid lightsalmon;
margin-left: 20px;
margin-top: 20px;
float: left;
}
.box3-div522{
border: 2px solid lightsalmon;
margin-top: 50px;
margin-left: 20px;
}
.box3-div523{
border: 2px solid lightsalmon;
margin-top: 20px;
margin-left: 80px;
float: left;
}
.box3-div524{
border: 2px solid lightsalmon;
margin-top: 50px;
margin-left: 80px;
}
.box3-div6{
width: 286px;
height: 175px;
background-color: #FFFFFF;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.box3-div61{
width: 286px;
height: 55px;
color: #666666;
font: 12px;
border: 2px solid #F0F3EF;
}
.box3-div7{
width: 286px;
height: 269px;
border: 2px solid lightsalmon;
float: left;
background-color: #FFFFFF;
margin-top: 20px;
margin-left: 20px;
}
.box3-div71{
width: 286px;
height: 55px;
color: #666666;
font: 12px;
border: 2px solid #F0F3EF;
}
.box3-div72{
width: 285px;
height: 159px;
border: 2px soild lightpink;
}
.box3-div721{
width: 93px;
height: 75.8px;
border: 1px solid #F0F3EF;
float: left;
}
.box3-div722{
width: 93px;
height: 75.8px;
border: 1px solid #F0F3EF;
float: left;
}
.box3-div723{
width: 93.3px;
height: 75.8px;
border: 1px solid #F0F3EF;
float: left;
}
.box3-div724{
width: 93px;
height: 75.8px;
border: 1px solid #F0F3EF;
float: left;
}
.box3-div725{
width: 93px;
height: 75.8px;
border: 1px solid #F0F3EF;
float: left;
}
.box3-div726{
width: 93.3px;
height: 75.8px;
border: 1px solid #F0F3EF;
float: left;
}
.box4{
width: 1538px;
height: 102px;
background-color: #CCCCCC;
font: 12px;
border: 2px solid #E3E4E5;
}
.box5{
width: 1538px;
height: 200px;
color: #666666;
font-size: 12px;
background-color: #CCCCCC;
}
.box6{
width: 1538px;
height: 228px;
font-size: 12px;
color: #666666;
background-color: #CCCCCC;
border: 2px solid #EAEAEA;
float: left;
}
p ~ span{
float: left;
}
p ~ div{
float: left;
}
.box6-div1{
width: 1538px;
height: 108px;
background-color: #CCCCCC;
border: 2px solid lightpink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box1-div1">
<div class="box1-div11">
<img src="./京东小房子logo.png" alt="" style="width: 18px;height: 18px;margin-top: 3px;">
</div>
<span class="首页" style="color: #999999;font-size: 12px;">京东首页</span>
</div>
<div class="box1-div111">
<div class="box1-div12">
<img src="./京东定位小logo.png" alt="" style="width: 15px;height: 20px;margin-top: 3px;">
</div>
<span class="定位" style="color: #999999;font-size: 12px;">湖南</span>
</div>
<ul class="box1-ul">
<li>
<span>WTTLA </span>
</li>
<li>
<img src="./京东PLUSlogo.png" alt="" style="width: 40px;height: 18px;">
</li>
<div class="box1-div12-1"></div>
<li>我的订单</li>
<div class="box1-div12-2"></div>
<li>我的京东</li>
<div class="box1-div12-3"></div>
<li>企业采购</li>
<div class="box1-div12-4"></div>
<li>客户服务</li>
<div class="box1-div12-5"></div>
<li>网站导航</li>
<div class="box1-div12-6"></div>
<li>手机京东</li>
<div class="box1-div12-7"></div>
<li>网站无障碍</li>
</ul>
</div>
</div>
<div class="box2">
<div style="float: left;">
<span>
<img src="../三个网页/京东logo.png" alt="" style="margin-left: 43px;width: 170px;height: 60px;margin-left: 170px;margin-top: 10px;">
</span>
</div>
<div class="box2-div1">
<span style="float: left;padding-top: 32px;padding-left: 10px;">我的京东</span>
</div>
<div class="box2-div2">
<div class="box2-div21">
<span style="height: 19px;width: 49px;color: #DF3028;float: left;font-size: 16px;margin-top: 35px;margin-left: 30px;">
首页
</span>
<span style="height: 19px;width: 70px;float: left;font-size: 16px;margin-top: 35px;margin-left: 30px;">
账户设置
</span>
</div>
</div>
<div class="box2-div3">
<div style="border: 2px soild lightsalmon;float: left;">
<input type="search" name="search" id="search" style="width: 149px; height: 35px;background-color: #FFFFFF;padding: 4px;margin-top: 12px;border-color: red;float: left;">
</div>
<div class="box2-div221">
<button style="float: left;width: 60px;height:35px ;margin-top: 12px;color: white;background-color: red;">搜索</button>
</div>
</div>
</div>
<div class="box3">
<div class="box3-div1">
<dl style="width: 170px;height: 126px;color: #333333;font-size: 12px;padding: 15px 20px;">
<dt style="width: 130px;height: 32px;color: #333333;font-size: 16px;"><b>订单中心</b></dt>
<dd style="color: #333333;font-size: 14.2px;">我的订单</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">评价晒单</dd>
</dl>
<dl style="width: 170px;height: 126px;color: #333333;font-size: 12px;padding: 15px 20px;">
<dt style="width: 130px;height: 32px;color: #333333;font-size: 16px;"><b>我的钱包</b></dt>
<dd style="color: #333333;font-size: 14.2px;">优惠卷</dd>
<span style="width: 80px;height: 20px;color: #DF3028;font-size: 12px;background: #FFFFFF;padding: 0px 5px;border: 1px solid red; border-radius: 10px;margin-left: 30px;margin-top: 20px;">实名认证后可使用</span>
<dd style="color: #333333;font-size: 14.2px;margin-top: 0px;">京豆</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">白条</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">红包</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">礼品卡</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">更多</dd>
</dl>
<dl style="width: 170px;height: 126px;color: #333333;font-size: 12px;padding: 15px 20px;padding-top: 120px;">
<dt style="width: 130px;height: 32px;color: #333333;font-size: 16px;"><b>我的关注</b></dt>
<dd style="color: #333333;font-size: 14.2px;">关注商品</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">关注店铺</dd>
</dl>
<dl style="width: 170px;height: 126px;color: #333333;font-size: 12px;padding: 0px 20px;">
<dt style="width: 130px;height: 32px;color: #333333;font-size: 16px;"><b>我的活动</b></dt>
<dd style="color: #333333;font-size: 14.2px;">我的预约</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">我的拍卖</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">我的回收单</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">更多</dd>
</dl>
<dl style="width: 170px;height: 126px;color: #333333;font-size: 12px;padding: 60px 20px;">
<dt style="width: 130px;height: 32px;color: #333333;font-size: 16px;"><b>客户服务</b></dt>
<dd style="color: #333333;font-size: 14.2px;">返修退换货</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">我的发票</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">购买咨询</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">交易纠纷</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">更多</dd>
</dl>
<dl style="width: 170px;height: 126px;color: #333333;font-size: 12px;padding: 25px 20px;">
<dt style="width: 130px;height: 32px;color: #333333;font-size: 16px;"><b>特色业务</b></dt>
<dd style="color: #333333;font-size: 14.2px;">我的营业厅</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">京东通信</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">医疗服务</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">流量加油站</dd>
<dd style="color: #333333;font-size: 14.2px;margin-top: 15px;">更多</dd>
</dl>
</div>
<div class="box3-div2">
<div class="box3-div21">
<div class="box3-div211">
<li style="color: rgba(255, 255, 255, 0.19);font-size: 52px;padding-left: 10px;margin-top: 0px;margin-left: 10px;margin-top: 0px;list-style: none;float: left;"><b style="float: left;">JD COM<img src="./头像.jpg" alt="" style="width: 60px;height: 60px;float: left;border: 5px solid white;border-radius: 50px;margin-left: 60px;margin-top: -40px;"></b></li>
</div>
<div class="box3-div212">
<span style="float: left; color: white;font-size: 18px;"><b>WTTLA</b></span>
</div>
<div class="box3-div213">
<span style="border: 1px solid white;border-radius: 20px; color: white;background-color: #E2231A;border-left: 20px;border-right: 20px;margin-left: 20px;width: 90px;height: 23px;text-align: center;float: left;" class="span1"> 京享值 3121 </span>
<span style="border: 1px solid white;border-radius: 20px; color: white;background-color: #E2231A;border-left: 20px;border-right: 20px;margin-left: 10px;width: 120px;height: 23px;text-align: center;float: left;" class="span2">开启小白守约特权</span>
</div>
</div>
<div class="box3-div22">
<div class="box3-div221" style="margin-top: 10px;margin-left: 20px;float: left;">
<div class="box3-div2211" style="margin-left:0px ;">
<span style="width: 115px; height: 18px;color: #F4CA3A;font-size: 13px;"><em>开通PLUS会员尊享</em></span>
</div>
<div class="box3-div2212" style="margin-top: 5px;">
<span style="width: 115px; height: 18px;color: #F4CA3A;font-size: 12px;">全年360元运费券礼包</span>
</div>
</div>
<div>
<a href="" style="float: left;"><button style="width: 68px; height: 26px;color: #232331;font-size: 12px;background-color: #F4CA3A;float: left;margin-top: 20px;margin-left: 5px;border-radius: 20px;"><b>立即开通</b></button></a>
</div>
</div>
</div>
<div class="box3-div3">
<div class="box3-div31">
<p style="font-size: 16px;color: black;margin-top:15px ;margin-left: 20px;">我的钱包</p>
</div>
<div class="box3-div32">
<li>
<div class="box3-div321">
<span style="color: #666666;font-size: 22px;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">1</span>
</div>
<div class="box3-div3211">
<span>优惠券</span>
</div>
</li>
<li>
<div class="box3-div322">
<span style="color: #666666;font-size: 22px;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">0</span>
</div>
<div class="box3-div3221">
<span>京豆</span>
</div>
<div class="box3-div3222">
<span>赚京豆</span>
</div>
</li>
<li>
<div class="box3-div323">
<span style="color: #666666;font-size: 22px;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">0.00</span>
</div>
<div class="box3-div3231">
<span>余额</span>
</div>
</li>
<li>
<div class="box3-div324">
<span style="color: #666666;font-size: 22px;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;"><b>___</b></span>
</div>
<div class="box3-div3241">
<span>暂未开通白条</span>
</div>
<div class="box3-div3242">
<span>开通</span>
</div>
</li>
<li>
<div class="box3-div325">
<span style="color: #666666;font-size: 22px;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;"><b>0.00</b></span>
</div>
<div class="box3-div3251">
<span>小金库昨日收益</span>
</div>
</li>
</div>
</div>
<div class="box3-div4">
<div class="box3-div41">
<p style="font-size: 16px;color: black;margin-top:15px ;margin-left: 20px;">我的钱包</p>
</div>
<div class="box3-div42">
<div>
<img src="./京东个人-五个小图标.png" alt="" style="width: 600px;height: 55px;margin-top: 20px;margin-left: 50px;">
</div>
<div style="float: left;">
<span style="font-size: 12px;color: black;margin-left: 83px;float: left;">待付款</span>
</div>
<div style="float: left;">
<span style="font-size: 12px;color: black;margin-left: 85px;float: left;">待收货</span>
</div>
<div style="float: left;">
<span style="font-size: 12px;color: black;margin-left: 86px;float: left;">待评价</span>
</div>
<div style="float: left;">
<span style="font-size: 12px;color: black;margin-left: 83px;float: left;">退还/售后</span>
</div>
<div style="float: left;">
<span style="font-size: 12px;color: black;margin-left: 76px;float: left;">全部订单</span>
</div>
</div>
<div class="box3-div43">
<div class="box3-div431" style="float: left;">
<img src="./京东个人小购物车logo.png" alt="" style="width: 90px;height: 80px;">
</div>
<div class="box3-div432" style="float: left;margin-top: 60px;">
<span style="font-size: 12px;color: #999999;margin-top: 60px;">您买的东西太少了，这里都空空的，快去挑选合适的商品吧！</span>
</div>
</div>
</div>
<div class="box3-div5">
<div class="box3-div51">
<p style="font-size: 16px;color: black;margin-top:15px ;margin-left: 20px;">我的关注</p>
</div>
<div class="box3-div52">
<ul>
<li>
<div class="box3-div521">
<span style="color: #666666;font-size: 14px;">0</span>
</div>
<div class="box3-div522">
<span>商品关注</span>
</div>
</li>
<li>
<div class="box3-div523">
<span style="color: #666666;font-size: 14px;">0</span>
</div>
<div class="box3-div524">
<span>店铺关注</span>
</div>
</li>
</ul>
</div>
</div>
<div class="box3-div6">
<div class="box3-div61">
<p style="font-size: 16px;color: black;margin-top:15px ;margin-left: 20px;">常购清单</p>
</div>
</div>
<div class="box3-div7">
<div class="box3-div71">
<p style="font-size: 16px;color: black;margin-top:15px ;margin-left: 20px;">生活服务</p>
</div>
<div class="box3-div72">
<div class="box3-div721">
<div class="box3-div7211">
<img src="./京东个人6-话费.png" alt="" style="width: 28px;height: 38px;margin-top: 15px;padding-left: 31px;">
</div>
<div class="box3-div7212">
<span style="font-size: 12px;color: #9B8066;margin-left: 30px;">话费</span>
</div>
</div>
<div class="box3-div722">
<div class="box3-div7221">
<img src="./京东个人6-机票.png" alt="" style="width: 32px;height: 38px;margin-top: 15px;padding-left: 31px;">
</div>
<div class="box3-div7222">
<span style="font-size: 12px;color: #9B8066;margin-left: 30px;">机票</span>
</div>
</div>
<div class="box3-div723">
<div class="box3-div7231">
<img src="./京东个人6-酒店.png" alt="" style="width: 32px;height: 38px;margin-top: 15px;padding-left: 31px;">
</div>
<div class="box3-div7232">
<span style="font-size: 12px;color: #9B8066;margin-left: 30px;">酒店</span>
</div>
</div>
<div class="box3-div724">
<div class="box3-div7241">
<img src="./京东个人6-企业购.png" alt="" style="width: 32px;height: 38px;margin-top: 15px;padding-left: 31px;">
</div>
<div class="box3-div7242">
<span style="font-size: 12px;color: #9B8066;margin-left: 30px;">企业购</span>
</div>
</div>
<div class="box3-div725">
<div class="box3-div7251">
<img src="./京东个人6-加油卡.png" alt="" style="width: 32px;height: 38px;margin-top: 15px;padding-left: 31px;">
</div>
<div class="box3-div7252">
<span style="font-size: 12px;color: #9B8066;margin-left: 30px;">加油卡</span>
</div>
</div>
<div class="box3-div726">
<div class="box3-div7261">
<img src="./京东个人6-电影票.png" alt="" style="width: 37px;height: 33px;margin-top: 15px;padding-left: 31px;">
</div>
<div class="box3-div7262">
<span style="font-size: 12px;color: #9B8066;margin-left: 30px;">电影票</span>
</div>
</div>
</div>
</div>
</div>
<div class="box4">
<ol>
<li>
<div style="float: left;padding-left: 190px;padding-top: 20px;">
<img src="./京东个人6-多logo.png" alt="" style="width: 45px;height: 50px;float: left;">
</div>
<div style="float: left;">
<span style="float: left;padding-top: 35px;padding-left: 5px;color: #444444;font: 22px;"><b style="font-size: 18px;">品类齐全，轻松购物</b></span>
</div>
</li>
<li>
<div style="float: left;padding-left: 50px;padding-top: 20px;">
<img src="./京东个人6-快logo.png" alt="" style="width: 45px;height: 50px;float: left;">
</div>
<div style="float: left;">
<span style="float: left;padding-top: 35px;padding-left: 5px;color: #444444;font: 25px;"><b style="font-size: 18px;">多仓直发，极速配送</b></span>
</div>
</li>
<li>
<div style="float: left;padding-left: 80px;padding-top: 20px;">
<img src="./京东个人6-好logo.png" alt="" style="width: 45px;height: 50px;float: left;">
</div>
<div style="float: left;">
<span style="float: left;color: #444444;font: 22px;padding-top: 35px;padding-left: 5px;"><b style="font-size: 18px;">正品行货，精致服务</b></span>
</div>
</li>
<li>
<div style="float: left;padding-left: 50px;padding-top: 20px;">
<img src="./京东个人6-省logo.png" alt="" style="width: 40px;height: 50px;float: left;">
</div>
<div style="float: left;">
<span style="float: left;padding-top: 35px;padding-left: 5px;color: #444444;font: 22px;"><b style="font-size: 18px;">天天低价，畅选无忧</b></span>
</div>
</li>
</ol>
</div>
<div class="box5">
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>购物指南</b></dt>
<dd style="padding-top: 5px;">购物流程</dd>
<dd style="padding-top: 5px;">会员介绍</dd>
<dd style="padding-top: 5px;">生活旅行/团购</dd>
<dd style="padding-top: 5px;">常见问题</dd>
<dd style="padding-top: 5px;">大家电</dd>
<dd style="padding-top: 5px;">联系客服</dd>
</dl>
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>配送方式</b></dt>
<dd style="padding-top: 5px;">上门自提</dd>
<dd style="padding-top: 5px;">211限时达</dd>
<dd style="padding-top: 5px;">配送服务查询</dd>
<dd style="padding-top: 5px;">配送费收取标准</dd>
<dd style="padding-top: 5px;">海外配送</dd>
</dl>
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>支付方式</b></dt>
<dd style="padding-top: 5px;">货到付款</dd>
<dd style="padding-top: 5px;">在线支付</dd>
<dd style="padding-top: 5px;">分期付款</dd>
<dd style="padding-top: 5px;">公司转账</dd>
</dl>
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>售后服务</b></dt>
<dd style="padding-top: 5px;">售后政策</dd>
<dd style="padding-top: 5px;">价格保护</dd>
<dd style="padding-top: 5px;">退款说明</dd>
<dd style="padding-top: 5px;">返修/退换货</dd>
<dd style="padding-top: 5px;">取消订单</dd>
</dl>
<dl style="float: left;padding-left: 200px;padding-top: 20px;">
<dt style="color: #777777;font-size: 14px;padding: 0px 0px 6px;"><b>特色服务</b></dt>
<dd style="padding-top: 5px;">夺宝岛</dd>
<dd style="padding-top: 5px;">DIY装机</dd>
<dd style="padding-top: 5px;">延保服务</dd>
<dd style="padding-top: 5px;">京东E卡</dd>
<dd style="padding-top: 5px;">京东通信</dd>
<dd style="padding-top: 5px;">京东座智能</dd>
</dl>
</div>
<div class="box6">
<br>
<p style="color: #666666; float: left;">
<span style="font-size: 12px;padding-left: 200px;">关于我们</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">联系我们</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">联系客服</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">合作招商</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">商家帮助</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">营销中心</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">手机京东</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">友情链接</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">营销联盟</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">京东社区</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">风险监测</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">质量公告</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">隐私政策</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">京东公益</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;" ></div>
<span style="font-size: 12px;padding-left: 20px;">Media&IR</span>
</p>
<div class="box6-div1">
<p>
<span style="font-size: 12px;padding-left: 220px;margin-top: 20px;float: left;">京公网安备11000002000088号</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">京ICP备11041704号 </span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">ICP</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">ICP药品医疗器械网络服务备案</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">自营医疗器械经营资质</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;" ></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">药品网络交易第三方平台备案凭证</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 20px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 20px;float: left;">新出发京零 字第大120007号</span>
</p>
<p>
<span style="font-size: 12px;padding-left: 450px;margin-top: 10px;float: left;">互联网出版许可证编号新出网证(京)字150号</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">出版物经营许可证4006561155</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">违法和不良信息举报电话：4006561155</span>
</p>
<p>
<span style="font-size: 12px;padding-left: 150px;margin-top: 10px;float: left;">Copyright © 2004 - 2024 京东JINGDONG 版权所有</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">消费者维权热线：4006067733 经营证照</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">营业执照</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">增值电信业务经营许可证</span>
</p>
<p>
<span style="font-size: 12px;padding-left: 700px;margin-top: 10px;float: left;">京东旗下网站： 京东钱包</span>
<div style="width: 1px;height: 16px;background-color: grey;margin-left: 10px;float: left;margin-top: 10px;"></div>
<span style="font-size: 12px;padding-left: 10px;margin-top: 10px;float: left;">京东云</span>
</p>
</div>
<p>
<img src="./京东个人最后6个小网站.png" alt="" style="width: 600px;height: 40px;margin-left: 430px;margin-top: 20px;">
</p>
</div>
</body>
</html>运行结果如下:
3.京东登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东登录</title>
<style>
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
color: lightgray;
font-size: 12px;
}
</style>
</head>
<body>
<div style="width: 1520px; height: 83px;border: 1px red;">
<div class="大logo" style="width: 400px; height: 70px;color: #666666; font: 12px;margin: 10px 0px;border: 1px red;margin-left: 270px;float: left;">
<div style="width: 180px; height: 70px; border: 1px red;float: left;"><img src="./京东logo.png" alt="" style="width: 180px; height: 70px;float: left;"></div>
<div style="border: 1px red; width: 210px;height: 70px;float: left;"><span style="color: rgb(67, 66, 66);padding-bottom: 20px;float: left;padding-left: 20px;padding-top: 25px;"><big><big>欢迎登录</big></big></span></div>
</div>
<div class="右上角tips" style="width: 540px;height: 35px; border: 1px red; float: right;margin-top: 42px;">
<div class="右上角tipslogo" style="width: 35px;height: 35px;border: 1px red; margin-left: 130px;float: left;"><a href="https://www.jd.com"><img src="./京东-对话框小logo.png" alt="" style="width: 25px;height: 18px;padding-left: 10px;padding-top: 5px;"></a></div>
<div class="右上角小字" style="width: 120px;height: 35px;border: 1px red;float: left;">
<span style="font-size: 11.5px;color: #999999;padding-left: 5px;padding-top: 20px;">登录页面 , 改进建议</span>
</div>
</div>
</div>
<div style="width: 1520px; height: 38px;border: 1pxred;background-color: #FFF8F0;" class="second">
<div style="width: 810px;height: 20px; border: 1px red;margin-left: 330px;margin-top: 8px;">
<span style="color:#999999;font-size: 12px;">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
</div>
<div style="width: 1520px;height: 470px; border: 1px red;margin-top: 10.2px;background-color: rgb(236, 64, 64);float: left;">
<img src="./京东登录大图.png" alt="" width="700px" height="470px" style="padding-left: 330px;float: left;">
<div style="width: 300px;height: 335px;border: 1px blue;float: left;margin-top: 80px;background-color: white; border-radius: 10px;">
<div class="xiao" style="width: 300px; height: 25px;border: 1px purple;background-color: #FFF8F0;margin-top: 5px;">
<span style="width: 228px; height: 16px;color: #FF860D;font-size: 12px;align-items: center;padding-left: 30px;margin-top: 35px;">
京东不会以任何理由要求您转账，谨防诈骗
</span>
</div>
<div style="width: 300px; height: 258px;color: #666666; font-size: 12px;background-color: #FFFFFF;border: 1px purple;">
<div style="width: 300px;height: 70px; border: 1px purple;float: right;">
<div style="float: left;border: 1px purple;"><span style="color: white; background-color: rgb(152, 150, 150);width: 110px; height: 20px;float: left;margin-left: 135px;margin-top: 5px;align-self: center;">扫码登录安全快捷</span></div>
<div style="float: left; border: 1px purple;width: 50px; height: 50px;">
<img src="./京东登录二维码.png" alt="" style="width: 48px; height: 48px;margin-bottom: 20px;">
</div>
<div style="width: 245px;height: 30px;border: 1px purple;margin-top: 30px;">
<div style="width: 100px;height: 20px;border: 1px purple;float: left;">
<span style="font-size: 17px;color: #FA2C19;align-items: center;margin-bottom: 20px;margin-left: 15px;float: left;">
<b>密码登录</b>
</span>
</div>
<div style="width:100px;height: 20px;border: 1px purple;float: left;">
<span style="font-size: 17px;color: #666666;float: left;">短信登录</span>
</div>
</div>
<div style="width: 300px;height: 160px;border: 1px purple;margin-top: 10px;">
<div style="width: 268px;height: 36px;color: #666666;font-size: 12px;font-family: 宋体;">
<input type="text1" id="text1" width="300px" height="34px" placeholder="账号名/手机号/邮箱" style="padding-left: 20px;padding-top: 20px;background-color: #FFFFFF;padding: 9px 10px;margin-left: 20px;padding-right: 90px;border-radius: 4px;border:1px solid lightgray;" >
</div>
<div style="width: 268px;height: 36px;color: #666666;font-size: 12px;font-family: 宋体;">
<input type="password" id="password" width="300px" height="34px" placeholder="密码" style="padding-left: 20px;padding-top: 20px;background-color: #FFFFFF;padding: 9px 10px;margin-left: 20px;padding-right: 90px;border-radius: 4px;border:1px solid lightgray;margin-top: 17px;" >
</div>
<div style="width: 290px;height: 28px;border: 1px purple;margin-top: 20px;">
<a href="" style="color: rgb(132, 131, 131);font-size: 12px;padding-left: 235px;padding-top: 18px;">忘记密码</a>
</div>
<div style="width: 268px;height: 34px;border: purple;margin-left: 14px;background-color: #f79188;border-radius: 7px;">
<div style="width: 70px;height: 20px;border: purple;color: white;font-size: 14px;padding-top: 5px;padding-left: 110px;">
<span><b>登 录</b></span>
</div>
</div>
<div style="width: 300px; height: 43px;border: 1px purple;margin-top: 29px;float: left;background-color: #F6F6F6;">
<div style="width: 75px;height: 30px;border: 1px purple;margin-left: 20px;margin-top: 7px;float: left;">
<img src="./QQ-logo.png" alt="" width="25px" height="25px" style="float: left;">
<span style="float: left;padding-left: 2px;padding-top:5px ;">QQ</span>
</div>
<div style="width: 75px;height: 30px;border: 1px purple;margin-top: 7px;float: left;">
<img src="./微信-logo.png" alt="" width="25px" height="25px" style="float: left ;float: left;">
<span style="float: left;padding-left: 2px;padding-top: 5px;">微信</span>
</div>
<div style="width: 75px;height: 30px;border: 1px purple;float: right;margin-top: 13px ;">
<span style="padding-left: 10px;margin-top: 50px; ">立刻注册</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width: 1520px;height:86px;border: 1px purple;margin-top: 470px;font-family: 宋体;" class="Third">
<div style="width: 1520px;height: 36px;border: 1px purple;">
<div style="width: 950px;height: 20px;border: 1px purple;margin-left: 270px;color: #666666;font-size: 12px;margin-top: 20px;">
<a style="float: left;margin-left: 120px;">关于我们 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
<a style="float: left;"> 联系我们 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
<a style="float: left;"> 人才招聘 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
<a style="float: left;"> 商家入驻 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
<a style="float: left;"> 广告服务 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
<a style="float: left;"> 手机京东 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
<a style="float: left;"> 友情链接 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
<a style="float: left;"> 销售联盟 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
<span style="float: left;"> 京东社区 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
<a style="float: left;"> 京东公益 </a><div style="width: 2px;height: 12px;float: left;background: #CCCCCC;margin-top: 1px;"></div>
</div>
</div>
<div style="width: 350px;height: 25px;border: 1px purple;margin-left: 550px;margin-top: 10px;">
<span style="color: #666666;font-size: 11px;padding-left: 80px;">Copyright © 2004-2024 京东 JD.com 版权所有</span>
</div>
</div>
</body>
</html>运行结果如下：
电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)