图片做了自适应，可以换成自己想要的图片
<!DOCTYPE html>
<html>
<head>
<title>Huawei 商城</title>
<meta charset="UTF-8">
<style>
/* 样式表可以在这里添加 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
h1 {
margin: 0;
}
.product-list {
display: flex;
flex-wrap: wrap;
}
.product-item {
width: 250px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.product-item img {
max-width: 100%;
height: auto;
}
.product-name {
font-weight: bold;
margin: 10px 0;
}
.product-description {
color: #666;
}
.product-price {
margin-top: 10px;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Huawei 商城</h1>
<p>发现美好，开启未来</p>
</header>
<div class="product-list">
<div class="product-item">
<img src="1.webp" alt="产品1">
<h2 class="product-name">产品1</h2>
<p class="product-description">产品1的简介和描述，这是一段很长很长的描述文本，用于展示多行文本的情况。</p>
<p class="product-price">价格：<span id="product1-price">$99.99</span></p>
<button onclick="addToCart('product1')">添加到购物车</button>
</div>
<div class="product-item">
<img src="1.webp" alt="产品">
<h2 class="product-name">产品</h2>
<p class="product-description">产品2的简介和描述</p>
<p class="product-price">价格：<span id="product2-price">$199.99</span></p>
<button onclick="addToCart('product2')">添加到购物车</button>
</div>
<div class="product-item">
<img src="1.webp" alt="产品">
<h2 class="product-name">产品</h2>
<p class="product-description">产品2的简介和描述</p>
<p class="product-price">价格：<span id="product3-price">$199.99</span></p>
<button onclick="addToCart('product2')">添加到购物车</button>
</div>
<div class="product-item">
<img src="1.webp" alt="产品">
<h2 class="product-name">产品</h2>
<p class="product-description">产品2的简介和描述</p>
<p class="product-price">价格：<span id="product4-price">$199.99</span></p>
<button onclick="addToCart('product2')">添加到购物车</button>
</div>
<div class="product-item">
<img src="2.webp" alt="产品">
<h2 class="product-name">产品</h2>
<p class="product-description">产品2的简介和描述</p>
<p class="product-price">价格：<span id="product5-price">$199.99</span></p>
<button onclick="addToCart('product2')">添加到购物车</button>
</div>
<div class="product-item">
<img src="2.webp" alt="产品">
<h2 class="product-name">产品</h2>
<p class="product-description">产品2的简介和描述</p>
<p class="product-price">价格：<span id="product6-price">$199.99</span></p>
<button onclick="addToCart('product2')">添加到购物车</button>
</div>
<div class="product-item">
<img src="2.webp" alt="产品">
<h2 class="product-name">产品</h2>
<p class="product-description">产品2的简介和描述</p>
<p class="product-price">价格：<span id="product7-price">$199.99</span></p>
<button onclick="addToCart('product2')">添加到购物车</button>
</div>
<div class="product-item">
<img src="2.webp" alt="产品">
<h2 class="product-name">产品</h2>
<p class="product-description">产品2的简介和描述</p>
<p class="product-price">价格：<span id="product8-price">$199.99</span></p>
<button onclick="addToCart('product2')">添加到购物车</button>
</div>
<div class="product-item">
<img src="2.webp" alt="产品">
<h2 class="product-name">产品</h2>
<p class="product-description">产品2的简介和描述</p>
<p class="product-price">价格：<span id="product9-price">$199.99</span></p>
<button onclick="addToCart('product2')">添加到购物车</button>
</div>
<!-- 可以继续添加更多的产品项目 -->
</div>
<div class="footer">
<p>版权所有 © 2023 Huawei 商城</p>
</div>
<script>
// JavaScript代码可以在这里添加
function addToCart(productId) {
// 模拟将产品添加到购物车的逻辑
alert('产品 ' + productId + ' 已添加到购物车！');
}
</script>
</body>
</html>
效果图：
扫一扫
2794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
