html超市代码,前端 CSS : 5# 纯 CSS 实现24小时超市

好的，以下是一个简单的 HTML 和 CSS 实现 24 小时超市的代码：

HTML：

<div class="market">
  <div class="banner">
    <h1>24小时超市</h1>
  </div>
  <div class="shelf">
    <div class="product">
      <img src="product1.jpg" alt="Product 1">
      <h2>产品1</h2>
      <p>$10</p>
    </div>
    <div class="product">
      <img src="product2.jpg" alt="Product 2">
      <h2>产品2</h2>
      <p>$15</p>
    </div>
    <div class="product">
      <img src="product3.jpg" alt="Product 3">
      <h2>产品3</h2>
      <p>$20</p>
    </div>
  </div>
</div>

CSS：

/* Reset styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

/* Market styles */
.market {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

.banner {
  background-color: #007bff;
  color: #fff;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px;
}

.shelf {
  display: flex;
  flex-wrap: wrap;
}

.product {
  width: 30%;
  margin-right: 3.33333%;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  padding: 10px;
  text-align: center;
}

.product img {
  max-width: 100%;
  height: auto;
}

.product h2 {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.product p {
  font-size: 16px;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 10px;
}

这个代码会产生一个简单的超市页面，包括一个顶部的横幅和三个产品展示在一个排列良好的货架上。请注意，这只是一个基本的示例，你可以根据你的具体需求进行更改和扩展。