网上水果超市水果查看模块实现代码

对于一个网上水果超市，水果查询模块是非常重要的。下面是一个简单的实现代码，可以用于展示水果的图片和信息。

HTML代码：

<div class="fruit-container">
  <div class="fruit-img-wrapper">
    <img src="apple.jpg" alt="Apple">
  </div>
  <div class="fruit-info">
    <h2>Apple</h2>
    <p>Price: $1.00/lb</p>
    <p>Description: A round fruit with red or green skin and white flesh.</p>
  </div>
</div>

CSS代码：

.fruit-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.fruit-img-wrapper {
  width: 30%;
}

.fruit-img-wrapper img {
  width: 100%;
}

.fruit-info {
  width: 70%;
  padding-left: 20px;
}

.fruit-info h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.fruit-info p {
  font-size: 18px;
  margin-bottom: 5px;
}

在实际应用中，可以使用数据库存储水果信息，然后使用后端语言（如PHP）从数据库中获取数据，动态生成水果展示页面。