html制作3行3列的商品陈列展示框

可以使用HTML和CSS制作3行3列的商品陈列展示框，具体步骤如下：

1. 在HTML中创建一个div容器，设置class为"container"。

2. 在CSS中为.container设置宽度、高度、边框和内边距等样式，使其成为一个宽度固定、高度自适应的方格。

3. 在.container中创建9个子div，分别设置class为"item"，并设置宽度、高度、边框和内边距等样式，使它们成为一个宽度固定、高度自适应的商品展示框。

4. 在CSS中使用float属性将每个.item浮动到左侧，使它们按照3行3列的方式排列。

5. 可以使用CSS的伪类选择器: nth-child(n)来为展示框中的商品设置不同的样式，例如hover时变色。

以下是示例代码：

HTML代码：

<div class="container">
  <div class="item">商品1</div>
  <div class="item">商品2</div>
  <div class="item">商品3</div>
  <div class="item">商品4</div>
  <div class="item">商品5</div>
  <div class="item">商品6</div>
  <div class="item">商品7</div>
  <div class="item">商品8</div>
  <div class="item">商品9</div>
</div>

CSS代码：

.container {
  width: 600px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow: hidden;
}

.item {
  width: 180px;
  height: 180px;
  border: 1px solid #ccc;
  padding: 10px;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.item:hover {
  background-color: #f2f2f2;
}