商品列表界面 有购买按钮 有商品图片和商品介绍 前端用html,css,js;后端用java写出来
时间: 2024-05-09 15:19:04 浏览: 11
前端代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<style>
.item {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.item img {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 10px;
}
.item h3 {
font-size: 18px;
margin-bottom: 10px;
}
.item p {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}
.buy-btn {
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
background-color: #007bff;
color: #fff;
text-decoration: none;
}
.buy-btn:hover {
background-color: #0062cc;
}
</style>
</head>
<body>
<div class="item">
<img src="https://picsum.photos/400/300" alt="商品图片">
<h3>商品名称</h3>
<p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
<a href="#" class="buy-btn">购买</a>
</div>
<div class="item">
<img src="https://picsum.photos/400/300" alt="商品图片">
<h3>商品名称</h3>
<p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
<a href="#" class="buy-btn">购买</a>
</div>
<div class="item">
<img src="https://picsum.photos/400/300" alt="商品图片">
<h3>商品名称</h3>
<p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
<a href="#" class="buy-btn">购买</a>
</div>
</body>
</html>
```
后端代码:
```java
import java.util.ArrayList;
import java.util.List;
public class Product {
private String name;
private String description;
private String imageUrl;
private double price;
public Product(String name, String description, String imageUrl, double price) {
this.name = name;
this.description = description;
this.imageUrl = imageUrl;
this.price = price;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getImageUrl() {
return imageUrl;
}
public void setImageUrl(String imageUrl) {
this.imageUrl = imageUrl;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public static List<Product> getProducts() {
List<Product> products = new ArrayList<>();
products.add(new Product("商品1", "商品1介绍", "https://picsum.photos/400/300", 10.0));
products.add(new Product("商品2", "商品2介绍", "https://picsum.photos/400/300", 20.0));
products.add(new Product("商品3", "商品3介绍", "https://picsum.photos/400/300", 30.0));
return products;
}
}
```
说明:
- `Product` 类代表商品,包含商品名称、商品介绍、商品图片和商品价格等属性,以及一个静态方法 `getProducts` 返回一个商品列表。
- 商品列表界面的 HTML 代码中使用了三个 `.item` 容器,每个容器包含一个商品图片、商品名称、商品介绍和购买按钮。其中,商品图片的 URL 从 `Product` 对象中获取,商品名称和商品介绍则写死在 HTML 代码中。购买按钮的链接暂时用 "#" 代替。
- 商品列表界面的 CSS 代码定义了 `.item` 容器的样式,包括边框、内边距、外边距等。`.item img` 定义了商品图片的样式,`.item h3` 和 `.item p` 分别定义了商品名称和商品介绍的样式,`.buy-btn` 定义了购买按钮的样式,包括背景色、文本颜色、圆角等。`.buy-btn:hover` 定义了鼠标悬浮在购买按钮上时的样式。