首页简单商品详情页html代码

简单商品详情页html代码

时间: 2024-06-15 22:01:36 浏览: 215

一个简单的商品详情页HTML代码通常包含标题、图片、描述、价格、评价和购买按钮等基本元素。以下是一个基础的结构示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>商品详情页</title> <style> /* 可以添加一些基本样式 */ .product-image { width: 100%; height: auto; } </style> </head> <body> <div class="product-container"> <h1 class="product-title">商品名称</h1> <img src="product-image.jpg" alt="商品图片" class="product-image"> <p class="product-description">商品描述...</p> <p class="product-price">价格: $XX.XX</p> <div class="ratings"> <span>评分:</span> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-half-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> </div> <button class="buy-button">立即购买</button> </div> </body> </html> ```

阅读全文