使用html和css模仿华为商城静态页面
图片做了自适应，可以换成自己想要的图片
<!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>
效果图：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！