<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品展示</title>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.product {
width: 45%;
background-color:
border: 1px solid
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.product img {
width: 100%;
height: auto;
}
.product-info {
padding: 0.5rem;
}
.title {
font-size: 16px;
font-weight: bold;
color:
margin-bottom: 10px;
}
.price {
font-size: 20px;
color:
margin-bottom: 10px;
}
.sales {
font-size: 14px;
color:
}
.tags {
font-size: 14px;
color:
margin-bottom: 10px;
}
.tags-a{
font-size: 14px;
color:
margin-bottom: 10px;
}
.tags-b{
font-size: 14px;
color:
margin-bottom: 10px;
}
.mark{
background-color: rgb(233, 69, 69);
color: rgb(255, 255, 255);
padding: 0.2rem 0.4rem;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="product">
<img src="../assets/1.png" alt="商品图片">
<div class="product-info">
<span class="mark">国庆大促</span>
<span class="title">2盒*1升露露杏仁</span>
<div class="tags">0元下单 退货包运费</div>
<span class="price">¥17.9</span>
<span class="sales">已抢4313瓶</span>
</div>
</div>
<div class="product">
<img src="../assets/2.png" alt="商品图片">
<div class="product-info">
<div class="title">希捷12T银河企业级氦气硬</div>
<span class="tags">0元下单 </span>
<span class="tags-a">即将售罄 </span>
<span class="tags-b">分期付款</span>
<div>
<span class="price">首件¥591.22</span>
<span class="sales">已抢73件</span>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商淘云</title>
<style>
*{
box-sizing: border-box;
}
html{
height: 100%;
}
body{
margin: 0;
height: 100%;
}
a{
text-decoration: none;
color: rgb(117, 113, 113);
}
.one{
color: gray;
background-color: rgba(108, 104, 104, 0.1);
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid
}
.left{
display: flex;
margin-left: 2rem;
align-items: center;
}
.right{
display: flex;
margin-right: 2rem;
align-items: center;
}
.two{
height: 6rem;
border-bottom: 1px solid
display: flex;
justify-content: space-between;
align-items: center;
}
.right>a{
font-size: 1.2rem;
text-decoration: none;
color: black;
}
.three{
color: gray;
background-color: rgba(108, 104, 104, 0.1);
height: 55rem;
border-bottom: 1px solid
}
.three-top{
display: flex;
justify-content: space-between;
}
.three-middle{
margin-top: 2rem;
margin-left: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: row;
align-items: center;
}
.three-bottom{
margin-left: 2rem;
margin-bottom: 2rem;
margin-right: 2rem;
display: flex;
justify-content: space-between;
}
img{
border-radius: 10px;
}
.card{
height: 23.5rem;
width: 40rem;
background-color: white;
margin-top: 2rem;
margin-right: 2rem;
margin-left: 2rem;
object-fit: contain;
border-radius: 10px;
}
.l1{
margin-top: 1rem;
margin-left: 2rem;
background-color: rgb(179, 181, 246);
color: white;
padding: 0.2rem 0.4rem;
display: inline-block;
}
.l2{
margin-top: 1.5rem;
margin-left: 2rem;
background-color: rgb(51, 48, 48);
color: white;
padding: 0.2rem 0.4rem;
display: inline-block;
}
.l3{
margin-top: 1.5rem;
margin-left: 2rem;
background-color: rgb(158, 156, 156);
color: white;
padding: 0.2rem 0.4rem;
display: inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="left">
欢迎来到 商淘云
</div>
<div>
<a href="#">商淘软件官网</a> |
<a href="#">交流论坛</a> |
<a href="#">服务频道</a> |
<a href="#">应用市场</a> |
<a href="#">产品体验</a>
</div>
</div>
<div class="two">
<div>
<div class="left">
<img src="assets/imgs/13.png" alt="shang">
<div style="color: red;font-size: 2rem;font-weight: bold;">商淘云</div><br>
</div>
<div class="left" style="color: rgb(102, 89, 89);">专业电商系统及服务提供商</div>
</div>
<div class="right">
<a href="#">首页</a>
<a href="#">电商资讯</a>
<a href="#">运营手册</a>
<a href="#">精品教程</a>
<a href="#">用户手册</a>
<a href="#">产品推荐</a>
<a href="#">系统下载</a>
</div>
</div>
<div class="three">
<div class="three-top">
<div style="margin-top: 2rem;margin-left: 2rem;">
<img src="../assets/1.jpg" alt="a" height="380px" width="600px">
</div>
<div style="margin-top: 2rem;">
<div style="margin-left: 2rem;"><img src="../assets/2.jpg" alt="b" height="180px"></div>
<div style="margin-left: 2rem;margin-top: 1rem;"><img src="../assets/3.jpg" alt="c" height="180px"></div>
</div>
<div class="card">
<div style="margin: 1rem;color: black;font-size: 1.4rem;">
电商头条
</div>
<hr>
<div class="l1">
1
</div>
<a href="#" style="color: blue;">疫情之下，社区团购为什么...</a><br>
<div style="margin-left: 3rem;margin-right: 2rem;">社区团购主要是生活用品，流量能迅速起来，并且能实现五接触配送，商...</div>
<div class="l2">
2
</div>
<a href="#" style="color: black;">电商网站建设如何设计商...</a><br>
<div class="l2">
3
</div>
<a href="#" style="color: black;">电商网站建设一般会经过...</a><br>
<div class="l3">
4
</div>
<a href="#" style="color: black;">商淘多用户系统商城v3.3...</a><br>
<div class="l3">
5
</div>
<a href="#" style="color: black;">开源B2B2C商城系统规格...</a>
</div>
</div>
<div class="three-middle">
<div style="color: black;font-size: 2rem;">软件推荐</div>
<div style="margin-left: 2rem;">线上+线下 电商+店商</div>
</div>
<div class="three-bottom">
<div><img src="../assets/4.jpg" alt="1"></div>
<div><img src="../assets/5.jpg" alt="2"></div>
<div><img src="../assets/6.jpg" alt="3"></div>
<div><img src="../assets/7.jpg" alt="4"></div>
</div>
</div>
</body>
</html>
扫一扫
1054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
