<!-- 仿写唯品会网页————首页 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>唯品会</title>
<style>
[class="all"]{
width: 1450px;
height: 1900px;
}
[class="top"]{
/* border:red 1px solid; */
font-size: 13px;
width: 1200px;
height: 100px;
padding: 50PX;
margin-left: 200px;
margin-right:200px;
margin-bottom: 0px;
padding-bottom: 0px;
}
[class="top2"]{
text-indent: 30%;
font-size: 15px;
}
.body1{
border:rgb(24, 20, 20) 10px;
width: 1200px;
height: 50px;
/* background-color: red; */
margin: 0px;
margin-top: 10px;
margin-left: 200px;
}
[class="a"]{
position: absolute ;
width: 100px;
height: 20px;
top: 50px;
left: 0px;
border:pink 5px;
}
th:nth-child(1){
background-color: deeppink;
font-size: 30px;
color: white;
}
.th{
color: black;
}
[class="ab"]{
position:fixed;
width: 100px;
height: 20px;
bottom: 50px;
right: 0px;
border:pink 5px;
}
.img1{
margin-left: 200px;
}
.foot1,.foot2,.foot3{
margin-top: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="all">
<div class="top">
<div class="top1">
<div class="a"><a href="#bottom" name="top">回到底部</a></div>
<tr>
<td><a href=""><img src="./1.png"
width="100px"height="80px"></a></td>
<td><a href=""><img src="./2.jpg"
width="200px"height="80px"></a></td>
<td><a href=""><img src="./3.png"
width="700px"></a></td>
</tr>
</div>
<div class="top2">
<ul>
<td><a href=""><span>耐克|</span></a></td>
<td><a href=""><span>包|</span></a></td>
<td><a href=""><span>防晒衣男士|</span></a></td>
<td><a href=""><span>凉鞋男童|</span></a></td>
<td><a href=""><span>防晒|</span></a></td>
<td><a href=""><span>阿迪达斯|</span></a></td>
<td><a href=""><span>衬衫|</span></a></td>
</ul>
</div>
</div>
<div class="body1">
<table width="1100px" height="50px">
<tr>
<th>商品分类</th>
<th>推荐</th>
<th>3折疯抢</th>
<th>唯品快枪</th>
<th>奢品</th>
<th>鞋包</th>
<th>女装</th>
<th>运动</th>
<th>女装</th>
<th>母婴</th>
<th>电器</th>
<th>男装</th>
<th>内衣</th>
<th>百货</th>
<th>更多</th>
</tr>
</table>
</div>
<div class="img1"><img src="https://b.appsimg.com/upload/momin/2024/06/25/117/1719280213790.jpg"width="1200px"height="500px"></div>
<div class="img1"><img src="./4.jpg"width="1200px"height="500px"></div>
<div class="img1"><img src="./5.png"width="1200px"height="500px"></div>
<div class="item">
<div class="ab"><a href="#top" name="bottom">回到顶部</a></div>
<div class="foot">
<div class="foot1">
<span>
互联网药品信息服务资格证书:(粤)-经营性-2023-0508
网络食品交易第三方平台备案凭证:粤B2-20170777
</span>
</div>
<div class="foot2">
<span>
凭证:(粤)网械平台备字[2019]第00001号
出版物网络交易平台服务经营备案证:粤新出网备(2021)1号 未成年人关怀专区
</span>
</div>
<div class="foot3">
<span>
药品网络交易服务第三方平台备案凭证:(粤)网药平台备字[2023] 002号
违法和不良信息举报电话:4006789888 算法推荐违规举报电话:4006789888 广东省放心消费承诺单位
</span>
</div>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/direct/76414e3dbc6349b1a95b428759c14622.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>
li{
display: inline-block;
list-style-type:none;
}
div,span{
color: rgb(24, 21, 9);
}
[class="top"]{
width: 1050px;
height: 150px;
}
[class="top1"]{
width: 1200px;
height: 150pz;
}
[class="top2"]{
width: 1100px;
height: 150px;
display: block;
margin-top:50px ;
margin-left: 300px;
}
[class="topu"]{
width: 800px;
height: 50px;
font-size: 30px;
float: right;
}
.body1>li{
width: 300px;
height: 600px;
border: 1px solid gray ;
list-style-type: none;
text-align: center;
margin: 20px;
display: inline-block;
}
th:nth-child(1){
background-color: deeppink;
font-size: 30px;
color: white;
}
.th{
margin-left: 10%;
}
[class="1"]{
width: 250px;
height: 400px;
/* border:black 1px solid; */
margin-left: 8%;
display: inline-block;
}
[class="4"]{
width: 300px;
height: 30px;
/* border:red 2px solid; */
}
[class="4-1"]{
font-size: 30px;
font-weight: 800;
}
[class="4-2"]{
font-size: 15px;
text-decoration: line-through;
color: grey;
}
[class="4-3"]{
font-size: 13px;
color: grey;
}
[class="5"]{
margin-top: 15px;
}
[class="5-1"]{
font-size: 20px;
color: grey;
width: 300px;
height: 20px;
/* border: red 1px solid; */
margin-top: 40px;
}
[class="6-1"]{
font-size: 18px;
color: grey;
margin-top: 20px;
}
[vlass="all"]{
width: 1300;
height: 700px;
position: absolute;
}
.foot1,.foot2,.foot3{
margin-top: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="top">
<div class="top1">
<div class="top2"><img src="./1.png" width="200px"height="100px">
<ul class="topu">
<li><a href=""><span>耐克|</span></a></li>
<li><a href=""><span>眼霜|</span></a></li>
<li><a href=""><span>背心|</span></a></li>
<li><a href=""><span>口红|</span></a></li>
<li><a href=""><span>女装|</span></a></li>
<li><a href=""><span>防晒|</span></a></li>
<li><a href=""><span>夏凉被|</span></a></li>
<li><a href=""><span>拖鞋女夏外穿|</span></a></li>
</ul>
</div>
</div>
</div>
<table width="1300px" height="50px" >
<tr>
<th>商品分类</th>
<th>推荐</th>
<th>3折疯抢</th>
<th>唯品快枪</th>
<th>奢品</th>
<th>鞋包</th>
<th>女装</th>
<th>运动</th>
<th>女装</th>
<th>母婴</th>
<th>电器</th>
<th>男装</th>
<th>内衣</th>
<th>百货</th>
<th>更多</th>
</tr>
</table>
<hr>
<hr>
<div class="all">
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<div class="1">
<div class="2"><img src="https://a.vpimg3.com/upload/brandcool/0/LOGO/163057608921402f5f/primary.png"width="60px"height="50px"></div>
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/11/84f4cb58-bb62-4e51-96ae-0a4f27c18ae7_327x327_90.jpg"width="240px"height="200px" alt=""> </div>
<div class="4">
<span class="4-1">¥693</span>
<span class="4-2">¥1130&nbsp;&nbsp;</span>
<span class="4-3">6.3折</span>
</div>
<div class="5">
<span class="5-1">
60天历史最低
</span>
</div>
<div class="6">
<span class="6-1">男士横款LOGO高级感轻便时尚大容量耐磨胸包斜挎单肩包</span>
</div>
</div>
<hr>
<hr>
<div class="foot">
<div class="foot1">
<span>
互联网药品信息服务资格证书:(粤)-经营性-2023-0508
网络食品交易第三方平台备案凭证:粤B2-20170777
</span>
</div>
<div class="foot2">
<span>
凭证:(粤)网械平台备字[2019]第00001号
出版物网络交易平台服务经营备案证:粤新出网备(2021)1号 未成年人关怀专区
</span>
</div>
<div class="foot3">
<span>
药品网络交易服务第三方平台备案凭证:(粤)网药平台备字[2023] 002号
违法和不良信息举报电话:4006789888 算法推荐违规举报电话:4006789888 广东省放心消费承诺单位
</span>
</div>
</div>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/direct/ee281bb3c2694be5910da7205f73643c.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>
.all{
height: 1800px;
height: 1250;
}
.top{
width: 1250px;
}
.top11,.top12,.top13,.top14,.top15{
display:inline;
}
.top1{
margin-left: 300px;
margin-top: 50px;
width: 1250px;
}
.top3{
margin-left: 20%;
}
th:nth-child(1){
background-color: deeppink;
font-size: 30px;
color: white;
}
.backbottom{
width: 80px;
height: 30px;
font-size: 20px;
color: violet;
border:pink 2px solid;
margin-top: 70px;
margin-left: 40px;
float: left;
background-color: violet;
font-weight: 700;
}
.top2{
margin-left: 75%;
width: 700px;
}
.backtop{
width: 80px;
height: 30px;
font-size: 20px;
color: violet;
border:pink 2px solid;
margin-bottom: 70px;
margin-right: 40px;
bottom: 50px;
right: 50px;
position:fixed;
background-color: violet;
font-weight: 700;
}
.body121{
width: 1250px;
height: 900px;
border:red 1px solid;
margin: auto;
}
.body1211{
width: 500px;
height: 600px;
border:black 3px solid;
}
.body1212{
width: 500px;
height: 150px;
border:blac
k 3px solid;
}
.body12121,.body12122,.body12123{
height: 100px;
display:inline;
}
[class="foot"]{
bottom: 0%;
}
.foot1,.foot2,.foot3{
margin-top: 15px;
text-align: center;
}
[class="1"]{
width: 250px;
height: 400px;
/* border:black 1px solid; */
margin-left: 8%;
display: inline-block;
}
[class="0"]{
margin-left: 300px;
}
[class="4"]{
width: 300px;
height: 100px;
margin-left: 230px;
border:black 2px solid;
}
[class="5"]{
margin-top: 15px;
}
[class="5-1"]{
font-size: 20px;
color: grey;
width: 300px;
height: 20px;
/* border: red 1px solid; */
margin-top: 40px;
}
[class="6-1"]{
font-size: 18px;
color: grey;
margin-top: 20px;
}
</STyle>
</head>
<body>
<div class="all">
<div class="top">
<div class="backbottom"><a href="#bottom" name="top">回到底部</a></div>
<div class="top1">
<div class="top11"><span><img src="./1.png" width="100px"height="80px"></span></div>
<div class="top12"><span><img src="./2.jpg"width="200px"height="80px"></span></div>
<div class="top13"><span><img src="./3.png" alt=""width="700px"></span></div>
</div>
<div class="top2">
<span>
<ul>
<td align="center">
<td><a href=""><span>耐克|</span></a></td>
<td><a href=""><span>包|</span></a></td>
<td><a href=""><span>防晒衣男士|</span></a></td>
<td><a href=""><span>凉鞋男童|</span></a></td>
<td><a href=""><span>防晒|</span></a></td>
<td><a href=""><span>阿迪达斯|</span></a></td>
<td><a href=""><span>衬衫|</span></a></td>
</td>
</ul>
</span>
</div>
<div class="top3">
<table width="1100px" height="50px">
<tr>
<th>商品分类</th>
<th>推荐</th>
<th>3折疯抢</th>
<th>唯品快枪</th>
<th>奢品</th>
<th>鞋包</th>
<th>女装</th>
<th>运动</th>
<th>女装</th>
<th>母婴</th>
<th>电器</th>
<th>男装</th>
<th>内衣</th>
<th>百货</th>
<th>更多</th>
</tr>
</table>
</div>
</div>
<div class="1">
<div class="3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/03/27/190/c116cd23-8e0b-485f-91e2-ab5c7ca76953.jpg"width="700px"height="700px" alt=""> </div>
<div class="4">
<span class="4-1"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/03/27/23/6dd9f7ec-60ae-456c-a44b-8c26ecacebe4_630x630_90.jpg" alt=""width="90px"height="90px"></span>
<span class="4-2"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/03/27/112/22b935b1-87ab-497a-9d6a-236c28457534_630x630_90.jpg" alt=""width="90px"height="90px"></span>
<span class="4-3"><img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/03/27/190/c116cd23-8e0b-485f-91e2-ab5c7ca76953_630x630_90.jpg" alt=""width="90px"height="90px"></span>
</div>
<div class="5">
<span class="5-1">
</span>
</div>
<div class="6">
<span class="6-1"></span>
</div>
</div>
<div class="1">
<div class="0"><img src="./8.png"width="670px"height="800px" alt=""> </div>
</div>
<hr>
<div class="backtop"><a href="#top" name="bottom">回到顶部</a></div>
</div>
<div class="foot">
<div class="foot1">
<span>
互联网药品信息服务资格证书:(粤)-经营性-2023-0508
网络食品交易第三方平台备案凭证:粤B2-20170777
</span>
</div>
<div class="foot2">
<span>
凭证:(粤)网械平台备字[2019]第00001号
出版物网络交易平台服务经营备案证:粤新出网备(2021)1号 未成年人关怀专区
</span>
</div>
<div class="foot3">
<span>
药品网络交易服务第三方平台备案凭证:(粤)网药平台备字[2023] 002号
违法和不良信息举报电话:4006789888 算法推荐违规举报电话:4006789888 广东省放心消费承诺单位
</span>
</div>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/direct/15434748d7f94bfba550c3c372ced07e.png)