<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝购物车</title>
<style>
.c{
/* border: 1px solid red; */
height: 250px;
width: 1000px;
margin: auto;
}
.ccc > span{
color: rgb(145, 145, 145);
}
span:hover{
color: orange;
}
.a{
/* border: 1px solid red; */
display: grid;
margin: auto;
height :30px;
grid-template-columns: repeat(19,1fr);
}
.b{
/* border: 1px solid red; */
height: 70px;
/* background-color: rgb(206, 210, 214); */
}
.b2{
float: left;
}
.b1{
color: orangered;
float: left;
}
.b3{
float: right;
/* border: 1px solid red ; */
margin-right: 100px;
}
.b31{
color: orangered;
width: 300px;
height: 30px;
}
.b32{
height: 30px;
}
.d1{
/* border: 1px solid red; */
/* background-color: rgb(214, 221, 228); */
margin: auto;
width: 1000px;
height: 600px;
}
.d12{
/* border: 1px solid red; */
margin: auto;
margin-top: 100px;
width: 200px;
/* height: 200px; */
}
.d13{
margin-left: 380px;
width: 300px ;
}
.d14{
margin-left: 450px;
}
.d141{
width: 100px;
height: 60px;
}
</style>
</head>
<body>
<div class="a">
<div class="a1">
<span></span>
</div>
<div class="a2">
<span></span>
</div>
<div class="a3">
<span>用户名</span>
</div>
<div class="a4">
<span>手机逛淘宝</span>
</div>
<div class="a5">
<span>网页无障碍</span>
</div>
<div class="a6">
<span></span>
</div>
<div></div>
<div></div>
<div></div>
<div class="a7">
<span></span>
</div>
<div class="a8">
<span>淘宝网首页</span>
</div>
<div class="a9">
<span>我的淘宝</span>
</div>
<div class="a10">
<span>购物车</span>
</div>
<div class="a11">
<span>收藏夹</span>
</div>
<div class="a12">
<span>商品分类</span>
</div>
<div>
<span>免费开店</span>
</div>
<div>
<span>千牛卖家中心</span>
</div>
<div4>
<span>帮助中心</span>
</div>
<div>
<span></span>
</div>
</div>
<div class="b">
<div class="b2">
<img src="../homework_3/image/屏幕截图 2024-06-29 110316.png" alt="" height="40px" width="">
</div>
<div class="b1">
<big><big><big><span>购物车</span></big></big></big>
</div>
<div class="b3" >
<input type="text" class="b31">
<button class="b32">搜索</button>
</div>
</div>
<div class="d">
<div class="d1">
<div class="d12">
<img src="./image/gwc.png" alt="" width="200px" height="150px">
</div>
<div class="d13">
<span>您的购物车空空如也,去首页看看吧</span>
</div>
<div class="d14">
<button class="d141"><big><big>去逛逛</big></big></button>
</div>
</div>
</div>
<div class="c">
<div class="c1">
<p class="ccc">
<span>阿里巴巴集团</span>
<b>|</b>
<span>淘宝网</span>
<b>|</b>
<span>天猫</span>
<b>|</b>
<span>聚划算</span>
<b>|</b>
<span>全球速卖通</span>
<b>|</b>
<span>阿里巴巴国际交易市场</span>
<b>|</b>
<span>1688</span>
<b>|</b>
<span>阿里妈妈</span>
<b>|</b>
<span>飞猪</span>
<b>|</b>
<span>阿里云计算</span>
<b>|</b>
<span>AliOS</span>
<b>|</b>
<span>阿里通信</span>
<b>|</b>
<span>一淘</span>
<b>|</b>
<span>万网</span>
<b>|</b>
<span>高德</span>
<b>|</b>
<span>UC</span>
<b>|</b>
<span>友盟</span>
<b>|</b>
<span>阿里安全</span>
<b>|</b>
<span>大麦网</span>
<b>|</b>
<span>钉钉</span>
<b>|</b>
<span>支付宝</span>
<b>|</b>
<span>优酷</span>
<b>|</b>
<span>土豆</span>
<b>|</b>
<span>阿里健康</span>
<b>|</b>
<span>阿里影业</span>
<b>|</b>
<span>网商银行</span>
<b>|</b>
<span>造点新货(众筹)</span>
<b>|</b>
</p>
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿淘宝页面---登陆页面</title>
<style>
body{
background-color: rgb(250, 247, 243);
}
.a{
/* border: 1px solid red; */
height: 100px;
margin: 0px;
}
.a1{
/* border: 1px solid red; */
width: 150px;
height: 100px;
margin-left: 300px;float: left;
}
.a2{
width: 200px;
height: 100px;
margin-left: 900px;
float: left;
}
.b{
border: 1px solid rgb(252, 252, 252);
width: 800px;
height: 400px;
background-color: rgb(255, 255, 255);
box-shadow: 4px 4px 4px rgb(226, 220, 220);
border-radius: 50px;
margin-left: 500px;
}
.b1{
/* border: 1px solid red; */
width: 350px;
height: 300px;
margin-top: 50px;
margin-left: 100px;
border-right: 1px solid rgb(197, 195, 195);
float: left;
}
.b11{
/* border: 1px solid red; */
width: 300px;
height: 50px;
margin-top: 20px;
text-align: center;
}
.b121{
width: 250px;
height: 50px;
background-color: rgb(238, 236, 236);
border-radius: 50px;
border: white;
}
.b12{
/* border: 1px solid red; */
margin-left: 30px;
}
.b122{
width: 250px;
height: 50px;
background-color: rgb(238, 236, 236);
border-radius: 50px;
border: white;
margin-top: 20px;
}
.b123{
width: 250px;
height: 50px;
background-image: linear-gradient(to right,rgb(253, 124, 37),rgb(255, 104, 4));
border-radius: 50px;
border: white;
margin-top: 20px;
}
.b13{
color: rgb(187, 185, 185);
}
.b14{
color: rgb(187, 185, 185);
margin-top: 10px;
margin-left: 100px;
}
.b2{
/* border: 1px solid red; */
width: 300px;
height: 300px;
margin-top: 50px;
float: left;
}
.b21{
/* border: 1px solid red; */
width: 300px;
height: 50px;
margin-top: 20px;
text-align: center;
}
.b22{
margin-left: 55px;
}
.b231{
color: rgb(187, 184, 184);
float: left;
margin-left: 70px;
}
.b232{
float: left;
border-right: 2px solid rgb(160, 157, 157);
margin-left: 20px;
color: rgb(255, 123, 0);
}
.b233{
float: left;
color: rgb(255, 123, 0);
margin-left: 3px;
}
.b234{
color: rgb(187, 184, 184);
float: left;
margin-left: 120px;
}
</style>
</head>
<body>
<div class="a">
<div class="a1">
<img src="https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png" alt="" style="width:170px;height:52px;left:0px;top:50px;">
</div>
<div class="a2">
<small>
<span>网站无障碍</span><br>
<span>"登陆页面"改进建议</span>
</small>
</div>
</div>
<div class="b">
<div class="b1">
<div class="b11">
<b><big><big>密码登录</big></big></b>
<span> </span>
<b><big><big>短信登录</big></big></b>
</div>
<div class="b12">
<input type="text" name="text" class="b121" placeholder=" 账号名/手机号/有户名">
<input type="password" name="password" class="b122" placeholder=" 请输入登录密码">
<button class="b123" type="submit" ><b>登录</b></button>
</div>
<div class="b13">
<span><small>免费注册</small></span>
<span>
</span>
<span><small>忘记账号名 忘记密码</small></span>
</div>
<div class="b14">
<span><small>支付宝登陆</small></span>
</div>
</div>
<div class="b2">
<div class="b21">
<b><big><big>手机扫码安全登录</big></big></b>
</div>
<div class="b22">
<img src="./二维码.png" alt="">
</div>
<div class="b23">
<div class="b231">
<span><small>打开</small></span>
</div>
<div class="b232">
<span><small>淘宝App </small></span>
</div>
<div class="b233">
<small>天猫App </small>
</div>
<div class="b234">
<span><small>扫一扫登录</small></span>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿淘宝页面</title>
<style>
.a{
height: 100px;
/* border: 1px solid red; */
}
.a1{
/* border: 1px solid red; */
width: 260px;
height: 80px;
float: left;
}
.a2{
/* border: 1px solid red; */
width: 1150px;
height: 100px;
float: left;
margin-left: 100px;
}
.a21{
border: 2px solid rgb(247, 72, 8);
height: 40px;
border-radius: 5px;
margin-top: 5px;
}
.a211{
width: 1000px;
height: 32px;
border: 0px;
margin-left: 50px;
margin-top: 3px;
}
.a212{
background-color: orangered;
color: aliceblue;
border: 0px;
width: 80px;
height: 38px;
margin-top: 1px;
border-radius: 5px;
}
.a22{
margin-left: 30px;
}
.b{
/* border: 1px solid red; */
height: 1100px;
}
.b1{
height: 500px;
}
.b1 > div{
/* border: 1px solid red; */
width: 280px;
height: 500px;
float: left;
margin-left: 10px;
border-radius: 5px;
}
.b11:hover{
border: 1px solid red;
}
.b11{
align-items: center;
}
.b112{
margin-top: 80px;
}
.sss{
color: orangered;
}
.b12:hover{
border: 1px solid red;
}
.b13:hover{
border: 1px solid red;
}
.b14:hover{
border: 1px solid red;
}
.b15:hover{
border: 1px solid red;
}
.b16:hover{
border: 1px solid red;
}
.b2{
margin-top: 10px;
}
.b2 > div{
/* border: 1px solid red; */
width: 280px;
height: 500px;
float: left;
margin-left: 10px;
border-radius: 5px;
}
.b21:hover{
border: 1px solid red;
}
.b22:hover{
border: 1px solid red;
}
.b23:hover{
border: 1px solid red;
}
.b24:hover{
border: 1px solid red;
}
.b25:hover{
border: 1px solid red;
}
.b26:hover{
border: 1px solid red;
}
.c{
/* border: 1px solid red; */
height: 250px;
}
.ccc > span{
color: rgb(145, 145, 145);
}
span:hover{
color: orange;
}
</style>
</head>
<body>
<div class="a">
<div class="a1">
<img src="https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png" alt="" style="width:240px;height:80px;left:0px;top:50px;">
</div>
<div class="a2">
<div class="a21">
<input type="text" class="a211" placeholder="手机壳">
<button type="submit" class="a212">搜索</button>
</div>
<div class="a22">
<span><small>
大额神卷 iPhone惊喜卷 进口惊喜卷 家电爆款 3c数码优惠 美味狂欢 女装 货架 空调 手机 笔记本电脑 电脑主机 瓷砖 床 男鞋
</small></span>
</div>
</div>
</div>
<div class="b">
<div class="b1">
<div class="b11">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b12">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b13">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b14">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b15">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b16">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
</div>
<div class="b2">
<div class="b21">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b22">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b23">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b24">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b25">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
<div class="b26">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
<div class="b111">
<span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
</div>
<div class="b112">
<span class="sss"><b><big>¥2.10</big></b></span>
<span><small>9000+人累计付款 浙江</small></span><br>
<span class="sss"><small>包邮</small></span><br>
<span>魔方百货严选</span>
</div>
</div>
</div>
</div>
<div class="c">
<div class="c1">
<p class="ccc">
<span>阿里巴巴集团</span>
<b>|</b>
<span>淘宝网</span>
<b>|</b>
<span>天猫</span>
<b>|</b>
<span>聚划算</span>
<b>|</b>
<span>全球速卖通</span>
<b>|</b>
<span>阿里巴巴国际交易市场</span>
<b>|</b>
<span>1688</span>
<b>|</b>
<span>阿里妈妈</span>
<b>|</b>
<span>飞猪</span>
<b>|</b>
<span>阿里云计算</span>
<b>|</b>
<span>AliOS</span>
<b>|</b>
<span>阿里通信</span>
<b>|</b>
<span>一淘</span>
<b>|</b>
<span>万网</span>
<b>|</b>
<span>高德</span>
<b>|</b>
<span>UC</span>
<b>|</b>
<span>友盟</span>
<b>|</b>
<span>阿里安全</span>
<b>|</b>
<span>大麦网</span>
<b>|</b>
<span>钉钉</span>
<b>|</b>
<span>支付宝</span>
<b>|</b>
<span>优酷</span>
<b>|</b>
<span>土豆</span>
<b>|</b>
<span>阿里健康</span>
<b>|</b>
<span>阿里影业</span>
<b>|</b>
<span>网商银行</span>
<b>|</b>
<span>造点新货(众筹)</span>
<b>|</b>
</p>
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>