<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝网页</title>
<style>
.tbsy{
width: 1500px;
}
.dl {
display: flex;
height: 20px;
}
.dl > .zb >ul > li {
float: left;
display: flex;
list-style-type: none;
padding: 10px;
}
.dl >.yb > ul> li {
float: right;
display: flex;
list-style-type: none;
padding: 10px;
}
.ssl{
display: flex;
height: 100px;
margin: auto;
width: 1000px;
margin-top: 50px;
}
.ssl > tbtb{
float: left;
}
.ssl > ss {
margin: auto;
}
.ssl > lt{
float: right;
}
.fl, .xh ,.sp{
width: 1200px;
}
.fl{
height: 500px;
display: flex;
margin: auto;
}
.xh{
height: 50px;
}
.sp{
height: 300px;
}
.fl >.lb {
background-color: aquamarine;
float: left;
margin: auto;
}
.fl > .zj{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
grid-gap: 1px;
}
.fl > .lb > .j11{
grid-area: 1/1/2/2;
height: 150px;
width: 240px;
}
.fl > .lb > .j12{
grid-area: 2/1/3/2;
height: 150px;
width: 240px;
}
.fl > .lb > .j13{
grid-area: 1/2/2/3;
height: 150px;
width: 240px;
}
.fl > .lb > .j14{
grid-area: 2/2/3/3 ;
height: 150px;
width: 240px;
}
.fl > .yb {
width: 300px;
}
.fl > .yb > .zj{
display: flex;
}
.fl > .yb > .sb{
height: 150px ;
margin: auto;
}
.fl > .yb > .zj>.j1{
height: 50px;
width: 75px;
background-color: chartreuse;
}
.fl > .yb >.zj> .j2{
height: 50px;
width: 75px;
background-color: rgb(88, 248, 7);
}
.fl > .yb >.zj> .j3{
height: 50px;
width: 75px;
background-color: rgb(66, 121, 11);
}
.fl >.yb > .wb{
display: flex;
}
.fl > .yb > .wb > div{
height: 50px;
width: 70px;
}
.xh{
display: flex;
margin: auto;
}
.sp{
display: flex;
margin: auto;
}
</style>
</head>
<body>
<div class="tbwz" >
<div class="tbsy">
<div class="dl">
<div class="zb">
<ul >
<li>
<select name="address" id="area">
<option value="">中国大陆</option>
<option value="">中国香港</option>
<option value="">中国台湾</option>
<option value="">中国澳门</option>
</select>
</li>
<li><a href="https://login.taobao.com/member/login.jhtml?spm=a21bo.jianhua/a.754894437.1.5af92a89HnZdtR&f=top&redirectURL=https%3A%2F%2Fwww.taobao.com%2F">亲,请登录</a></li>
<li>手机逛淘宝</li>
<li>网页无障碍</li>
</ul>
</div>
<div class="yb">
<ul >
<li>
<select name="address" id="wdtb">
<option value="">我的淘宝</option>
<option value="">已买到的宝贝</option>
<option value="">我的足迹</option>
</select>
</li>
<li><img src="./屏幕截图 2024-06-02 121045.png" alt="">购物车</li>
<li><img src="./屏幕截图 2024-06-02 121058.png" alt="">收藏夹</li>
<li>商品分类</li>
<li>
<select name="address" id="mfkd">
<option value="">免费开店</option>
<option value="">对公支付</option>
</select>
</li>
<li>
<select name="address" id="qnmjzx">
<option value="">千牛卖家中心</option>
<option value="">开店入驻</option>
<option value="">已卖出的宝贝</option>
<option value="">售出中的宝贝</option>
<option value="">卖家服务市场</option>
<option value="">卖家培训中心</option>
<option value="">体检中心</option>
<option value="">电商学习中心</option>
</select>
</li>
<li>
<select name="address" id="wdtb">
<option value="">帮助中心</option>
<option value="">官方客服</option>
<option value="">商家客服</option>
<option value="">消息中心</option>
<option value="">意见反馈</option>
<option value="">举报中心</option>
</select>
</li>
</ul>
</div>
</div>
<div class="ssl">
<div class="tbtb"> <img src="./QQ截图20240625211326.png" alt=""></div>
<div class="ss">
<div><p><input type="text" placeholder="你好宝贝"></p></div>
</div>
<div class="lt"><img src="./QQ截图20240625211342.png" alt=""></div>
</div>
<div class="fl">
<div class="zb">
<div class="wz">分类</div>
<ul class="lb">
<li>
<i></i>
<a href="">电脑</a>
<span>/</span>
<a href="">办公</a>
<span>/</span>
<a href="">文具</a>
<li>
<i></i>
<a href="">工业品</a><span>/</span>
<a href="">商业</a><span>/</span>
<a href="">定制</a>
</li>
<li>
<i></i>
<a href="">家电</a><span>/</span>
<a href="">手机</a><span>/</span>
<a href="">数码</a>
</li>
<li>
<i></i>
<a href="">家具</a><span>/</span>
<a href="">家装</a><span>/</span>
<a href="">家居</a>
</li>
<li>
<a href="">女装</a><span>/</span>
<a href="">男装</a><span>/</span>
<a href="">内衣</a>
</li>
<li>
<a href="">女鞋</a><span>/</span>
<a href="">男鞋</a><span>/</span>
<a href="">运动</a>
</li>
<li>
<a href="">汽车</a><span>/</span>
<a href="">珠宝</a><span>/</span>
<a href="">箱包</a>
</li>
<li>
<a href="">食品</a><span>/</span>
<a href="">生鲜</a><span>/</span>
<a href="">健康</a>
</li>
<li>
<a href="">母婴</a><span>/</span>
<a href="">童装</a><span>/</span>
<a href="">潮玩</a>
</li>
<li>
<a href="">美妆</a><span>/</span>
<a href="">洗护</a><span>/</span>
<a href="">宠物</a>
</li>
<li>
<a href="">娱乐</a>
<span>/</span>
<a href="">图书</a><span>/</span>
<a href="">鲜花</a><span>/</span>
</li>
</ul>
</div>
<div class="zj">
<div class="j11"><img src="./微信截图_20240625230309.png" alt=""></div>
<div class="j12"><img src="./微信截图_20240625203829.png" alt=""></div>
<div class="j13"><img src="./QQ截图20240625204040.png" alt=""></div>
<div class="j14"><img src="./QQ截图20240625204114.png" alt=""></div>
</div>
<div class="yb">
<div class="sb">
<img src="./getAvatar.jpeg" alt="">
<p>佳好</p>
</div>
<div class="zj">
<div class="j1"><li>登录</li></div>
<div class="j2"><li>注册</li></div>
<div class="j3"><li>开店</li></div>
</div>
<div class="wb">
<div>
<div><img src="./QQ截图20240625204454.png" alt=""></div>
<p>宝贝收藏</p>
</div>
<div>
<div><img src="./QQ截图20240625204504.png" alt=""></div>
<p>买过的店</p>
</div>
<div>
<div><img src="./QQ截图20240625204513.png" alt=""></div>
<p>收藏的店</p>
</div>
<div>
<div><img src="./QQ截图20240625204529.png" alt=""></div>
<p>我的足迹</p>
</div>
</div>
</div>
</div>
<div class="xh">
<div class="cwxh"><img src="./QQ截图20240625204556.png" alt=""></div>
<div class="cdsm"><img src="./QQ截图20240625204606.png" alt=""></div>
<div class="fsss"><img src="./QQ截图20240625204614.png" alt=""></div>
<div class="ydhw"><img src="./QQ截图20240625204624.png" alt=""></div>
<div class="jxsh"><img src="./QQ截图20240625204634.png" alt=""></div>
</div>
<div class="sp">
<div>
<img src="./微信截图_20240625204647.png" alt="">
</div>
<div>
<img src="./QQ截图20240625204659.png" alt="">
</div>
<div>
<img src="./QQ截图20240625204711.png" alt="">
</div>
<div>
<img src="./微信截图_20240625204725.png" alt="">
</div>
</div>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/direct/be966a51b6a0427dabefef3fac81a52e.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品页</title>
<style>
.dl {
display: flex;
height: 20px;
}
.dl > .zb >ul > li {
float: left;
display: flex;
list-style-type: none;
padding: 10px;
}
.dl >.yb > ul> li {
float: right;
display: flex;
list-style-type: none;
padding: 10px;
}
.sb > div{
display: flex;
height: 350px;
width: 900px;
}
.sb > .zb{
width: 300px;
float: left;
}
.sb > .yb{
width: 550px;
margin-left: 50px;
float: right;
}
.gm{
display: flex;
margin: auto;
margin-right: 200px;
}
.ljgm{
height: 65px;
width: 100px;
background-color: cadetblue;
}
.jr{
height: 65px;
width: 100px;
background-color: rgb(8, 235, 243);
}
.sc{
height: 65px;
width: 100px;
background-color: rgb(214, 242, 243);
}
.wb{
display: flex;
}
.gm{
float: right;
}
</style>
</head>
<body>
<div class="">
<div class="sym">
<div class="sb">
<div class="zb">
<div class="sptp"><img src="./微信截图_20240625204647.png" alt=""></div>
</div>
<div class="yb">
<div>
<div class="spjs"><strong>米菲兔联名金号毛巾纯棉卡通可爱儿童情侣洗脸巾家用浴巾吸水A类</strong>
<img src="./QQ截图20240626005832.png" alt="">
<p>配 送:
山东聊城 至
长沙市 望城区<br>
快递: 免运费
预计17小时内发货,预计3天内</p>
</div>
<div class="gm">
<div class="ljgm">立即购买</div>
<div class="jr">加入购物车</div>
<div class="sc">收藏</div>
</div>
</div>
</div>
<div class="xb">
<div><img src="./QQ截图20240626005123.png" alt=""></div>
<div><img src="./QQ截图20240626005133.png" alt=""></div>
<div><img src="./QQ截图20240626005142.png" alt=""></div>
<div><img src="./QQ截图20240626005156.png" alt=""></div>
</div>
</div>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/direct/77b324cf315543bbaab1d19a580cb7f6.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页</title>
<style>
.dljm{
height: 650px;
width: 800px;
}
.zb{
float: left;
}
.dl{
height: 50px;
width: 300px;
margin-top: 30px;
background-color: chocolate;
margin: auto;
text-align: center;
}
.j1{
display: flex;
list-style: 10px;
}
.yb{
float:right;
}
</style>
</head>
<body>
<div>
<div class="dljm">
<div class="zb">
<div class="mmdl">
<span>密码登录</span> <span>短信登录</span>
</div>
<div>
<p><input type="text" placeholder="天才从不留姓名"></p>
<p><input type="password" placeholder="谁能奈我何"></p>
</div>
<div class="dl">
<p> 登录</p>
</div>
<div class="zfbdd">
<div class="j1">
<div class="zfb"><img src="" alt="">支付宝登录</div>
<div class="dd"><img src="" alt="">钉钉登录</div>
</div>
<div class="j2">免费注册 忘记账户名 忘记密码</div>
</div>
</div>
<div class="yb" >
<div class="sjcm">手机扫码安全登录</div>
<div class="tp" ><img src="./微信图片_20240319225330.jpg" alt="" style="width: 350px; height: 350px;"></div>
</div>
</div>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/direct/14e665942db246bd9a549d6b7a0d89c4.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css盒子</title>
<style>
* {
font-size: 16px;
}
.j1 {
height: 60px;
width: 200px;
background-color: black;
}
.j2 {
height: 60px;
width: 30%;
background-color: red;
}
</style>
</head>
<body>
<div class="j1">hahaha</div>
<p>
<div class="j2">haha</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/direct/9c019c0da1614aae88f2ae0ad6baf599.png)